CODEWITHSUNDEEP
flutterdart
yamini r
yamini r

Reputation: 203

Deselect one container while selecting another container in flutter

I have three different containers, which I can select and deselect separately, like shown below:

bool 1Clicked = false;
bool 2Clicked = false;
bool 3Clicked = false;

GestureDetector(
                onTap: (){
                setState(() {
                1Clicked = !1Clicked;
                });
                },
                child: Container(
                decoration: BoxDecoration(
                color: 1Clicked? Colors.orange: Colors.white,
                ),
               ),
              ), 

GestureDetector(
                onTap: (){
                setState(() {
                2Clicked = !2Clicked;
                });
                },
                child: Container(
                decoration: BoxDecoration(
                color: 2Clicked? Colors.orange: Colors.white,
                ),
               ),
              ),

GestureDetector(
                onTap: (){
                setState(() {
                3Clicked = !3Clicked;
                });
                },
                child: Container(
                decoration: BoxDecoration(
                color: 3Clicked? Colors.orange: Colors.white,
                ),
               ),
              ),

However, when I select both the first and second container, one after another, they are capable of being selected together. I want only one container among them to be selected, which means, I should deselect other containers while I select any of the one container. I have no idea on it, please help me out.

Upvotes: 0

Views: 845

Answers (1)

t00n
t00n

Reputation: 415

Use setState in order to set to false the corresponding boolean

GestureDetector(
                onTap: (){
                setState(() {
                1Clicked = !1Clicked;
                2Clicked = false;
                3Clicked = false;
                });
                },
                child: Container(
                decoration: BoxDecoration(
                color: 1Clicked? Colors.orange: Colors.white,
                ),
               ),
              ), 

GestureDetector(
                onTap: (){
                setState(() {
                1Clicked = false;
                2Clicked = !2Clicked;
                3Clicked = false;
                });
                },
                child: Container(
                decoration: BoxDecoration(
                color: 2Clicked? Colors.orange: Colors.white,
                ),
               ),
              ),

GestureDetector(
                onTap: (){
                setState(() {
                1Clicked = false;
                2Clicked = false;
                3Clicked = !3Clicked;
                });
                },
                child: Container(
                decoration: BoxDecoration(
                color: 3Clicked? Colors.orange: Colors.white,
                ),
               ),
              ),

Upvotes: 1

Related Questions