Flutter 2.0 Button Cheat Sheet
People who were used to the old ways of using buttons had been left with a new way to implement a button which was a bit confusing at the start, the change of the names and many parameters led to confusion, and people had to google multiple times, what previously had been written on the back of their hand.
So, to end the confusion once and for all and provide people with a way to easily use the new buttons, I’ve decided to write this Blog.
With the introduction of 2.0 the names of the buttons were changed:
a) FlatButton — The previously used FlatButton is now known as TextButton and uses the theme of TextButtonTheme.
b) RaisedButton — The previously used RaisedButton is now known as ElevatedButton and uses the theme of ElevatedButtonTheme.
c) OutlineButton — The previously used OutlineButton is now known as OutlinedButton(a pretty small change in name here) and uses the OutlinedButtonTheme.
NOTE: If your old project needs to migrate to the new way of using the button then it’s best to consult a migration guide for which more information can be found here.
Now, the API Changes on how to use these new buttons
A new object called ButtonStyle is introduced, just like how you can configure a Text widget with TextStyle, you can now configure the buttons using the new ButtonStyle widget
An example of using the new way:
TextButton(
onPressed: (){},
child: Text('Hello'),
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all(Colors.transparent),
overlayColor: MaterialStateProperty.resolveWith(
(Set<MaterialState> states) {
if (states.contains(MaterialState.hovered))
return Colors.red;
else if (states.contains(MaterialState.focused))
return Colors.green;
else if(states.contains(MaterialState.selected))
return Colors.blue;
else
return Colors.black;
},
),
),),
The MaterialStateProperty<Color> returns the value of the color you specify, in the forgroundColor we have given MaterialStateProperty.all and specified the name of the color there, if you leave it as null then it will take the widget’s default on its own.
However, there is another way to provide styling to a button, it’s called styleFrom, instead of specifying ButtonStyle, you can use <The name of the button>.styleFrom() like ElevatedButton.styleFrom().
An example of it would be :
TextButton(
onPressed: (){},
child: Text('Hello'),
style: TextButton.styleFrom()
),Inside it, you can specify all the other properties like padding and color, etc.
Now, moving on we will be discussing how some of the new properties work.
Padding — the new way of providing padding with ButtonStyle is :
style: ButtonStyle(
padding: MaterialStateProperty.all<EdgeInsetsGeometry>(EdgeInsets.zero)
),The styleFrom method for the same would be:
style: TextButton.styleFrom(
padding: EdgeInsets.zero
)Shape — the new way of providing shape with ButtonStyle is
style: ButtonStyle(
shape: MaterialStateProperty.all<
OutlinedBorder>(
RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(50),
side: BorderSide(color: Colors.red),
),
),
),The styleFrom method for the same would be:
style: TextButton.styleFrom(
shape: RoundedRectangleBorder(
borderRadius:
BorderRadius.circular(50),
side: BorderSide(color: Colors.red),
),
)Side — the new way of providing border side with Buttonstyle is:
TextButton(
onPressed: () {},
child: Text('Hello'),
style: ButtonStyle(
side: MaterialStateProperty.all<BorderSide>(BorderSide(
color: Colors.red
))
),
),The styleFrom method for the same is:
TextButton(
onPressed: () {},
child: Text('Hello'),
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.red
)
),
),Alignment — the new way of providing alignment is quite simple(with ButtonStyle):
TextButton(
onPressed: () {},
child: Text('Hello'),
style: ButtonStyle(
alignment: Alignment.center,
),
),The styleFrom method for it is the same:
TextButton(
onPressed: () {},
child: Text('Hello'),
style: TextButton.styleFrom(
alignment: Alignment.center,
),
),Elevation — the new way to provide elevation with ButtonStyle is:
TextButton(
onPressed: () {},
child: Text('Hello'),
style: ButtonStyle(
elevation: MaterialStateProperty.all<double>(1.0)
),
),The styleFrom method for the same is:
TextButton(
onPressed: () {},
child: Text('Hello'),
style: TextButton.styleFrom(
alignment: Alignment.center,
elevation: 1.0
),
),TextStyle — you can provide textstyle in ButtonStyle this way:
TextButton(
onPressed: () {},
child: Text('Hello'),
style: ButtonStyle(
textStyle: MaterialStateProperty.all<TextStyle>(TextStyle(
color: Colors.red
)),
),
),FixedSize — you can change the fixedStyle property of ButtonStyle this way:
TextButton(
onPressed: () {},
child: Text('Hello'),
style: ButtonStyle(
fixedSize: MaterialStateProperty.all<Size>(Size(200,300))
),
),The styleFrom method for the same is:
TextButton(
onPressed: () {},
child: Text('Hello'),
style: TextButton.styleFrom(
fixedSize: Size.fromHeight(150)
),
),Conclusion:
In the article, I have explained the common properties of Button styling in a flutter; you can modify this code according to your choice. This was a small introduction to the Flutter 2.0 Button cheat sheet On User Interaction from my side, and it’s working using Flutter.
I hope this blog will provide you with sufficient information on Trying up the Flutter 2.0 Button cheat sheet in your flutter projects. We will show you all properties in detail. In this blog, we have examined the Flutter 2.0 Button. I hope this blog will help you in the comprehension of the Flutter 2.0 Button in a better way. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter-related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
