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