Flutter Widget In Focus — ToggleButtons (Know It All)

Exploring ToggleButtons that arrange buttons in a row that you can toggle

Pinkesh Darji

Published in

Flutter Community

6 min readDec 15, 2019

⚠️ Caution — A good number of images inside for better understanding.

If you have ever written any Medium article, Then you must be knowing that it provides some cool formatting options to create an awesome reading experience. When you select any word or sentence you get the options to format the text in this way 👇

As you can see, on selecting any one option from the menu, The text appearance changes. Clicking on the same option again makes the text as it was before. Saying it technically, It is actually toggling the appearance of the text.

Have you ever tried or want to develop a similar user experience (Not exactly like this) using any Flutter Widget?

🎤 Presenting the ToggleButtons

ToggleButtons is a widget that creates multiple buttons that you can toggle and arranges them in a row.

Do you want to stay updated in Flutter world? Please click on subscribe button to get an email when the new tutorial is published or visit the https://flutterbeads.com

🏗 Basic UI structure

List<bool> isSelected = [false, false, false];ToggleButtons(
  children: <Widget>[
    Icon(Icons.format_bold),
    Icon(Icons.format_italic),
    Icon(Icons.link),
  ],
  isSelected: isSelected,
  onPressed: (int index) {
    setState(() {
      isSelected[index] = !isSelected[index];
    });
  },
)

Let’s see some important properties first -

isSelected:

It is responsible for controlling the state of each button i.e selected or unselected. It accepts the list of boolean.

List<bool> isSelected = [false, false, false];
isSelected: isSelected,

ToggleButtons select or unselect the button based on the order of boolean values passed into the list. The below image makes it very clear.

onPressed:

It is a callback that gives the index of the button when pressed by the user. Here we can write any business logic according to our needs.

onPressed: (int index) {
    setState(() {
      isSelected[index] = !isSelected[index];
    });
  },

This code gets the index of the pressed button, gets the value from isSelected List using that index and, invert it and then again set the new value. All this is written inside setState to update UI with the new value 🔃

Let’s see some optional BUT useful properties -

color:

Sets the color of its children when it is not selected.

selectedColor:

Sets the color of its children when it is selected.

fillColor:

Sets the color of button when selected.

highlightColor:

Sets the color of button’s Inkwell i.e The Color to set till the time button is pressed.

splashColor:

Sets the color of the splash of button’s Inkwell.

borderColor:

Sets the border color of ToggleButtons widget.

borderWidth:

Sets the width of the border around each of the Toggle button

selectedBorderColor:

Sets the border color of selected button.

disabledColor: AND disabledBorderColor:

Sets the color of children and its border when ToggleButtons is disabled.

Note — When you set onPressed: null ToggleButtons becomes disabled.

renderBorder:

Decides wether to draw border around each button or not.

borderRadius:

Decides radii of the ToggleButtons border.

focusColor:

Used to set the color of button when it has input focus.

Apps developed with Flutter can also be run on devices that do not have a touch screen or ability to select widget using a pointer. In that case external devices such as a keyboard, Tv remote becomes helpful.

focusNodes:

It accepts list of FocusNode respective to each of toggle button.

Here is the full code 👇

🤓 Its time to get more out of this widget

1) Allow at least one button to get selected at a time.

onPressed: (int index) {
  setState(() {
    for (int indexBtn = 0;indexBtn < isSelected.length;indexBtn++) {
      if (indexBtn == index) {
        isSelected[indexBtn] = true;
      } else {
        isSelected[indexBtn] = false;
      }
    }
  });
}

2) Allow only one button to get selected at a time with all can be unselected.

onPressed: (int index) {
  setState(() {
    for (int indexBtn = 0;indexBtn < isSelected.length;indexBtn++) {
      if (indexBtn == index) {
        isSelected[indexBtn] = !isSelected[indexBtn];
      } else {
        isSelected[indexBtn] = false;
      }
    }
  });
}

🌟Bonus

As I have mentioned earlier that this widget arranges all buttons horizontally. Below is the code to make it vertical.

RotatedBox(
  quarterTurns: 1,
  child: ToggleButtons(
    color: Colors.greenAccent,
    children: <Widget>[
      RotatedBox(quarterTurns: 3, child: Icon(Icons.format_bold)),
      RotatedBox(quarterTurns: 3, child: Icon(Icons.format_italic)),
      RotatedBox(quarterTurns: 3, child: Icon(Icons.link)),
    ],
    isSelected: isSelected,
  ),
)

Goodbye

Thanks for reading. If you found this article to be helpful please share it with your friends.

Easy Way to Internationalize and Localize Your Flutter app - FlutterBeads

More and more people are learning English every day. Still, there is a huge number of people who don't understand or…

flutterbeads.com

State management in Flutter using the BLoC design pattern - FlutterBeads

When working on a Flutter app, you might encounter the need to split a large UI component into several smaller ones to…