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.
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.
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
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
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
.
import 'package:flutter/material.dart';
After this, you can add the ButtonBar widget and specify its various attributes in the following manner.
ButtonBar(alignment: // MainAxisAlignment value,mainAxisSize: // MainAxisSize value,children: <Widget>[// Buttons or other widgets],)
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), ), ), ], ), ], ), ), ), ); } }
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.