flutterdartflutter-apk

Want only one active button from four buttons Flutter


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.

enter image description here

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


Solution

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