Search code examples
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,
                  )
                ],
              ),