How to use ButtonBar in Flutter

Flutter, one of the most widely used platforms for creating iOS and Android applications, offers a wide variety of built-in widgets to build beautiful and interactive user interfaces. One of these widgets is the ButtonBar widget, which allows the user to arrange a row of buttons in an aesthetically pleasing manner.

What is the ButtonBar widget?

The ButtonBar widget is basically a container that arranges a group of buttons in a horizontal manner. This widget makes creating a row of buttons easier without hassling over additional alignment and padding issues.

The ButtonBar widget has various applications, but it is mainly used in situations where multiple buttons are needed to be displayed together in a uniform manner, such as in a toolbar or a form.

ButtonBar widget properties

The ButtonBar widget proposes a number of various properties for modification according to the user's needs. These properties can be specified by you in any manner you want the widget to perform and look.

Some of these properties include:

Alignment
Button height
Padding
Children
Main Axis Size

Customizing the ButtonBar

Moreover, the ButtonBar widget can also be customized to stay in touch with the theme of your app. This is achieved by using the ButtonBarTheme.

It consists of various properties that can be specified by the developer to create a more aesthetically pleasing widget for their apps. Some of these properties are:

butttonTextTheme
buttonMinWidth
buttonHeight
buttonPadding

Adding a ButtonBar to your Flutter app

The ButtonBar widget is available in the material package in Flutter. So, firstly import the package into the dart file in which you want to incorporate a ButtonBar.

Here, we can see that the ButtonBar has a property called children that can hold other widgets, mainly buttons which would be shown in a user interface in a uniform manner according to the alignment and mainAxisSize specified in the widget.

alignment: This property specifies the horizontal alignment of the buttons within the available space. It accepts a value from the MainAxisAlignment enum, which includes options like MainAxisAlignment.start, MainAxisAlignment.center, and MainAxisAlignment.end.
mainAxisSize: The mainAxisSize property determines the size of the ButtonBar in the main axis (horizontal axis). It accepts a value from the MainAxisSize enum, which includes MainAxisSize.max and MainAxisSize.min. When set to MainAxisSize.max, the ButtonBar expands to fill the available space horizontally. MainAxisSize.min makes the ButtonBar take up only the necessary space to accommodate its children.
children: The children property is where you define the buttons or other widgets that you want to display within the ButtonBar. It takes a list of widgets as its value. Typically, you would include buttons like RaisedButton, FlatButton, or IconButton within the list.

import 'package:flutter/material.dart';

class ButtonBarScreen extends StatefulWidget {
  @override
  _ButtonBarScreenState createState() => _ButtonBarScreenState();
}

class _ButtonBarScreenState extends State<ButtonBarScreen> {
  Color _backgroundColor = Colors.white;

  void _changeColor(Color color) {
    setState(() {
      _backgroundColor = color;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ButtonBar Example'),
      ),
      body: Container(
        color: _backgroundColor,
        child: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ButtonBar(
                alignment: MainAxisAlignment.center,
                buttonMinWidth: 80.0, // Adjust the minimum width of buttons
                buttonHeight: 40.0, // Adjust the height of buttons
                children: [
                  RaisedButton(
                    onPressed: () {
                      _changeColor(Colors.red);
                    },
                    child: Text(
                      'Red',
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    color: Colors.red,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8.0),
                    ),
                  ),
                  RaisedButton(
                    onPressed: () {
                      _changeColor(Colors.green);
                    },
                    child: Text(
                      'Green',
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    color: Colors.green,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8.0),
                    ),
                  ),
                  RaisedButton(
                    onPressed: () {
                      _changeColor(Colors.blue);
                    },
                    child: Text(
                      'Blue',
                      style: TextStyle(
                        color: Colors.white,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                    color: Colors.blue,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(8.0),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Color changing ButtonBar widget

Code explanation

The ButtonBarExampleApp is a stateless widget that represents the root of our application.

Lines 14–90: In the build() method of ButtonBarExampleApp, we define the structure of our application's UI using various Flutter widgets.

Lines 23–87: We define the body property of the Scaffold, that contains the main content of our app, which is a Column widget that centers its children vertically.

Inside the Column, we use the ButtonBar widget to horizontally arrange a group of buttons.
The alignment property of ButtonBar specifies how the buttons should be aligned within the available space. In this case, we set it to MainAxisAlignment.center to center the buttons horizontally.
The children property of ButtonBar takes a list of buttons. We use RaisedButton widgets to create three buttons with different text and functionality.
Each RaisedButton has an onPressed callback, which is called when the button is pressed. In this example, we change the color of the screen according to the button pressed by the user.
The child property of RaisedButton defines the text displayed on the button.

Free Resources