Create Rounded Button in Flutter – #1

CodeWithFlutter
4 Min Read

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),
              ),
            )

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),
                ),
              ),
            )

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),
              ),
            )

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"),
            )

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),
              ),
            )

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.

Share this Article
Leave a comment