how to turn buttons off when a number is reached

Question

I've created 3 counters. the first two have a plus and minus button that makes the counter in the middle of the buttons go up and down to a max of 8. and they both also effect the last counter (global counter) which has a max of 12.

the problem im having is how do i stop either of the add buttons from working when the globalCounter reaches 12? e.g. if counterOne is at 7, how do i get counterTwo to turn off when it reaches 5 (global counter would be 12)

here is my code:

void main() {
  runApp(
    const MyApp(),
  );
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: Scaffold(
        backgroundColor: Colors.black,
        body: SafeArea(child: ButtonProblem()),
      ),
    );
  }
}

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

  @override
  State<ButtonProblem> createState() => _ButtonProblemState();
}

class _ButtonProblemState extends State<ButtonProblem> {
  int counterOne = 0;
  int counterTwo = 0;
  int globalCounter = 0;
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(5.0),
              child: InkWell(
                onTap: () {
                  setState(() {
                    if (counterOne > 0) counterOne--;
                    if (globalCounter > 0) globalCounter--;
                  });
                },
                child: Container(
                  child: Icon(Icons.remove, color: Colors.white),
                  width: 25.0,
                  height: 35.0,
                  color: Colors.blueGrey[900],
                ),
              ),
            ),
            Container(
              child: Text(
                '$counterOne',
                style: TextStyle(
                  fontFamily: 'SourceSansPro',
                  fontSize: 40.0,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(5.0),
              child: InkWell(
                onTap: () {
                  setState(() {
                    if (counterOne < 8) counterOne++;
                    if (globalCounter < 12) globalCounter++;
                  });
                },
                child: Container(
                  child: Icon(Icons.add, color: Colors.white),
                  width: 25.0,
                  height: 35.0,
                  color: Colors.blueGrey[900],
                ),
              ),
            ),
          ],
        ),
        Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(5.0),
              child: InkWell(
                onTap: () {
                  setState(() {
                    if (counterTwo > 0) counterTwo--;
                    if (globalCounter > 0) globalCounter--;
                  });
                },
                child: Container(
                  child: Icon(Icons.remove, color: Colors.white),
                  width: 25.0,
                  height: 35.0,
                  color: Colors.blueGrey[900],
                ),
              ),
            ),
            Container(
              child: Text(
                '$counterTwo',
                style: TextStyle(
                  fontFamily: 'SourceSansPro',
                  fontSize: 40.0,
                  color: Colors.white,
                  fontWeight: FontWeight.bold,
                ),
              ),
            ),
            ClipRRect(
              borderRadius: BorderRadius.circular(5.0),
              child: InkWell(
                onTap: () {
                  setState(() {
                    if (counterTwo < 8) counterTwo++;
                    if (globalCounter < 12) globalCounter++;
                  });
                },
                child: Container(
                  child: Icon(Icons.add, color: Colors.white),
                  width: 25.0,
                  height: 35.0,
                  color: Colors.blueGrey[900],
                ),
              ),
            ),
          ],
        ),
        Container(
          child: Center(
            child: Text(
              '$globalCounter/12',
              textAlign: TextAlign.center,
              style: TextStyle(
                fontFamily: 'SourceSansPro',
                fontSize: 35.0,
                color: Colors.white,
                fontWeight: FontWeight.bold,
              ),
            ),
          ),
        ),
      ],
    );
  }
}

Answer 1

There are two things you might want to do.

1. Stop the button from working
2. Hiding the button or making it appear disabled.

The second point is very subjective, so I won't focus on the design details. But the general idea is to insert an extra if like this:

onTap: () {
    setState(() {
        if (globalCounter >= 12) return; // This one is new
        if (counterOne < 8) counterOne++;
        if (globalCounter < 12) globalCounter++;
    });
},

This prevents the button from working when the global coutner reaches 12. You can also use this check to change the appearance of the buttons, e.g. like this

 child: Container(
     child: Icon(Icons.add, color: Colors.white),
     width: 25.0,
     height: 35.0,
     color: globalCounter < 12 ? Colors.blueGrey[900] : Colors.red,
 ),