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

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),
      );

CodePudding user response：

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),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }
}

CodePudding user response：

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),
      );