Friday, June 26, 2020

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.
Previous Post
Next Post

post written by:

Hi, Navjyot Singh is a coder, content maker and a freelance developer who's pursuing an undergraduate Engineering degree in Computer Science. He started out as a web developer but later picked up the mobile as his favourite platform to develop applications. A Writer by day and coder by night is loathed to discuss himself as the third person but can be persuaded to do so from time to time.

0 comments: