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

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     gt  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     gt  new  MyHomePageState       class  MyHomePageState extends State lt MyHomePage gt       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   lt Widget gt             new Text              number toString                style  textStyle                         new GridView count              crossAxisCount  2              shrinkWrap  true              scrollDirection  Axis vertical              children   lt Widget gt                 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     gt  new  SubState       class  SubState extends State lt Sub gt       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

User · Answer

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);

User · Answer

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 lt CartWidgetState gt  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     gt  CartWidgetState       class CartWidgetState extends State lt CartWidget gt       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     gt  HomeScreen State       class HomeScreen State extends State lt HomeScreen gt       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     gt  ChildScreen State       class ChildScreen State extends State lt ChildScreen gt       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  quot Update The State of external Widget quot

User · Answer

Old one but I would add my answer as per my findings   var ancestralState   context findAncestorStateOfType lt ParentState gt           ancestralState setState                 here you can access public vars and update state

User · Answer

OLD  Create a global instance of  MyHomePageState  Use this instance in  SubState as  myHomePageState setState  NEW  No need to create global instance  Instead just pass the parent instance to the child widget  CODE UPDATED AS PER FLUTTER 0 8 2   import  package flutter material dart    void main     gt  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                  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      override    MyHomePageState createState     gt   MyHomePageState       class  MyHomePageState extends State lt MyHomePage gt      int number   0      override   Widget build BuildContext context        return new Scaffold        appBar  new AppBar          title  new Text  SO Help                   body  new Column          children   lt Widget gt             new Text              number toString                style  textStyle                         new GridView count              crossAxisCount  2              shrinkWrap  true              scrollDirection  Axis vertical              children   lt Widget gt                 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 this                                                         floatingActionButton  new FloatingActionButton          onPressed                 setState                            child  new Icon Icons update                          class Sub extends StatelessWidget       MyHomePageState parent     Sub this parent       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               this parent setState                this parent number --                                      Just let me know if it works

User · Answer

This examples shows calling a method    Defined in Child widget from Parent widget   Defined in Parent widget from Child widget       class ParentPage extends StatefulWidget      override    ParentPageState createState     gt   ParentPageState       class  ParentPageState extends State lt ParentPage gt      final GlobalKey lt ChildPageState gt   key   GlobalKey        override   Widget build BuildContext context        return Scaffold        appBar  AppBar title  Text  Parent           body  Center          child  Column            children   lt Widget gt               Expanded                child  Container                  color  Colors grey                  width  double infinity                  alignment  Alignment center                  child  RaisedButton                    child  Text  Call method in child                      onPressed       gt   key currentState methodInChild       calls method in child                                                                Text  Above   Parent nBelow   Child                Expanded                child  ChildPage                  key   key                  function  methodInParent                                                                                 methodInParent     gt  Fluttertoast showToast msg   Method called in parent   gravity  ToastGravity CENTER      class ChildPage extends StatefulWidget     final Function function     ChildPage  Key key  this function     super key  key       override   ChildPageState createState     gt  ChildPageState       class ChildPageState extends State lt ChildPage gt       override   Widget build BuildContext context        return Container        color  Colors teal        width  double infinity        alignment  Alignment center        child  RaisedButton          child  Text  Call method in parent            onPressed       gt  widget function       calls method in parent                        methodInChild     gt  Fluttertoast showToast msg   Method called in child

User · Answer

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

User · Answer

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

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

Examples related to state

Examples related to flutter