DISCOVER FLUTTER — WEEK #12

Arrange Buttons in a Row With ToggleButtons Flutter Widget

Photo by Leonardo Yip on Unsplash

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.

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.