flutter - Deselect one container while selecting another container in flutter

Question

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.

标签： flutterdart

Answer 1

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