Flutter: ToggleButton children in two rows

Question

I have a ToggleButton with 10 Text Widgets. However, I want them to be in two rows, with the first row containing numbers 1 to 5 and the second row containing numbers 6 to 10. How can I achieve this?

Like : -

Answer 1

You can use two ToogleButtons. I am using single list of bool for values.

class GS4 extends StatefulWidget {
  const GS4({super.key});

  @override
  State<GS4> createState() => _GS4State();
}

class _GS4State extends State<GS4> {
  List<bool> selected = List.generate(10, (index) => false);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          ToggleButtons(
            isSelected: selected.sublist(0, 5),
            onPressed: (index) {
              setState(() {
                selected[index] = !selected[index];
              });
            },
            children: List.generate(5, (index) => Text("${index + 1}")),
          ),
          ToggleButtons(
            isSelected: selected.sublist(5),
            onPressed: (index) {
              setState(() {
                selected[index + 5] = !selected[index + 5];
              });
            },
            children: List.generate(5, (index) => Text("${index + 6}")),
          ),
        ],
      ),
    );
  }
}