button that effects 2 different states-CodePudding

I have a blue grey button that when pressed, turns green and then when pressed again turns back to blue grey. I now need that same button to also tick up an integer when pressed and then to tick down the integer when pressed again. here is the code:

class _MainPageState extends State<MainPage> {
  int secondaryLeftCounter = 0;                                 //integer to change

  bool so1HasBeenPressed01 = false;


@override
Widget build(BuildContext context) {
  return Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: [
    ClipRRect(
      borderRadius: BorderRadius.circular(50.0),
      child: InkWell(
        onTap: () {
          setState(() {
            so1HasBeenPressed01 = !so1HasBeenPressed01;
          });
        },
        child: Container(
          width: 30.0,
          height: 30.0,
          color: so1HasBeenPressed01
              ? Colors.green
              : Colors.blueGrey[900],
        ),
      ),
    ),],);

I can make it work if there are two buttons (one for ticking up and one for ticking down) but am struggling to get it to work with everything happening with the same button. cheers

CodePudding user response：

Use this code:

    onTap: () {
      setState(() {
        so1HasBeenPressed01 = !so1HasBeenPressed01;
        if(so1HasBeenPressed01)
          secondaryLeftCounter  ;
        else
          secondaryLeftCounter--;
      });
    },