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,
),
),
),
),
],
);
}
}
CodePudding user response：
There are two things you might want to do.
- Stop the button from working
- 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,
),
CodePudding user response：
Pass in null as the callback when that particular number is reached. That way, it will disable the button.
For Eg:
onTap: (globalCounter >= 12) ? null : () {...}
CodePudding user response：
I have altered your code. You can use this. Here we need to check the value of globalCounter is equal to 12, before the onTap() function.
Column(
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
ClipRRect(
borderRadius: BorderRadius.circular(5.0),
child: InkWell(
onTap: () {
setState(() {
if (counterOne > 0) {
counterOne--;
globalCounter--;
}
// 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:globalCounter >= 12 ? null : () {
setState(() {
if (counterOne < 8){
counterOne ;
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--;
globalCounter--;
}
// if (globalCounter > 0)
});
},
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: globalCounter>= 12 ? null
:() {
setState(() {
if (counterTwo < 8) {
counterTwo ;
globalCounter ;
}
// 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,
),
),
),
),
],
);
I have noticed one problem here. In this scenario, counterOne value is 8 when I click it won't increment the counterOne text, but it increments the globalCount. I fixed it.