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

Answer 1

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

Answer 2

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.

Answer 3

Let's try this package: uni_selected_button. The main idea is to compare groupValue and value on each button. Each button widget is only refreshed inside itself.