How to Set/Update State of StatefulWidget from other StatefulWidget in Flutter? - state

Question

For Example in the below code plus button works and able to update
the text but the minus button does not.
But if we press FloatingActionButton then the State is refreshed .
The minus button is changing the value of the variable but not
updating the state of parent widget .
here is code .....
import 'package:flutter/material.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Flutter Demo',
theme: new ThemeData(
primarySwatch: Colors.blue,
),
home: new MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
int number;
EdgeInsets globalMargin = const EdgeInsets.symmetric(horizontal: 20.0, vertical: 20.0);
TextStyle textStyle = const TextStyle(
fontSize: 100.0,
color: Colors.black,
);
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => new _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
#override
void initState() {
super.initState();
number = number ?? 0;
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Column(
children: <Widget>[
new Text(
number.toString(),
style: textStyle,
),
new GridView.count(
crossAxisCount: 2,
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: <Widget>[
new InkResponse(
child: new Container(
margin: globalMargin,
color: Colors.green,
child: new Center(
child: new Text(
"+",
style: textStyle,
),
)),
onTap: () {
setState(() {
number = number + 1;
});
},
),
new Sub(),
],
),
],
),
floatingActionButton: new FloatingActionButton(
onPressed: () {
setState(() {});
},
child: new Icon(Icons.update),
),
);
}
}
class Sub extends StatefulWidget {
#override
_SubState createState() => new _SubState();
}
class _SubState extends State<Sub> {
#override
Widget build(BuildContext context) {
return new InkResponse(
child: new Container(
margin: globalMargin,
color: Colors.red,
child: new Center(
child: new Text(
"-",
style: textStyle,
),
)),
onTap: () {
setState(() {
number = number - 1;
});
},
);
}
}

Answer 1

1.On Child Widget : add parameter Function paramter
class ChildWidget extends StatefulWidget {
final Function() notifyParent;
ChildWidget({Key key, #required this.notifyParent}) : super(key: key);
}
2.On Parent Widget : create a Function for the child to callback
refresh() {
setState(() {});
}
3.On Parent Widget : pass parentFunction to Child Widget
new ChildWidget( notifyParent: refresh );
4.On Child Widget : call the Parent Function
widget.notifyParent();

Answer 2

Screenshot (Parent to child, Child to parent):
This examples shows calling a method
Defined in Child widget from Parent widget.
Defined in Parent widget from Child widget.
Code:
class ParentPage extends StatelessWidget {
final GlobalKey<ChildPageState> _key = GlobalKey();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text("Parent")),
body: Center(
child: Column(
children: <Widget>[
Expanded(
child: Container(
color: Colors.grey,
width: double.infinity,
alignment: Alignment.center,
child: ElevatedButton(
child: Text("Call method in child"),
onPressed: () => _key.currentState!.methodInChild(), // calls method in child
),
),
),
Text("Above = Parent\nBelow = Child"),
Expanded(
child: ChildPage(
key: _key,
function: methodInParent,
),
),
],
),
),
);
}
methodInParent() => Fluttertoast.showToast(msg: "Method called in parent", gravity: ToastGravity.CENTER);
}
class ChildPage extends StatefulWidget {
final VoidCallback function;
ChildPage({Key? key, required this.function}) : super(key: key);
#override
ChildPageState createState() => ChildPageState();
}
class ChildPageState extends State<ChildPage> {
#override
Widget build(BuildContext context) {
return Container(
color: Colors.teal,
width: double.infinity,
alignment: Alignment.center,
child: ElevatedButton(
child: Text("Call method in parent"),
onPressed: () => widget.function(), // calls method in parent
),
);
}
methodInChild() => Fluttertoast.showToast(msg: "Method called in child");
}

Answer 3

Old / Not recommended / Failed solutions:
Solution 1: Create a global instance of _MyHomePageState. Use this instance in _SubState as _myHomePageState.setState
Solution 2: No need to create a global instance. Instead, just pass the parent instance to the child widget
Solution 3: Passing a callback from parent widget to child widget to update state of parent widget from child widget
Best Solution: use the package stream_mixin
As of Feb '23
class Counter with StreamMixin<int> { // CODE TO NOTICE
Counter._();
static Counter instance = Counter._();
increment() {
update((lastUpdate ?? 0) + 1);
}
decrement() {
update((lastUpdate ?? 0) - 1);
}
}
class MyHomePage extends StatelessWidget {
const MyHomePage({super.key});
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('SO Help'),
),
body: Column(
children: <Widget>[
StreamBuilder<int>( // CODE TO NOTICE
initialData: 0,
stream: Counter.instance.onChange,
builder: (context, snapshot) {
return Text(snapshot.data.toString());
},
),
GridView.count(
crossAxisCount: 2,
shrinkWrap: true,
scrollDirection: Axis.vertical,
children: <Widget>[
InkResponse(
onTap: Counter.instance.increment, // CODE TO NOTICE
child: const Text("+"),
),
const Sub(),
],
),
],
),
);
}
}
class Sub extends StatelessWidget {
const Sub({super.key});
#override
Widget build(BuildContext context) {
return InkResponse(
onTap: Counter.instance.decrement, // CODE TO NOTICE
child: const Text("-"),
);
}
}
Observe that:
I'm using StatelessWidget, which will increase the performance. (You may choose to use StatefulWidget depending on your requirements
Instead of StatefulWidget I'm using StreamBuilder, which will update only the Text widget inside the SteamBuilder. Unlike setState() updates the whole app
The logic is separated from UI

Answer 4

I would like to extend Mohamed Elrashid answer, in case you require to pass a variable from the child widget to the parent widget
On child widget:
class ChildWidget extends StatefulWidget {
final Function() notifyParent;
ChildWidget({Key key, #required this.notifyParent}) : super(key: key);
}
On parent widget
void refresh(dynamic childValue) {
setState(() {
_parentVariable = childValue;
});
}
On parent widget: pass the function above to the child widget
new ChildWidget( notifyParent: refresh );
On child widget: call the parent function with any variable from the the child widget
widget.notifyParent(childVariable);

Answer 5

Old one but I would add my answer as per my findings:
var ancestralState = context.findAncestorStateOfType<ParentState>();
ancestralState.setState(() {
// here you can access public vars and update state.
...
});

Answer 6

class HomePage extends StatefulWidget {
#override
HomePageState createState() => HomePageState();
}
class HomePageState extends State<HomePage> {
int selectedIndex = 0;
void setSelectedIndex(int index){
setState(() {
selectedIndex = index;
});
}
}
class TestPage extends StatefulWidget {
#override
TestPageState createState() => TestPageState();
}
class TestPageState extends State<TestPage> {
int selectedIndex = 0;
#override
Widget build(BuildContext context) {
return GestureDetector(
onTap: (){
final HomePageState state = context.findAncestorStateOfType<HomePageState>();
state.setSelectedIndex(4);
},
child: Container(
width: 100,
height: 100,
color: Colors.green
)
);
}
}

Answer 7

Although most of these previous answers will work, I suggest you explore the provider or BloC architectures, both of which have been recommended by Google.
In short, the latter will create a stream that reports to widgets in the widget tree whenever a change in the state happens and it updates all relevant views regardless of where it is updated from.
Here is a good overview you can read to learn more about the subject: https://bloclibrary.dev/#/

Answer 8

Here is the solution which worked for me.
OUTPUT:
State of Cart Widget is updated, upon addition of items.
Create a globalKey for the widget you want to update by calling the trigger from anywhere
final GlobalKey<CartWidgetState> cartKey = GlobalKey();
Make sure it's saved in a file have global access such that, it can be accessed from anywhere.
I save it in globalClass where is save commonly used variables through the app's state.
class CartWidget extends StatefulWidget {
CartWidget({Key key}) : super(key: key);
#override
CartWidgetState createState() => CartWidgetState();
}
class CartWidgetState extends State<CartWidget> {
#override
Widget build(BuildContext context) {
//return your widget
return Container();
}
}
Call your widget from some other class.
class HomeScreen extends StatefulWidget {
HomeScreen ({Key key}) : super(key: key);
#override
HomeScreenState createState() => HomeScreen State();
}
class HomeScreen State extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
return ListView(
children:[
ChildScreen(),
CartWidget(key:cartKey)
]
);
}
}
class ChildScreen extends StatefulWidget {
ChildScreen ({Key key}) : super(key: key);
#override
ChildScreenState createState() => ChildScreen State();
}
class ChildScreen State extends State<ChildScreen> {
#override
Widget build(BuildContext context) {
return InkWell(
onTap: (){
// This will update the state of your inherited widget/ class
if (cartKey.currentState != null)
cartKey.currentState.setState(() {});
},
child: Text("Update The State of external Widget"),
);
}
}

Answer 9

For those who are wanting to pass a variable back and forth between child and parent without the use of third-party libraries, here is an example I wrote with two counter buttons. Granted, I don't know if this is best practice, but I wanted to provide the simplest answer I could create:
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: ParentWid(),
),
),
);
}
}
class ParentWid extends StatefulWidget {
#override
State<ParentWid> createState() => _ParentWidState();
}
class _ParentWidState extends State<ParentWid> {
int counter = 0;
void refresh(int childValue) {
setState(() {
counter = childValue;
});
}
#override
Widget build(BuildContext context) {
return Column(children:[
IconButton(
onPressed: () {
setState(() {
counter++;
});
},
icon: const Icon(Icons.add),
),
ChildWid(counter, refresh)
]);
}
}
class ChildWid extends StatefulWidget {
final Function(int) notifyParent;
final int? counter;
const ChildWid(this.counter, this.notifyParent);
#override
State<ChildWid> createState() => _ChildWidState();
}
class _ChildWidState extends State<ChildWid> {
#override
Widget build(BuildContext context) {
return Column(children:[
Text(
'Current Counter ${widget.counter ?? 0}',
style: Theme.of(context).textTheme.headline4,
),
IconButton(
onPressed: () {
int counterHolder = widget.counter ?? 0;
counterHolder++;
widget.notifyParent(counterHolder);
},
icon: const Icon(Icons.add),
),
]);
}
}

Answer 10

This is a little unorthodox, but it works: you keep state references of unrelated widgets in a common object and call them accordingly:
class Fuzz {
State<A>? a;
State<B>? b;
int c = 0;
}
class A extends StatefulWidget {
A(this.fuzz, {Key? key}) : super(key: key);
Fuzz fuzz;
#override
State<A> createState() => _AState();
}
class _AState extends State<A> {
#override
void initState() {
super.initState();
widget.fuzz.a = this;
}
#override
Widget build(BuildContext context) {
return Center(
child: TextButton(
child: Text("More fuzz (${widget.fuzz.c})"),
onPressed: () {
widget.fuzz.b?.setState(() {
widget.fuzz.c++;
});
},
));
}
}
class B extends StatefulWidget {
B(this.fuzz, {Key? key}) : super(key: key);
Fuzz fuzz;
#override
State<B> createState() => _BState();
}
class _BState extends State<B> {
#override
void initState() {
super.initState();
widget.fuzz.b = this;
}
#override
Widget build(BuildContext context) {
return Center(
child: TextButton(
child: Text("Less fuzz (${widget.fuzz.c})"),
onPressed: () {
widget.fuzz.a?.setState(() {
widget.fuzz.c--;
});
},
));
}
}
class TestView extends StatelessWidget {
TestView({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
var fuzz = Fuzz();
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: Row(
children: [Expanded(child: A(fuzz)), Expanded(child: B(fuzz))],
)));
}
}
Result: