Need Help in getting respective value from a custom widget - flutter

Question

I am a noob in flutter and i need help with this. So I made this counter widget where you can increase and decrease the counter value with button, and called that widget two times in my root widget. now I want to get respective counter value of those counter widget separately for each time I call my counter widget. How do I achieve that.
this is my main.dart file
class _MyHomePageState extends State<MyHomePage> {
int count;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
CounterContainer(count, ValueKey(1)),
Text('first counter : ${CounterContainer(count, ValueKey(1)).count}'),
CounterContainer(count, ValueKey(2)),
Text('second counter : ${CounterContainer(count, ValueKey(2)).count}'),
],
),
),
);
}
}
this is my Counter_widget
class CounterContainer extends StatefulWidget {
int count;
CounterContainer(this.count, ValueKey<int> valueKey);
#override
_CounterContainerState createState() => _CounterContainerState();
}
class _CounterContainerState extends State<CounterContainer> {
int _counter = 0;
void _incrementCounter() {
setState(() {
widget.count = ++_counter;
print('------------>${widget.count}');
});
}
void _decrementCounter() {
setState(() {
if (_counter > 0) {
widget.count = --_counter;
print('------------>${widget.count}');
}
});
}
#override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
FlatButton(
onPressed: _incrementCounter,
child: Icon(Icons.add),
),
Text('$_counter'),
FlatButton(
onPressed: _decrementCounter,
child: Icon(Icons.remove),
),
],
);
}
}

Answer 1

You can copy paste run full code below
You can define two counters counter1 and counter2 and pass callback to do refresh
working demo
code snippet
void _incrementCounter() {
setState(() {
...
});
widget.callback();
}
void _decrementCounter() {
setState(() {
...
});
widget.callback();
}
...
CounterContainer counter1;
CounterContainer counter2;
void refresh() {
print("refresh");
setState(() {});
}
#override
void initState() {
counter1 = CounterContainer(count, ValueKey(1), refresh);
counter2 = CounterContainer(count, ValueKey(2), refresh);
super.initState();
}
...
children: <Widget>[
counter1,
Text('first counter : ${counter1.count}'),
counter2,
Text('second counter : ${counter2.count}'),
],
full code
import 'package:flutter/material.dart';
class CounterContainer extends StatefulWidget {
int count;
VoidCallback callback;
CounterContainer(this.count, ValueKey<int> valueKey, this.callback);
#override
_CounterContainerState createState() => _CounterContainerState();
}
class _CounterContainerState extends State<CounterContainer> {
int _counter = 0;
void _incrementCounter() {
setState(() {
widget.count = ++_counter;
print('------------>${widget.count}');
});
widget.callback();
}
void _decrementCounter() {
setState(() {
if (_counter > 0) {
widget.count = --_counter;
print('------------>${widget.count}');
}
});
widget.callback();
}
#override
Widget build(BuildContext context) {
return Row(
children: <Widget>[
FlatButton(
onPressed: _incrementCounter,
child: Icon(Icons.add),
),
Text('$_counter'),
FlatButton(
onPressed: _decrementCounter,
child: Icon(Icons.remove),
),
],
);
}
}
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int count;
CounterContainer counter1;
CounterContainer counter2;
void refresh() {
print("refresh");
setState(() {});
}
#override
void initState() {
counter1 = CounterContainer(count, ValueKey(1), refresh);
counter2 = CounterContainer(count, ValueKey(2), refresh);
super.initState();
}
#override
Widget build(BuildContext context) {
print('${counter1.count}');
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
counter1,
Text('first counter : ${counter1.count}'),
counter2,
Text('second counter : ${counter2.count}'),
],
),
),
);
}
}