Force Flutter navigator to reload state when popping

Question

I have one StatefulWidget in Flutter with button, which navigates me to another StatefulWidget using Navigator.push(). On second widge

Answer 1

In short, you should make the widget watch the state. You need state management for this.

My method is based on Provider explained in Flutter Architecture Samples as well as Flutter Docs. Please refer to them for more concise explanation but more or less the steps are :

• Define your state model with states that the widget needs to observe.

You could have multiple states say data and isLoading, to wait for some API process. The model itself extends ChangeNotifier.

• Wrap the widgets that depend on those states with watcher class.

This could be Consumer or Selector.

• When you need to "reload", you basically update those states and broadcast the changes.

For state model the class would look more or less as follows. Pay attention to notifyListeners which broadcasts the changes.

class DataState extends ChangeNotifier{

  bool isLoading;
  
  Data data;

  Future loadData(){
    isLoading = true;
    notifyListeners();

    service.get().then((newData){
      isLoading = false;
      data = newData;
      notifyListeners();
    });
  }
  
}

Now for the widget. This is going to be very much a skeleton code.

return ChangeNotifierProvider(

  create: (_) => DataState()..loadData(),
      
  child: ...{
    Selector(

        selector: (context, model) => model.isLoading,

        builder: (context, isLoading, _) {
          if (isLoading) {
            return ProgressBar;
          }

          return Container(

              child: Consumer(builder: (context, dataState, child) {

                 return WidgetData(...);

              }
          ));
        },
      ),
  }
);

Instance of the state model is provided by ChangeNotifierProvider. Selector and Consumer watch the states, each for isLoading and data respectively. There is not much difference between them but personally how you use them would depend on what their builders provide. Consumer provides access to the state model so calling loadData is simpler for any widgets directly underneath it.

If not then you can use Provider.of. If we'd like to refresh the page upon return from the second screen then we can do something like this:

await Navigator.push(context, 
  MaterialPageRoute(
    builder: (_) {
     return Screen2();
));

Provider.of(context, listen: false).loadData();