How to create a horizontal set of toggle buttons in flutter

How to create a horizontal set of toggle buttons :

Flutter provides ToggleButtons class that can be used to put a list of buttons in a row. For each button, there is a separate variable to maintain the state. We can easily customize the button icons and their values for different states.

We can customize the way how the buttons are selected.

In this post, I will show you one example to use ToggleButtons in Flutter.

Simple example of ToggleButtons:

Below is the complete code for main.dart:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          primarySwatch: Colors.blue,
        ),
        home: Scaffold(
          appBar: AppBar(
            title: Text('Toggle Example'),
          ),
          body: BodyWidget(),
        ));
  }
}

class BodyWidget extends StatefulWidget {
  @override
  ToggleWidget createState() => ToggleWidget();
}

class ToggleWidget extends State {
  List<bool> selectionList = List.generate(3, (_) => false);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ToggleButtons(
        children: <Widget>[
          Icon(Icons.access_alarm_sharp),
          Icon(Icons.add_location),
          Icon(Icons.assignment_late),
        ],
        onPressed: (int index) {
          setState(() {
            selectionList[index] = !selectionList[index];
          });
        },
        isSelected: selectionList,
      ),
    );
  }
}

Here,

we are passing three Icons in the children property.
The onPressed is called if any of the icon is clicked.
isSelected takes a list of booleans. These are the states for each of the button. We are changing the state inside onPressed.

It will give the below output:

Select only one button at a time:

We can write our own logic for onPressed and change the state accordingly. For example, below example changes the toggle buttons to one clickable at a time:

class ToggleWidget extends State {
  List<bool> selectionList = [true, false, false];

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ToggleButtons(
        children: <Widget>[
          Icon(Icons.access_alarm_sharp),
          Icon(Icons.add_location),
          Icon(Icons.assignment_late),
        ],
        onPressed: (int index) {
          setState(() {
            for (int i = 0; i < selectionList.length; i++) {
              if (i == index) {
                selectionList[i] = true;
              } else {
                selectionList[i] = false;
              }
            }
          });
        },
        isSelected: selectionList,
      ),
    );
  }
}

It will keep only one button selected always.

Properties:

Following properties are available for ToggleButton:

borderColor : Border color for enabled toggle buttons.
borderRadius : Radius of border’s corner of toggle button.
borderWidth : Width of button border.
children : List of widgets to show as toggle buttons.
color : Color of the descendant text and icons for enabled button.
constraints : Button size.
disabledBorderColor : border color for disabled toggle button.
disabledColor : Color of the descendant text and icons for disabled button.
fillColor : Fill color of the selected toggle button.
focusColor : focus color
focusNodes : List of FocusNodes corresponding to each toggle button.
highlightColor : Highlight color of the toggle button
hoverColor : Color to show on hovering a pointer.
isSelected : List of booleans to define state of each toggle button
onPressed : Callback when button is tapped.
renderBorder : Boolean to define border rendering is required or not.
selectedBorderColor : Border color to show when the button is selected.
splashColor : Splash color of the button.
textStyle : Text style to add to the button’s text.

Official doc

CodeVsColor

How to create a horizontal set of toggle buttons in flutter