Want only one active button from four buttons Flutter

Question

I want only one selected iconbutton from these four. when one is selected (green color) so, another should be un selected (black color). How can I manage it. Please see below image.

here is logical code for that section:

  bool btn1 = false;
  bool btn2 = false;
  bool btn3 = false;
  bool btn4 = false;

Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  IconButton(
                    onPressed: () {
                      setState(() {
                        btn1 = !btn1;
                      });
                    },
                    icon: const Icon(Icons.music_note_outlined),
                    color: btn1 ? Colors.green : Colors.black,
                  ),
                  IconButton(
                    onPressed: () {
                      setState(() {
                        btn2 = !btn2;
                      });
                    },
                    icon: const Icon(Icons.music_video_outlined),
                    color: btn2 ? Colors.green : Colors.black,
                  ),
                  IconButton(
                    onPressed: () {
                      setState(() {
                        btn3 = !btn3;
                      });
                    },
                    icon: const Icon(Icons.headphones_outlined),
                    color: btn3 ? Colors.green : Colors.black,
                  ),
                  IconButton(
                    onPressed: () {
                      setState(() {
                        btn4 = !btn4;
                      });
                    },
                    icon: const Icon(Icons.multitrack_audio_rounded),
                    color: btn4 ? Colors.green : Colors.black,
                  )
                ],
              ),

I hope i could clear

Having only one choice active of many is called a "radiobutton". See https://m2.material.io/components/radio-buttons for details, and for flutter code to implement that. — Randal Schwartz, Apr 13 '23 at 06:12

score 0 · Accepted Answer · answered Apr 13 '23 at 05:39

Declare variable like this :

 bool selectedButton = 1;

Your widget :

Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: [
                  IconButton(
                    onPressed: () {
                      setState(() {
                        selectedButton = 1;
                      });
                    },
                    icon: const Icon(Icons.music_note_outlined),
                    color: selectedButton == 1 ? Colors.green : Colors.black,
                  ),
                  IconButton(
                    onPressed: () {
                      setState(() {
                        selectedButton = 2;
                      });
                    },
                    icon: const Icon(Icons.music_video_outlined),
                    color: selectedButton == 2 ? Colors.green : Colors.black,
                  ),
                  IconButton(
                    onPressed: () {
                      setState(() {
                        selectedButton = 3;
                      });
                    },
                    icon: const Icon(Icons.headphones_outlined),
                    color: selectedButton == 3 ? Colors.green : Colors.black,
                  ),
                  IconButton(
                    onPressed: () {
                      setState(() {
                        selectedButton = 4;
                      });
                    },
                    icon: const Icon(Icons.multitrack_audio_rounded),
                    color: selectedButton == 4 ? Colors.green : Colors.black,
                  )
                ],
              ),

Thank you, It worked. I just made `bool selectedButton` to `int selectedButton`. — pnpatel, Apr 13 '23 at 05:47
Yes you should upvote as well so that it can help others as well. — Karan Mehta, Apr 13 '23 at 05:53

score 0 · Answer 2 · answered Apr 13 '23 at 08:08

Create a Button class with bool object and Button(InkWell). Then create a List of that class and initially assign false value that indicates that button is not pressed. When you press the button, make value at that index true. Something like this.

Class SingleSelectionButton extends StatefulWidget{

const SingleSelectionButton({Key? key, required this.isSelected, required this.onClick) : super(key: key);
    final bool isSelected;
    final VoidCallback onClick;

  @override
  State<SingleSelectionButton> createState() => 
  _SingleSelectionButtonState();

class _ConversationBtnWidgetState extends State<ConversationBtnWidget> {
  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: (){
               setState({
                isSelected = !iSelected;
                }),
               },
      child: Container(
              child:BoxDecoration(
              color: widget.isSelected? Colors.pink: Colors.black,),
              ),
        ],
      ),
    );
  }
}
}

After that you can generate a list of that button.

var buttons = List.generate(5, (index)=> SingleSelectionButton((){},false))

Then you can loop through buttons and make isSelected = true for that button. This answer is general and is only for understanding purpose and may have errors therefore you can write your own solution according to it.

Want only one active button from four buttons Flutter

2 Answers2