flutter - How to use ToggleButtons

Flutter ToggleButtons

The ToggleButtons class represents a set of toggle buttons. The ToggleButton’s children are laid out along direction. The state of each button in a ToggleButton widget is controlled by the isSelected property, 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 ToggleButton’s children list.

The flutter developers can configure the ToggleButtons widget’s each toggle behavior by the onPressed callback, which can update the isSelected list however it wants to.

The ToggleButtons widget has a solid, 1 logical pixel border surrounding itself by default and separating each button. But the flutter developers can configure the ToggleButton’s borders' color, width, and corner radii.

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

The flutter app developers can completely remove the ToggleButton border by setting the renderBorder property value to false. When they set the borderWidth property value to 0.0 results in a hairline border.

The ToggleButton class has various properties to configure the button such as direction, children, borderColor, borderWidth, borderRadius, color, constraints, fillColor, focusColor, highlightColor, hoverColor, isSelected, onPressed, renderBorder, selectedColor, splashColor, tapTargetSize, and textStyle.

The ToggleButton class also has many useful methods as example build(), createLement(), toString(), toStringDeep(), toDiagnosticsNode(), noSuchMethod(), and toStringShort().

main.dart

import 'package:flutter/material.dart';

void main() => runApp(const FlutterExample());

class FlutterExample extends StatelessWidget {
  const FlutterExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: 'Flutter Example',
        theme: ThemeData(primarySwatch: Colors.pink),
        home: const StateExample()
    );
  }
}

class StateExample extends StatefulWidget {
  const StateExample({Key? key}) : super(key: key);

  @override
  _StateExampleState createState() => _StateExampleState();
}

class _StateExampleState extends State<StateExample> {
  final List<bool> _selections = List.generate(4, (index) => false);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: const Color(0xFFEDEAE0),
        appBar: AppBar(
            title: const Text("Flutter - ToggleButtons Example")
        ),
        body: bodyContent()
    );
  }


  bodyContent() {
    return Center(
      child: ToggleButtons(
          children: const [
            Icon(Icons.share),
            Icon(Icons.add_location),
            Icon(Icons.bookmark),
            Icon(Icons.repeat)
          ],
          onPressed: (int index){
            setState(() {
              _selections[index] = !_selections[index];
            });
          },
          isSelected: _selections
      ),
    );
  }
}