ButtonBar Widget in Flutter : Say no to Row Widget

ButtonBar from its name, itself, suggests that it is a collection of Buttons arranged in the form of a bar or a Row. ButtonBar aims at providing much more stability over how the buttons are arranged.

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

1. 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.
2. 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.
3. 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.