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.

Image for post

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: [
  isSelected: _buttonsState

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

Image for post

Toggle buttons

#programming #flutter

Arrange Buttons in a Row With ToggleButtons Flutter Widget
1.60 GEEK