This tutorial shows you how to use ToggleButtons
widget in Flutter.
If you're using Flutter and your application needs to display toggle buttons, ToggleButtons
widget may be suitable for that purpose. It allows you to easily create a collection of toggle buttons displayed horizontally.
Creating ToggleButtons
To create a ToggleButtons
, just call the constructor. There are two required arguments: children
(List<Widget>
) and isSelected
(List<bool>
). Each widget in children
represents a button and it's typically an Icon
or a Text
. isSelected
is a List
of bool
containing the state of each button whether it's selected (if the value is true
) or not (if the value is false
). The length of children
and isSelected
must be the same.
For example, there is a state variable
List _isSelected = [false, true, false];
Below is the most basic example of how to call the constructor by passing only the required parameters.
child: ToggleButtons(
children: <Widget>[
Icon(Icons.bluetooth),
Icon(Icons.wifi),
Icon(Icons.flash_on),
],
isSelected: _isSelected,
),
Output:
Handling Tap
By default, when the user taps on a button, it doesn't change the selected state of the button. You need to pass a callback function that returns void an accepts one parameter of type int
which is the index of the button.
child: ToggleButtons(
children: <Widget>[
Icon(Icons.bluetooth),
Icon(Icons.wifi),
Icon(Icons.flash_on),
],
isSelected: _isSelected,
onPressed: (int index) {
setState(() {
_isSelected[index] = !_isSelected[index];
});
},
),
Output:
Customizing Colors
To set the color of descendant Text
or Icon
, use color
property. When a button becomes selected, use selectedColor
for the color of descendant Text
or Icon
and fillColor
for the box. Other properties related to colors include focusColor
, highlightColor
, hoverColor
, and splashColor
, you can read the descriptions of each property on the properties section.
child: ToggleButtons(
children: <Widget>[
Icon(Icons.bluetooth),
Icon(Icons.wifi),
Icon(Icons.flash_on),
],
isSelected: _isSelected,
color: Colors.grey,
selectedColor: Colors.red,
fillColor: Colors.lightBlueAccent,
),
Output:
Customizing Border
By default, renderBorder
is set to true
which means the border is rendered. Changing the value to false
makes the border disappears. Customization can be applied to the border. The color can be set using borderColor
property. To change the border color of selected buttons, use selectedBorderColor
. It's also possible to make the border looks rounded using BorderRadius
. Other border-related properties include borderWidth
and disabledBorderColor
, you can read the descriptions of each property on the properties section.
child: ToggleButtons(
children: <Widget>[
Icon(Icons.bluetooth),
Icon(Icons.wifi),
Icon(Icons.flash_on),
],
isSelected: _isSelected,
borderColor: Colors.lightBlueAccent,
selectedBorderColor: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(10)),
),
Output:
Full Code
Below is a full code example that uses custom color and border.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Woolha.com Flutter Tutorial',
home: ToggleButtonsExample(),
);
}
}
class ToggleButtonsExample extends StatefulWidget {
@override
ToggleButtonsExampleState createState() => new ToggleButtonsExampleState();
}
class ToggleButtonsExampleState extends State<ToggleButtonsExample> {
List<bool> _isSelected = [false, true, false];
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Woolha.com Flutter Tutorial'),
),
body: Center(
child: ToggleButtons(
children: <Widget>[
Icon(Icons.bluetooth),
Icon(Icons.wifi),
Icon(Icons.flash_on),
],
isSelected: _isSelected,
onPressed: (int index) {
setState(() {
_isSelected[index] = !_isSelected[index];
});
},
// region example 1
color: Colors.grey,
selectedColor: Colors.red,
fillColor: Colors.lightBlueAccent,
// endregion
// region example 2
borderColor: Colors.lightBlueAccent,
selectedBorderColor: Colors.red,
borderRadius: BorderRadius.all(Radius.circular(10)),
// endregion
),
),
);
}
}
Output:
ToggleButtons
Properties
Properties:
Key key
: The widget key, used to control if it's should be replaced.List<Widget> children
*: List of widgets, each representing a button, typically aText
orIcon
.bool isSelected
*: List of booleans, each representing the state of a button (true
if selected,false
is not selected).void Function(int) onPressed
: Callback called when a button is tapped.TextStyle textStyle
: Text style to be applied in theToggleButtons
widget.BoxConstraints constraints
: Defines the size of the buttons.Color color
: Color for the descendantIcon
andText
if the button is enabled and not selected.Color selectedColor
: Color for the descendantIcon
andText
if the button is selected.Color disabledColor
: Color for the descendantIcon
andText
if the button is disabled.Color fillColor
: The fill color for selected toggle buttons..Color focusColor
: The color when the button has input focus.Color highlightColor
: The highlight color for the button'sInkWell
.Color hoverColor
: The splash color for the button'sInkWell
.Color splashColor
: The color when the button has a pointer hovering over it..List<FocusNode> focusNodes
: The list ofFocusNode
s, corresponding to each toggle button..bool renderBorder
: Defaults totrue
.Color borderColor
: The border color when the toggle button is enabled and not selected..Color selectedBorderColor
: The border color when the button is selected.Color disabledBorderColor
: The border color when the button is disabled.BorderRadius borderRadius
: The radius of the border.double borderWidth
: The width of the border.
*: required