Question 74910 in Flutter Question posted in
The official Flutter documentation can be found here.

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

Tags:

2

Answers


  1. 0

    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,
                  )
                ],
              ),
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search