Flutter 2.0 new buttons and how to style them.

Now as Flutter 2.0 released, a lot of things have changed. The first thing that I noticed was FlatButton and RaisedButton were deprecated.

Hmm, now what to use instead of them?

Using the Flutter documentation, I found out that instead of FlatButton we have to use TextButton and instead of RaisedButton we have to use ElevatedButton.

At first, I thought it might be change of just naming of buttons. However, that was not the case.

So let’s look how to use these buttons and style them.

TextButton

By default TextButton has:

1. Zero elevation
2. No visible border

This is how it looks, if you use a TextButton with default styling.

Default

Now let’s add some custom styling.
We will use TextButton.styleFrom to style our button.

TextButton(
          child: Text('Submit', 
            style: TextStyle(fontSize: 14, color: Colors.white),),
          onPressed: (){},
          style: TextButton.styleFrom(
            backgroundColor: Color(0xffE51C4B),
            shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8),
                    ),
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            ),
          ),

TextButton Styled

You can also add an icon before the text by using .icon constructor of TextButton. Here you will have to pass an icon and a label widget.

TextButton.icon(
          icon: Icon(Icons.upload_rounded, color: Colors.white),
          label: Text('Submit', style: TextStyle(color: Colors.white),),
          onPressed: (){},
          style: TextButton.styleFrom(
            backgroundColor: Color(0xffE51C4B),
            shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8),
                    ),
            padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
            ),
          )

TextButton with Icon

ElevatedButton

Elevation of the button increases when the Elevatedbutton is pressed.

You can use this button between flst layouts to give it a different dimension.

This is the default ElevatedButton with no styling.

ElevatedButton Default

Now, let’s style our own ElevatedButton.

ElevatedButton(
          child: Text('Submit', style: TextStyle(color: Colors.white),),
          onPressed: (){},
          style: ElevatedButton.styleFrom(
                    elevation: 7,
                    shadowColor: Color(0xffE51C4B),
                    primary: Color(0xffE51C4B), //Background color
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8),
                    ),
                    padding: EdgeInsets.symmetric(horizontal: 20, vertical: 10),
                  ),
          ),

ElevatedButton Styled

You can see how the shadow is increased when the button is tapped.

Also, if you want a button to be disabled, you can set onPressed to null.

ElevatedButton(
          child: Text('Submit'),
          onPressed: null,
          ),

ElevatedButton Disabled

That’s it for this one.

I haven’t covered any fancy stuff here. Just basic things to get your applications going with the new Flutter release.

Thank you for reading until this point. Make sure to leave a comment for any suggestions and 👏 for this story.