ButtonBar Widget – Flutter Widget Guide By Flutter Agency

· 4 min read
ButtonBar Widget - Flutter Guide By Flutter Agency
ButtonBar Widget - Flutter Guide By Flutter Agency

What is  ButtonBar Widget?

ButtonBar widget in Flutter is going to offer flexibility over arranging the Button Widget in Flutter easily. 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.

If the button bar’s width exceeds the maximum width constraint on the widget, it aligns its buttons in a column. The key difference is that the MainAxisAlignment will then be treated as a cross-axis/horizontal alignment. For example, if the buttons overflow and ButtonBar.alignment was set to MainAxisAlignment.start, the buttons would align to the horizontal start of the button bar.

The constructor of a ButtonBar will look like below :

ButtonBar({
    Key key,
    MainAxisAlignment alignment,
    MainAxisSize mainAxisSize,
    ButtonTextTheme buttonTextTheme,
    double buttonMinWidth,
    double buttonHeight,
    EdgeInsetsGeometry buttonPadding,
    bool buttonAlignedDropdown,
    ButtonBarLayoutBehavior layoutBehavior,
    VerticalDirection overflowDirection,
    double overflowButtonSpacing,
    List<Widget> children: const [],
  });

ButtonBar widget – Properties

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.

children  : Takes any number of Button 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 widget and FlatButton widget.

mainAxisSize  : How much of the horizontal space is available is decided by the MainAxisSize property. Takes in a MainAxisSize class as its value.

Example :

 ButtonBar(
          children: <Widget>[
            FlatButton(
              child: Text('Ok'),
              color: Colors.blue,
              onPressed: () {
                // To do
              },
            ),
            FlatButton(
              child: Text('Cancel'),
              color: Colors.blue,
              onPressed: () {
                // To do
              },
            ),
          ],
        ),

ButtonBar widget

ButtonBar widget

Complete source code will look like below :

import 'package:flutter/material.dart';

class ButtonBarWidget extends StatefulWidget {
  @override
  _ButtonBarWidgetState createState() => _ButtonBarWidgetState();
}

class _ButtonBarWidgetState extends State<ButtonBarWidget> {
  @override
  Widget build(BuildContext context) {
    return 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: <Widget>[
            FlatButton(
              child: Text('Ok'),
              color: Colors.blue,
              onPressed: () {
                // To do
              },
            ),
            FlatButton(
              child: Text('Cancel'),
              color: Colors.blue,
              onPressed: () {
                // To do
              },
            ),
          ],
        ),
      ]),
    );
  }
}

Thanks for being with us on Flutter Journey !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply