How to select a single toggle button at a time?

Question

I am working on a Flutter Application, How do i select a single toggle button at a time, if i have multiple toggle buttons?

The problem is i have multiple cases with multiple choices within each case, i have 5 different cases.

 onPressed: (int index) {
                setState(() {
                  isSelected2[index] = !isSelected2[index];

                  switch (index) {

                    //This is the other area I had to make changes
                    case 0:
                      if (isSelected2[index]) {
                        print('true');

                        _choiceA += 5;
                        _choiceB += 5;
                        _choiceC += 10;
                        _choiceD += 10;
                      } else {
                        print('false');
                        _choiceA += -5;
                        _choiceB += -5;
                        _choiceC += -10;
                        _choiceD += -10;
                      }
                      break;

Thank you Mohammad

Answer 1

You need to disable all others to achieve desirable behavior. Make a list of values you want to update for each button index:

List values = [[5,5,10,10], [3,2,3,-5], [3,-1,3,4], [3,-8, 12,1]];

Then update your choices:

onPressed: (int index) {
    setState(() {
      for (int buttonIndex = 0; buttonIndex < isSelected.length; buttonIndex++) {
        if (buttonIndex == index) {
          isSelected[buttonIndex] = !isSelected[buttonIndex];
          if(isSelected[buttonIndex]){
            _choiceA += values[buttonIndex][0];
            _choiceB += values[buttonIndex][1];
            _choiceC += values[buttonIndex][2];
            _choiceD += values[buttonIndex][3];
          }else{
            _choiceA -= values[buttonIndex][0];
            _choiceB -= values[buttonIndex][1];
            _choiceC -= values[buttonIndex][2];
            _choiceD -= values[buttonIndex][3];
            isSelected[buttonIndex] = false;
          }
        } else {
          if(isSelected[buttonIndex]){
            _choiceA -= values[buttonIndex][0];
            _choiceB -= values[buttonIndex][1];
            _choiceC -= values[buttonIndex][2];
            _choiceD -= values[buttonIndex][3];
            isSelected[buttonIndex] = false;
          }  
        }
      }
    });
  },

Edit: This code should be refactored

Answer 2

Checkout the code below:

import 'package:flutter/material.dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: SamplePage(),
    );
  }
}

class SamplePage extends StatefulWidget {
  @override
  _SamplePageState createState() => _SamplePageState();
}

class _SamplePageState extends State<SamplePage> {
  List<bool> isSelected;

  @override
  void initState() {
    // this is for 3 buttons, add "false" same as the number of buttons here
    isSelected = [true, false, false];
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('ToggleButtons Demo'),
      ),
      body: Center(
        child: ToggleButtons(
          children: <Widget>[
            // first toggle button
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                'First',
              ),
            ),
            // second toggle button
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                'Second',
              ),
            ),
            // third toggle button
            Padding(
              padding: const EdgeInsets.all(8.0),
              child: Text(
                'Third',
              ),
            ),
          ],
          // logic for button selection below
          onPressed: (int index) {
            setState(() {
              for (int i = 0; i < isSelected.length; i++) {
                isSelected[i] = i == index;
              }
            });
          },
          isSelected: isSelected,
        ),
      ),
    );
  }
}

Output: