How to automatically deactivate the previous button when clicking on another button? - flutter

Question

I have 3 buttons. When you press the button, it turns purple. Only one button can be selected (activated). But now when one button is selected and I want to select another button, I need to first click on the same button (the previous one) and then click on the other button (the new one). How can I make it so that when you click on another button, it toggles, and the previous button is deactivated automatically?
Padding(
padding: const EdgeInsets.symmetric(horizontal: 21),
child: Row(
children: [
GestureDetector(
onTap: () => setState(() {
isVoltageAC = !isVoltageAC;
}),
child: _buttonVoltage('AC', isVoltageAC),
),
const SizedBox(width: 16),
GestureDetector(
onTap: () => setState(() {
isVoltageDC = !isVoltageDC;
}),
child: _buttonVoltage('DC', isVoltageDC),
),
const SizedBox(width: 16),
GestureDetector(
onTap: () => setState(() {
isVoltageAll = !isVoltageAll;
}),
child: _buttonVoltage('All', isVoltageAll),
),
],
),
),
Widget _buttonVoltage(String nameButton, bool isActive) => Container(
padding: const EdgeInsets.symmetric(vertical: 11),
height: 40,
width: 87,
decoration: BoxDecoration(
color: isActive
? constants.Colors.purpleMain
: constants.Colors.white.withOpacity(0.15),
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: isActive ? Colors.transparent : constants.Colors.greyDark,
),
boxShadow: [
BoxShadow(
color: isActive
? constants.Colors.purpleMain.withOpacity(0.34)
: Colors.transparent,
blurRadius: 10,
spreadRadius: 2,
offset: const Offset(0.0, 1.0)),
],
),
alignment: Alignment.center,
child:
Text(nameButton, style: constants.Styles.smallBoldTextStyleWhite),
);

Answer 1

I think it will be better to use enum here
enum VoltageMode {
ac,
dc,
all,
none, //not using
}
VoltageMode? selectedMode;
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 21),
child: Row(
children: [
GestureDetector(
onTap: () => setState(() {
selectedMode = VoltageMode.ac;
}),
child: _buttonVoltage('AC', selectedMode == VoltageMode.ac),
),
const SizedBox(width: 16),
GestureDetector(
onTap: () => setState(() {
selectedMode = VoltageMode.dc;
}),
child: _buttonVoltage('DC', selectedMode == VoltageMode.dc),
),
const SizedBox(width: 16),
GestureDetector(
onTap: () => setState(() {
selectedMode = VoltageMode.all;
}),
child: _buttonVoltage('All', selectedMode == VoltageMode.all),
),
],
),
),
],
),
);
}
}

Answer 2

make int variable and call it selectedIndex and pass value when click on each button, for example when select 1 button set
GestureDetector(
onTap: () => setState(() {
isVoltageAC = !isVoltageAC;
selectedIndex = 1;
}),
child: _buttonVoltage('AC', isVoltageAC),
),
then pass this specific number to your _buttonVoltage widget and check it if it is equal to selectedIndex or not, if it is consider as active button, like this:
Widget _buttonVoltage(String nameButton, int index, int _selectedIndex) => Container(
padding: const EdgeInsets.symmetric(vertical: 11),
height: 40,
width: 87,
decoration: BoxDecoration(
color: _selectedIndex == index
? constants.Colors.purpleMain
: constants.Colors.white.withOpacity(0.15),
borderRadius: BorderRadius.circular(20),
border: Border.all(
color: isActive ? Colors.transparent : constants.Colors.greyDark,
),
boxShadow: [
BoxShadow(
color: _selectedIndex == index
? constants.Colors.purpleMain.withOpacity(0.34)
: Colors.transparent,
blurRadius: 10,
spreadRadius: 2,
offset: const Offset(0.0, 1.0)),
],
),
alignment: Alignment.center,
child:
Text(nameButton, style: constants.Styles.smallBoldTextStyleWhite),
);