quantity increase decrease display counter field - flutter

Question

New to flutter and tried several solutions I cannot get working for simple item counter
Example icons on row. 0 should increase decrease as i press icon +1 or -1
Donut +1 0 -1
When I press plus_one icon button +1 it updates the print terminal so I know button is working. if I hot refresh the phone emulator the counter and display icon on phone updates to correct count.
How do I tell TextBox to update state ( show updated count on screen) when counter has been increased by OnPress in IconBoxState?
'''
class _IconBoxState extends State<StatefulWidget> {
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Material(
color: Colors.white,
child: Center(
child: Ink(
decoration: const ShapeDecoration(
color: Colors.lightBlue,
shape: CircleBorder(),
),
child: IconButton(
icon: Icon(Icons.plus_one),
color: Colors.white,
iconSize: 25,
onPressed: () {
setState(() {
_counter += 10;
print('this is counter + $_counter');
//new TextBox(); not working....
});
},
),
),
),
),
],
);
}
}
class TextBox extends StatefulWidget {
#override
_TextBoxState createState() => _TextBoxState();
}
class _TextBoxState extends State<TextBox> {
// int _counter = 6;
#override
Widget build(BuildContext context) {
return Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
width: 50,
height: 50,
decoration: BoxDecoration(
color: Colors.white,
border: Border.all(),
),
);
}
}
'''

Answer 1

when you are setting the state with setState it only rebuilds the widget, where it is located and other widget's that the container widget contains, so in your case you have TextBox outside the IconBox, so only IconBox is rebuilt and TextBox can't detect state change so it stays same, you have many ways to solve it. 1. somehow store both of the widget inside the container widget and rebuild the state of the container widget, you can do this, 2. use provider, 3. use InheritedWidget 4. use BloC
This is a full code of version one, so you can play around, You will need to include ContainerWidget inside the page you want it to be displayed or in the Scaffold of MaterialApp:
class ContainerWidget extends StatefulWidget {
#override
_ContainerWidgetState createState() => _ContainerWidgetState();
}
class _ContainerWidgetState extends State<ContainerWidget> {
int counter = 0;
void increase() {
counter += 1;
}
void decrease() {
counter -= 1;
}
#override
void setState(fn) {
super.setState(fn);
}
stateSetter(String event) {
if (event == "increase") {
increase();
setState(() {});
} else if (event == "decrease") {
decrease();
setState(() {});
}
}
#override
Widget build(BuildContext context) {
return Container(
child: Column(
children: [
TextBox(
counter: counter,
),
IconBox(
containerSetState: stateSetter,
),
],
),
);
}
}
class IconBox extends StatefulWidget {
final Function containerSetState;
IconBox({this.containerSetState});
#override
_IconBoxState createState() => _IconBoxState();
}
class _IconBoxState extends State<IconBox> {
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Material(
color: Colors.white,
child: Center(
child: Ink(
decoration: const ShapeDecoration(
color: Colors.lightBlue,
shape: CircleBorder(),
),
child: IconButton(
icon: Icon(Icons.plus_one),
color: Colors.white,
iconSize: 25,
onPressed: () {
setState(() {
widget.containerSetState("increase");
//new TextBox(); not working....
});
},
),
),
),
),
Material(
color: Colors.white,
child: Center(
child: Ink(
decoration: const ShapeDecoration(
color: Colors.lightBlue,
shape: CircleBorder(),
),
child: IconButton(
icon: Icon(Icons.exposure_minus_1),
color: Colors.white,
iconSize: 25,
onPressed: () {
setState(() {
widget.containerSetState("decrease");
//new TextBox(); not working....
});
},
),
),
),
),
],
);
}
}
class TextBox extends StatefulWidget {
final int counter;
TextBox({this.counter});
#override
_TextBoxState createState() => _TextBoxState();
}