Create Rounded Button in Flutter – #1

Hello guys, creating a rounded button in flutter is very easy. In this blog, you will learn different ways of creating rounded buttons in a flutter. So let’s get started.

Ways of creating rounded button in Flutter

  • Using MaterialButton Widget.
  • Using Container and InkWell Widget.
  • Using ElevatedButton Widget.
  • Using OutlinedButton widget.
  • Using TextButton Widget.

Demo of flutter rounded button

Rounded Button in Flutter

Using MaterialButton widget

  • First, create a Text Widget and give your button name.
  • Then Wrap the Text Widget as MaterialButton.
  • Decorate the material button using color and shape property. The code is given below,
MaterialButton( color: Colors.blue, shape: RoundedRectangleBorder( borderRadius: BorderRadius.circular(18.0), ), onPressed: () {}, child: Text( "MaterialButton", style: TextStyle(color: Colors.white), ), )
Code language: CSS (css)

Using Container and InkWell widget

  • First, create a Text Widget and give your button name.
  • Then, wrap the text widget as a Container widget.
  • Then, decorate the container using decoration property.
  • To make a click event wrap the container widget as an InkWell widget. The code is given below,
InkWell( onTap: () {}, child: Container( padding: EdgeInsets.all(8.0), decoration: BoxDecoration( color: Colors.blue, borderRadius: BorderRadius.circular(18.0), ), child: Text( "Container and InkWell", style: TextStyle(color: Colors.white), ), ), )
Code language: CSS (css)

Using OutlinedButton Widget

  • First, create a Text Widget and give your button name.
  • Then Wrap the Text Widget as OutlinedButton.
  • Decorate the OutlinedButton using style property. The code is given below,
OutlinedButton( style: ButtonStyle( backgroundColor: MaterialStateProperty.all<Color>(Colors.blue), shape: MaterialStateProperty.all<RoundedRectangleBorder>( RoundedRectangleBorder( borderRadius: BorderRadius.circular(18.0), ), ), ), onPressed: () {}, child: Text( "OutlinedButton", style: TextStyle(color: Colors.white), ), )
Code language: CSS (css)

Using ElevatedButton Widget

  • First, create a Text Widget and give your button name.
  • Then Wrap the Text Widget as ElevatedButton.
  • Decorate the ElevatedButton using style property. The code is given below,
ElevatedButton( style: ButtonStyle( shape: MaterialStateProperty.all<RoundedRectangleBorder>( RoundedRectangleBorder( borderRadius: BorderRadius.circular(18.0), ), ), ), onPressed: () {}, child: Text("ElevatedButton"), )
Code language: CSS (css)

Using TextButton Widget

  • First, create a Text Widget and give your button name.
  • Then Wrap the Text Widget as TextButton.
  • Decorate the TextButton using style property. The code is given below,
TextButton( style: ButtonStyle( backgroundColor: MaterialStateProperty.all<Color>(Colors.blue), shape: MaterialStateProperty.all<RoundedRectangleBorder>( RoundedRectangleBorder( borderRadius: BorderRadius.circular(18.0), ), ), ), onPressed: () {}, child: Text( "TextButton", style: TextStyle(color: Colors.white), ), )
Code language: CSS (css)

Important Note:

The FlatButton, RaisedButton, and OutlineButton are deprecated. Don’t use that widget. The alternatives are given below,

Old WidgetOld ThemeNew WidgetNew Theme
FlatButtonButtonThemeTextButtonTextButtonTheme
RaisedButtonButtonThemeElevatedButtonElevatedButtonTheme
OutlineButtonButtonThemeOutlinedButtonOutlinedButtonTheme
Flutter – New Buttons and Themes

Reference, visit official docs.