Toggle Buttons in Flutter

ToggleButtons is a widget that creates a horizontal set of buttons. It can be used to select from a group of choices.

There are two types of toggle buttons: icon buttons and text buttons.

Let’s take the example of an eCommerce website with multiples products. So when we navigate we want sometimes to save some items in the wishlist or to add them to a shopping bag or sometimes to show some similar items. This can be done using The togglebuttons widget. It displays its children a list of widgets horizontally organized. The state of each button is controlled by isSelected, which is a list of Booleans that determine whether a button is in an active, inactive, or selected state. They are correlated by their index in the list. The length of isSelected must match the length of the child list. Child arguments and isSelected properties are required.

ToggleButtons(
              color: Colors.black.withOpacity(0.60),
              selectedColor: Colors.red,
              borderRadius: BorderRadius.circular(14.0),
              isSelected: isSelected,
              onPressed: (index) {
                // Respond to button selection
                setState(() {
                  isSelected[index] = !isSelected[index];
                });
              },
              children: [
                isSelected[0]
                    ? Icon(Icons.favorite)…