Flutter counter not counting up - flutter

Question

I have made this scorekeeper app for basketball. I need to count the score and show it on the application. But its stuck on 0. It probably has something to do with the setState().
If possible don't change the code too much since I need to show and explain this to my teacher.
inputPage:
class InputPage extends StatefulWidget {
#override
_InputPageState createState() => _InputPageState();
}
class _InputPageState extends State<InputPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('basketball counter'),
),
body: Column(
children: <Widget>[
Expanded(
child: Row(children: <Widget>[Expanded(child: HoopDesign()), Text(Counter.counter.toString())] ),
),
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: CardDesign1(),
),
Expanded(
child: CardDesign3(),
),
Expanded(
child: CardDesign2(),
),
],
)),
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: CardDesign6(),
),
Expanded(
child: CardDesign4(),
),
Expanded(
child: CardDesign5(),
),
],
),
),
Expanded(
child: Row(
children: <Widget>[
Expanded(
child: HoopDesign(),
),
],
),
),
],
),
);
}
}
Containers:
import 'package:flutter/material.dart';
import 'input_page.dart';
//#region Team1 cards
class CardDesign3 extends StatefulWidget {
#override
CardDesign3State createState() => CardDesign3State();
}
class CardDesign3State extends State<CardDesign3> {
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
},
child: Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
color: Color(0xFFEF7F4D),
borderRadius: BorderRadius.circular(10),
),
child: Text(
'Vanaf de 3 punter lijn!',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Bullpen3D',
fontSize: 20,
),
),
height: 100,
width: 100,
));
}
}
class CardDesign2 extends StatefulWidget {
#override
_CardDesign2State createState() => _CardDesign2State();
}
class _CardDesign2State extends State<CardDesign2> {
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
setState(() => Counter.counter += 2);
},
child: Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
color: Color(0xFFEF7F4D),
borderRadius: BorderRadius.circular(10),
),
child: Text(
'Vanaf de 2 punter lijn',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Bullpen3D',
fontSize: 20,
),
),
height: 100,
width: 100,
));
}
}
class CardDesign1 extends StatefulWidget {
#override
_CardDesign1State createState() => _CardDesign1State();
}
class _CardDesign1State extends State<CardDesign1> {
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
setState(() => Counter.counter++);
},
child: Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
color: Color(0xFFEF7F4D),
borderRadius: BorderRadius.circular(10),
),
child: Text(
'Vanaf de 1 punter lijn',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Bullpen3D',
fontSize: 20,
),
),
height: 100,
width: 100,
));
}
}
//#endregion
//#region Team2 cards
class CardDesign4 extends StatefulWidget {
#override
CardDesign4State createState() => CardDesign4State();
}
class CardDesign4State extends State<CardDesign4> {
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
setState(() {
Counter2.counter += 3 ;
}
);
},
child: Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
color: Color(0xFFEF7F4D),
borderRadius: BorderRadius.circular(10),
),
child: Text(
'Vanaf de 3 punter lijn!',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Bullpen3D',
fontSize: 20,
),
),
height: 100,
width: 100,
));
}
}
class CardDesign5 extends StatefulWidget {
#override
_CardDesign5State createState() => _CardDesign5State();
}
class _CardDesign5State extends State<CardDesign5> {
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
setState(() {
Counter2.counter += 2;
});
},
child: Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
color: Color(0xFFEF7F4D),
borderRadius: BorderRadius.circular(10),
),
child: Text(
'Vanaf de 2 punter lijn',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Bullpen3D',
fontSize: 20,
),
),
height: 100,
width: 100,
));
}
}
class CardDesign6 extends StatefulWidget {
#override
_CardDesign6State createState() => _CardDesign6State();
}
class _CardDesign6State extends State<CardDesign6> {
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
setState(() {
Counter2.counter++;
});
},
child: Container(
margin: EdgeInsets.all(15),
decoration: BoxDecoration(
color: Color(0xFFEF7F4D),
borderRadius: BorderRadius.circular(10),
),
child: Text(
'Vanaf de 1 punter lijn',
textAlign: TextAlign.center,
style: TextStyle(
fontFamily: 'Bullpen3D',
fontSize: 20,
),
),
height: 100,
width: 100,
));
}
}
//#endregion
class HoopDesign extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
height: 100.0,
width: 100.0,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage('images/basketballhoop.jpg'),
),
shape: BoxShape.circle,
),
);
}
}
//#region Counters integers
class Counter {
static int counter = 0;
}
class Counter2 {
static int counter = 0;
}
//#endregion
Main:
import 'package:flutter/material.dart';
import 'input_page.dart';
void main() => runApp(BasketballCounter());
class BasketballCounter extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData(
primaryColor: Color(0xFFEE682D),
scaffoldBackgroundColor: Color(0xFFEE682D),
),
home: InputPage(),
);
}
}
What the app looks like:
(see the 0 on the side of the top hoop)
https://i.imgur.com/JwLnVaU.png
I appreciate the help :)

Answer 1

You need to re-render InputPage to get the new value of the counter.
Sample: (I refactored the code, refer to HalfCourt widget)
class InputPage extends StatelessWidget {
const InputPage({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('basketball counter'),
),
body: Column(
children: <Widget>[
const Expanded(child: HalfCourt()),
const Expanded(child: HalfCourt(isUpperSide: false)),
],
),
);
}
}
class HalfCourt extends StatefulWidget {
const HalfCourt({
this.isUpperSide = true,
Key? key,
}) : super(key: key);
final bool isUpperSide;
#override
_HalfCourtState createState() => _HalfCourtState();
}
class _HalfCourtState extends State<HalfCourt> {
int counter = 0;
#override
Widget build(BuildContext context) {
final Widget hoopAndScore = Expanded(
child: Row(
children: <Widget>[
const Expanded(child: HoopDesign()),
Text(counter.toString())
],
),
);
return Column(
children: <Widget>[
if (widget.isUpperSide) hoopAndScore,
Row(
children: <Widget>[
Expanded(
child: CardDesign(
onPressed: () => setState(() => counter++),
text: 'Vanaf de 1 punter lijn',
),
),
Expanded(
child: CardDesign(
onPressed: () => setState(() => counter += 3),
text: 'Vanaf de 3 punter lijn!',
),
),
Expanded(
child: CardDesign(
onPressed: () => setState(() => counter += 2),
text: 'Vanaf de 2 punter lijn',
),
),
],
),
if (!widget.isUpperSide) hoopAndScore
],
);
}
}
class CardDesign extends StatelessWidget {
CardDesign({
required this.onPressed,
required this.text,
Key? key,
}) : super(key: key);
final VoidCallback onPressed;
final String text;
#override
Widget build(BuildContext context) {
return InkWell(
onTap: onPressed,
child: Container(
height: 100,
width: 100,
margin: const EdgeInsets.all(15),
decoration: const BoxDecoration(
color: Color(0xFFEF7F4D),
borderRadius: BorderRadius.all(Radius.circular(10)),
),
child: Text(
text,
textAlign: TextAlign.center,
style: const TextStyle(
fontFamily: 'Bullpen3D',
fontSize: 20,
),
),
),
);
}
}
class HoopDesign extends StatelessWidget {
const HoopDesign({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Container(
height: 100.0,
width: 100.0,
color: Colors.orange,
);
}
}