The ButtonBar Widget in Flutter provides a lot of capability than just merely arranging buttons in a Row. It provides you the option of adding as many buttons as you want as children. We will talk about all of that in this article along with a sample application.
The sample code for ButtonBar is
ButtonBar(
alignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
disabledColor: Colors.white,
child: Container(
padding: EdgeInsets.all(15),
child: Text(
'LOGIN HERE',
style: TextStyle(
color: Colors.black,
fontSize: 20,
fontWeight: FontWeight.w400),
),
),
),
RaisedButton(
disabledColor: Colors.blue.shade300,
child: Container(
padding: EdgeInsets.all(15),
child: Text(
'CREATE ACCOUNT',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.w300),
),
),
),
],
)
ButtonBar Widget has Mainly three properties
- Children- This is the most important attribute of the three. It takes any number of Buttons Widgets as possible and displays them on the UI easily. There are multiple options available to provide inside the widget , Two most common ones are FlatButton and RaisedButton.
- Alignment- The alignment property presents the aligning option to the entire collection of buttons in the ButtonBar Widget. With the help of this, the buttons can be aligned easily.
- MainAxisSize- How much space is Horizontal space is provided to the ButtonBar widget is decided by this Attribute.
Sample Application -ButtonBar
This sample application shows the usage of the ButtonBar widget in the Flutter app. I have used two RaisedButton Widgets. However, you can use as many as you want, but it is recommended to use a max of 3.
Conclusion - ButtonBar
Time to look at what we learned. ButtonBar widget will come handy whenever required owing to the types of group buttons provided. In fact, It is much easier to implement the ButtonBar Widget than using the Row widget.
Comment your thoughts below.
0 comments: