I don’t know about you, but I love having shortcuts on my phone that give me quick access to some action.

I was thinking in the direction of whether there is a widget that will provide such a look in your app and discovered the ToggleButtons widget.

Example of using ToggleButtons

Goal 1. Create Toggle Buttons

To create a toggle button, it is necessary to call ToggleButtons’s constructor. The first step in discovering a new widget is its mandatory arguments. There are two required arguments for this widget:

• children (List<Widget>) — Each widget in children represents a button and in our case, it would be an Icon.
• isSelected (List<bool>) — 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)

Note: The length of children and isSelected must be the same.

Our goal is to have four toggle buttons, which means that we will create a state variable that will store the state of these four buttons, i.e., whether they are selected or not. We set the initial state of all buttons to false.

Note: Initialize this state variable inside the Stateful widget.

List<bool> _buttonsState = List.generate(4, (index) => false);

The next step is to call the constructor and pass the required parameters.

child: ToggleButtons(
  children: [
    Icon(Icons.wifi),
    Icon(Icons.bluetooth),
    Icon(Icons.highlight),
    Icon(Icons.camera),
  ],
  isSelected: _buttonsState
)

If we run our project, we’ll see the four disabled buttons.

Toggle buttons

#programming #flutter