ToggleButtons class

A horizontal set of toggle buttons.

The list of children are laid out in a row. The state of each button is controlled by isSelected, which is a list of bools that determine if a button is in an unselected or selected state. They are both correlated by their index in the list. The length of isSelected has to match the length of the children list.

Customizing toggle buttons

Each toggle's behavior can be configured by the onPressed callback, which can update the isSelected list however it wants to.

Here is an implementation that allows for multiple buttons to be simultaneously selected, while requiring none of the buttons to be selected.

ToggleButtons(
  children: <Widget>[
    Icon(Icons.ac_unit),
    Icon(Icons.call),
    Icon(Icons.cake),
  ],
  onPressed: (int index) {
    setState(() {
      isSelected[index] = !isSelected[index];
    });
  },
  isSelected: isSelected,
),

Here is an implementation that requires mutually exclusive selection while requiring at least one selection. Note that this assumes that isSelected was properly initialized with one selection.

ToggleButtons(
  children: <Widget>[
    Icon(Icons.ac_unit),
    Icon(Icons.call),
    Icon(Icons.cake),
  ],
  onPressed: (int index) {
    setState(() {
      for (int buttonIndex = 0; buttonIndex < isSelected.length; buttonIndex++) {
        if (buttonIndex == index) {
          isSelected[buttonIndex] = true;
        } else {
          isSelected[buttonIndex] = false;
        }
      }
    });
  },
  isSelected: isSelected,
),

Here is an implementation that requires mutually exclusive selection, but allows for none of the buttons to be selected.

ToggleButtons(
  children: <Widget>[
    Icon(Icons.ac_unit),
    Icon(Icons.call),
    Icon(Icons.cake),
  ],
  onPressed: (int index) {
    setState(() {
      for (int buttonIndex = 0; buttonIndex < isSelected.length; buttonIndex++) {
        if (buttonIndex == index) {
          isSelected[buttonIndex] = !isSelected[buttonIndex];
        } else {
          isSelected[buttonIndex] = false;
        }
      }
    });
  },
  isSelected: isSelected,
),

Here is an implementation that allows for multiple buttons to be simultaneously selected, while requiring at least one selection. Note that this assumes that isSelected was properly initialized with one selection.

ToggleButtons(
  children: <Widget>[
    Icon(Icons.ac_unit),
    Icon(Icons.call),
    Icon(Icons.cake),
  ],
  onPressed: (int index) {
    int count = 0;
    isSelected.forEach((bool val) {
      if (val) count++;
    });

    if (isSelected[index] && count < 2)
      return;

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

ToggleButton Borders

The toggle buttons, by default, have a solid, 1 logical pixel border surrounding itself and separating each button. The toggle button borders' color, width, and corner radii are configurable.

The selectedBorderColor determines the border's color when the button is selected, while disabledBorderColor determines the border's color when the button is disabled. borderColor is used when the button is enabled.

To remove the border, set borderWidth to null. Setting borderWidth to 0.0 results in a hairline border. For more information on hairline borders, see BorderSide.width.

See also:

Inheritance

Constructors

ToggleButtons({Key key, @required List<Widget> children, @required List<bool> isSelected, void onPressed(int index), Color color, Color selectedColor, Color disabledColor, Color fillColor, Color focusColor, Color highlightColor, Color hoverColor, Color splashColor, List<FocusNode> focusNodes, bool renderBorder: true, Color borderColor, Color selectedBorderColor, Color disabledBorderColor, BorderRadius borderRadius, double borderWidth })
Creates a horizontal set of toggle buttons. [...]
const

Properties

borderColor Color
The border color to display when the toggle button is enabled and not selected. [...]
final
borderRadius BorderRadius
The radii of the border's corners. [...]
final
borderWidth double
The width of the border surrounding each toggle button. [...]
final
children List<Widget>
The toggle button widgets. [...]
final
color Color
The color for descendant Text and Icon widgets if the button is enabled and not selected. [...]
final
disabledBorderColor Color
The border color to display when the toggle button is disabled. [...]
final
disabledColor Color
The color for descendant Text and Icon widgets if the button is disabled. [...]
final
fillColor Color
The fill color for selected toggle buttons. [...]
final
focusColor Color
The color to use for filling the button when the button has input focus. [...]
final
focusNodes List<FocusNode>
The list of FocusNodes, corresponding to each toggle button. [...]
final
highlightColor Color
The highlight color for the button's InkWell. [...]
final
hoverColor Color
The color to use for filling the button when the button has a pointer hovering over it. [...]
final
isSelected List<bool>
The corresponding selection state of each toggle button. [...]
final
onPressed → void Function(int index)
The callback that is called when a button is tapped. [...]
final
renderBorder bool
Whether or not to render a border around each toggle button. [...]
final
selectedBorderColor Color
The border color to display when the toggle button is selected. [...]
final
selectedColor Color
The color for descendant Text and Icon widgets if the button is selected. [...]
final
splashColor Color
The splash color for the button's InkWell. [...]
final
hashCode int
The hash code for this object. [...]
read-only, inherited
key Key
Controls how one widget replaces another widget in the tree. [...]
final, inherited
runtimeType Type
A representation of the runtime type of the object.
read-only, inherited

Methods

build(BuildContext context) Widget
Describes the part of the user interface represented by this widget. [...]
override
debugFillProperties(DiagnosticPropertiesBuilder properties) → void
Add additional properties associated with the node. [...]
override
createElement() StatelessElement
Creates a StatelessElement to manage this widget's location in the tree. [...]
inherited
debugDescribeChildren() List<DiagnosticsNode>
Returns a list of DiagnosticsNode objects describing this node's children. [...]
@protected, inherited
noSuchMethod(Invocation invocation) → dynamic
Invoked when a non-existent method or property is accessed. [...]
inherited
toDiagnosticsNode({String name, DiagnosticsTreeStyle style }) DiagnosticsNode
Returns a debug representation of the object that is used by debugging tools and by DiagnosticsNode.toStringDeep. [...]
inherited
toString({DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a string representation of this object.
inherited
toStringDeep({String prefixLineOne: '', String prefixOtherLines, DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a string representation of this node and its descendants. [...]
inherited
toStringShallow({String joiner: ', ', DiagnosticLevel minLevel: DiagnosticLevel.debug }) String
Returns a one-line detailed description of the object. [...]
inherited
toStringShort() String
A short, textual description of this widget.
inherited

Operators

operator ==(dynamic other) bool
The equality operator. [...]
inherited