how to get a button to update a counter only once when pressed the first time?-CodePudding

I have two container buttons (blue and red) that alternate being visible when pressed. plus a counter that ticks up each time the blue button is pressed.

class Test extends StatefulWidget {
  const Test({Key? key}) : super(key: key);

  @override
  State<Test> createState() => _TestState();
}

class _TestState extends State<Test> {
  int counter = 0;
  bool blueVisibility = true;
  bool redVisibility = false;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    child: Visibility(
                      visible: blueVisibility,
                      child: InkWell(
                        onTap: () {
                          setState(() {
                            redVisibility = true;
                            blueVisibility = false;
                            counter  ;
                          });
                        },
                        child: Container(
                          margin: EdgeInsets.all(10),
                          color: Colors.blue,
                          height: 80,
                          width: 50,
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    child: Visibility(
                      visible: redVisibility,
                      child: InkWell(
                        onTap: () {
                          setState(() {
                            redVisibility = false;
                            blueVisibility = true;
                          });
                        },
                        child: Container(
                          margin: EdgeInsets.all(10),
                          color: Colors.red,
                          height: 80,
                          width: 50,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Container(
            height: 50,
            width: 50,
            color: Colors.blueGrey,
            alignment: Alignment.center,
            child: Text(
              '$counter',
              style: TextStyle(
                fontSize: 40,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Is it possible to make it so the blue box only adds to the counter the first time it is pressed and then not again after that while still retaining the ability to press the boxes to make them visible/invisible?

thanks so much

CodePudding user response：

you can just wrap the code with an if else statement to achieve what you want like the following. in the onTap of the blue container button:

   onTap: () {
                      setState(() {
                        redVisibility = true;
                        blueVisibility = false;
                      if(counter < 1) {
                         counter  ;
                       }
                      });
                    },

this will let the counter increment just one time.

CodePudding user response：

  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter  ;
    });
  }

  int counter = 0;
  bool blueVisibility = true;
  bool redVisibility = false;
  int check=0;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: Row(
              children: [
                Expanded(
                  child: Container(
                    child: Visibility(
                      visible: blueVisibility,
                      child: InkWell(
                        onTap: () {
                          setState(() {
                            redVisibility = true;
                            blueVisibility = false;
                            if(check==0){
                            counter  ;
                            check  ;}
                          });
                        },
                        child: Container(
                          margin: EdgeInsets.all(10),
                          color: Colors.blue,
                          height: 80,
                          width: 50,
                        ),
                      ),
                    ),
                  ),
                ),
                Expanded(
                  child: Container(
                    child: Visibility(
                      visible: redVisibility,
                      child: InkWell(
                        onTap: () {
                          setState(() {
                            redVisibility = false;
                            blueVisibility = true;
                          });
                        },
                        child: Container(
                          margin: EdgeInsets.all(10),
                          color: Colors.red,
                          height: 80,
                          width: 50,
                        ),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
          Container(
            height: 50,
            width: 50,
            color: Colors.blueGrey,
            alignment: Alignment.center,
            child: Text(
              '$counter',
              style: TextStyle(
                fontSize: 40,
              ),
            ),
          ),
        ],
      ),
    );}
  }