Flutter - Using ToggleButtons Widget Examples

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 a Text or Icon.
• 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 the ToggleButtons widget.
• BoxConstraints constraints: Defines the size of the buttons.
• Color color: Color for the descendant Icon and Text if the button is enabled and not selected.
• Color selectedColor: Color for the descendant Icon and Text if the button is selected.
• Color disabledColor: Color for the descendant Icon and Text 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's InkWell.
• Color hoverColor: The splash color for the button's InkWell.
• Color splashColor: The color when the button has a pointer hovering over it..
• List<FocusNode> focusNodes: The list of FocusNodes, corresponding to each toggle button..
• bool renderBorder: Defaults to true.
• 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