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

Question

1. For Example in the below code plus button works and able to update the text but the minus button does not.
2. But if we press FloatingActionButton then the State is refreshed .
3. 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

1. Defined in Child widget from Parent widget.
2. 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:

1. Solution 1: Create a global instance of _MyHomePageState. Use this instance in _SubState as _myHomePageState.setState
2. Solution 2: No need to create a global instance. Instead, just pass the parent instance to the child widget
3. 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:

1. I'm using StatelessWidget, which will increase the performance. (You may choose to use StatefulWidget depending on your requirements
2. Instead of StatefulWidget I'm using StreamBuilder, which will update only the Text widget inside the SteamBuilder. Unlike setState() updates the whole app
3. 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

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 8

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 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: