ButtonBar Widget in Flutter – Don’t use Row Widget

ButtonBar Widget in Flutter

Buttonbar widget in Flutter is going to offer flexibility over arranging the Button Widget in Flutter easily. Just as the name suggests, the Buttons will be arranged in a Bar or in a Row. ButtonBar provides much more stability over how the buttons are arranged.

ButtonBar Widget in Flutter provides a lot more than merely arranging buttons in a Row. It can be as simple as giving the Buttons as children but there are other structural preferences that a ButtonBar provides. We will about all of that in this article along with a sample application.

ButtonBar Widget – Properties

There are just 3 properties of the buttonbar widget,

  • alignment – The Alignment property presents the usual aligning option to the entire button bar widget. Since the bar can consist of Buttons, they can be arranged based on the alignment property easily. To know more about how the alignment property affects the ButtonBar widget take a look at the app example in the next section
  • children – The most important attribute of the ButtonBar. Takes any number of Button widgets as possible. The Button widgets can now be used to provide buttons on the UI easily. There are multiple options to provide inside the children, including RaisedButton and FlatButton.
  • mainAxisSize – How much of the horizontal space is available is decided by the MainAxisSize property. Takes in a MainAxisSize class as its value.

In the next section, a sample application is present to provide an example of the required properties to create the Application.

ButtonBar Widget – Sample Application

In order to create a good use of the ButtonBar widget in Flutter, the following example is used to present that. Note that, the ButtonBar widget contains both the Flat and the RaisedButton Widget in Flutter. This way, multiple button widgets can be arranged, however it is recommended to limit it to a maximum of 3.

import 'dart:async';
import 'package:flutter/material.dart';
void main() => runApp(ButtonBarApp());
class ButtonBarApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Sample ButtonBar Widget',
      home: ButtonBarWidget(),
    );
  }
}
class ButtonBarWidget extends StatefulWidget {
  ButtonBarWidget({Key key}) : super(key: key);
  @override
  _ButtonBarWidgetState createState() => _ButtonBarWidgetState();
}
class _ButtonBarWidgetState extends State<ButtonBarWidget> {
  @override
  void initState() {
    super.initState();
  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      drawer: Drawer(),
      appBar: AppBar(
        title: Text('Sample ButtonBar'),
        backgroundColor: Colors.black87,
        leading: BackButton(color: Colors.white,),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
              Card(
                child: Container(
                  height: 200,
                  width: 900,
                  child: Center(child:Text("Sample 1", style: TextStyle(color: Colors.white),),),
                  decoration: BoxDecoration(
                    color: Colors.red
                  ),
                ),
              ),
               ButtonBar(children:[
               RaisedButton(
               child:Text("Button1"),
               FlatButton("Button2"))
               ],
               alignment:MainAxisAlignment.center,
               mainAxisSize:MainAxisSize.max
               )
          ],
        ),
      )
    );
  }
}

You can modify the cards widget to create an application that will look like the below example app.

ButtonBar widget in Flutter
ButtonBar widget in Flutter

ButtonBar – Conclusion

Button Bar can come in handy whenever required owning to its nature to group Buttons. It is in fact much easier to provide Button Bar widget instead of Row widget children’s values. Both will at the end of the day do the same work, but Row widget is a bit difficult to work around if the final product has to look like above!

Drop your comments down below.

“Happy Coding”

Leave a Comment

Your email address will not be published. Required fields are marked *