How can I move forward and backward data between to different stateful widgets in Flutter? - flutter

Question

There is count variable in the first stateful widget, I have passed it to Setting class. And, Setting class passes it toSettingStateBuilder. Then, its value is changed in incrementing() in SettingStateBuilder. I want the updated value to return back to HomePageBody for further work. How can I do that?
The first stateful widget is created as follow:
class HomePage extends StatefulWidget {
#override
HomePageBody createState() => HomePageBody();
}
class HomePageBody extends State<HomePage> {
int count=0;
#override
Widget build(BuildContext context) {
...
new Setting(count);
}
}
The second stateful widget is created as follow:
class Setting extends StatefulWidget {
int count;
Setting(this.count);
#override
SettingStateBuilder createState() => SettingStateBuilder(count);
}
class SettingStateBuilder extends State<Setting> {
int count;
SettingStateBuilder(this.count);
#override
Widget build(BuildContext context) {
return new Container(
new Text(count.toString());
....
onPressed: () => setState(() => incrementing(context))),
);
}
incrementing(context) { count += 1; }
}

Answer 1

You could add a Function property to the Settings widget that will be called when the counter is incremented, and pass that function when you create the widget so in HomePage you can update the counter:
class HomePage extends StatefulWidget {
#override
HomePageBody createState() => HomePageBody();
}
class HomePageBody extends State<HomePage> {
int count = 0;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
actions: <Widget>[
MaterialButton(
child: Text('Settings'),
onPressed: () {
Navigator.of(context).push(
MaterialPageRoute(
builder: (BuildContext context) => Settings(
count,
(newCount) {
setState(
() {
count = newCount;
},
);
},
),
),
);
},
)
],
),
body: Center(
child: Text('$count'),
),
);
}
}
class Settings extends StatefulWidget {
final int count;
final Function(int) onCounterChanged;
Settings(this.count, onCounterChanged);
#override
SettingsStateBuilder createState() => SettingsStateBuilder(count);
}
class SettingsStateBuilder extends State<Settings> {
int count;
SettingsStateBuilder(this.count);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('$count'),
MaterialButton(
child: Text('Increment'),
onPressed: () => setState(
() {
increment();
},
),
),
],
),
),
);
}
increment() {
count += 1;
widget.onCounterChanged(count);
}
}
If you are dealing with a more complex use case I suggest you to read for how to approach state management in Flutter, some resources:
https://flutter.dev/docs/development/data-and-backend/state-mgmt/intro
https://flutter.dev/docs/development/data-and-backend/state-mgmt/options