How to select a single toggle button at a time? - flutter

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

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:

Answer 2

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