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:
- Zero elevation
- No visible border
This is how it looks, if you use a TextButton with default styling.
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),
),
),
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),
),
)
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.
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),
),
),
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,
),
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.