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 widget I'm changing global state (some user preferences). When I get back from second widget to first, using Navigator.pop() the first widget is in old state, but I want to force it's reload. Any idea how to do this? I have one idea but it looks ugly:

1. pop to remove second widget (current one)
2. pop again to remove first widget (previous one)
3. push first widget (it should force redraw)

Answer 1

There's a couple of things you could do here. @Mahi's answer while correct could be a little more succinct and actually use push rather than showDialog as the OP was asking about. This is an example that uses Navigator.push:

import 'package:flutter/material.dart';

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: Column(
        children: <Widget>[
          RaisedButton(
            onPressed: () => Navigator.pop(context),
            child: Text('back'),
          ),
        ],
      ),
    );
  }
}

class FirstPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => new FirstPageState();
}

class FirstPageState extends State<FirstPage> {

  Color color = Colors.white;

  @override
  Widget build(BuildContext context) {
    return new Container(
      color: color,
      child: Column(
        children: <Widget>[
          RaisedButton(
            child: Text("next"),
            onPressed: () async {
              final value = await Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => SecondPage()),
                ),
              );
              setState(() {
                color = color == Colors.white ? Colors.grey : Colors.white;
              });
            },
          ),
        ],
      ),
    );
  }
}

void main() => runApp(
      MaterialApp(
        builder: (context, child) => SafeArea(child: child),
        home: FirstPage(),
      ),
    );

However, there's another way to do this that might fit your use-case well. If you're using the global as something that affects the build of your first page, you could use an InheritedWidget to define your global user preferences, and each time they are changed your FirstPage will rebuild. This even works within a stateless widget as shown below (but should work in a stateful widget as well).

An example of inheritedWidget in flutter is the app's Theme, although they define it within a widget instead of having it directly building as I have here.

import 'package:flutter/material.dart';
import 'package:meta/meta.dart';

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.green,
      child: Column(
        children: <Widget>[
          RaisedButton(
            onPressed: () {
              ColorDefinition.of(context).toggleColor();
              Navigator.pop(context);
            },
            child: new Text("back"),
          ),
        ],
      ),
    );
  }
}

class ColorDefinition extends InheritedWidget {
  ColorDefinition({
    Key key,
    @required Widget child,
  }): super(key: key, child: child);

  Color color = Colors.white;

  static ColorDefinition of(BuildContext context) {
    return context.inheritFromWidgetOfExactType(ColorDefinition);
  }

  void toggleColor() {
    color = color == Colors.white ? Colors.grey : Colors.white;
    print("color set to $color");
  }

  @override
  bool updateShouldNotify(ColorDefinition oldWidget) =>
      color != oldWidget.color;
}

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var color = ColorDefinition.of(context).color;

    return new Container(
      color: color,
      child: new Column(
        children: <Widget>[
          new RaisedButton(
              child: new Text("next"),
              onPressed: () {
                Navigator.push(
                  context,
                  new MaterialPageRoute(builder: (context) => new SecondPage()),
                );
              }),
        ],
      ),
    );
  }
}

void main() => runApp(
      new MaterialApp(
        builder: (context, child) => new SafeArea(
              child: new ColorDefinition(child: child),
            ),
        home: new FirstPage(),
      ),
    );

If you use inherited widget you don't have to worry about watching for the pop of the page you pushed, which will work for basic use-cases but may end up having problems in a more complex scenario.

Answer 2

Short answer:

Use this in 1st page:

Navigator.pushNamed(context, '/page2').then((_) => setState(() {}));

and this in 2nd page:

Navigator.pop(context);

---

There are 2 things, passing data from

• 1st Page to 2nd

  Use this in 1st page

    // sending "Foo" from 1st
    Navigator.push(context, MaterialPageRoute(builder: (_) => Page2("Foo")));
  

  Use this in 2nd page.

    class Page2 extends StatelessWidget {
      final String string;
  
      Page2(this.string); // receiving "Foo" in 2nd
  
      ...
    }
  

---

• 2nd Page to 1st

  Use this in 2nd page

    // sending "Bar" from 2nd
    Navigator.pop(context, "Bar");
  

  Use this in 1st page, it is the same which was used earlier but with little modification.

    // receiving "Bar" in 1st
    String received = await Navigator.push(context, MaterialPageRoute(builder: (_) => Page2("Foo")));
  

Answer 3

For me this seems to work:

Navigator.of(context).pushNamed("/myRoute").then((value) => setState(() {}));

Then simply call Navigator.pop() in the child.

Answer 4

The Easy Trick is to use the Navigator.pushReplacement method

Page 1

Navigator.pushReplacement(
  context,
  MaterialPageRoute(
    builder: (context) => Page2(),
  ),
);

Page 2

Navigator.pushReplacement(
  context,
  MaterialPageRoute(
    builder: (context) => Page1(),
  ),
);

Answer 5

Simply add .then((value) { setState(() {}); after Navigator.push on page1() just like below:

Navigator.push(context,MaterialPageRoute(builder: (context) => Page2())).then((value) { setState(() {});

Now when you use Navigator.pop(context) from page2 your page1 rebuild itself

Answer 6

onTapFunction(BuildContext context) async {
    final reLoadPage = await Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => IdDetailsScreen()),
    );

    if (reLoadPage) {
        setState(() {});
    }
}

Now while doing Navigator.pop from second page to come back to first page just return some value which in my case is of bool type

onTap: () {
    Navigator.pop(context, true);
}

Answer 7

You can use pushReplacement and specify the new Route

Answer 8

my solution went by adding a function parameter on SecondPage, then received the reloading function which is being done from FirstPage, then executed the function before the Navigator.pop(context) line.

FirstPage

refresh() {
setState(() {
//all the reload processes
});
}

then on pushing to the next page...

Navigator.push(context, new MaterialPageRoute(builder: (context) => new SecondPage(refresh)),);

SecondPage

final Function refresh;
SecondPage(this.refresh); //constructor

then on before the navigator pop line,

widget.refresh(); // just refresh() if its statelesswidget
Navigator.pop(context);

Everything that needs to be reloaded from the previous page should be updated after the pop.

Answer 9

This work really good, i got from this doc from flutter page: flutter doc

I defined the method to control navigation from first page.

_navigateAndDisplaySelection(BuildContext context) async {
    final result = await Navigator.push(
      context,
      MaterialPageRoute(builder: (context) => AddDirectionPage()),
    );

    //below you can get your result and update the view with setState
    //changing the value if you want, i just wanted know if i have to  
    //update, and if is true, reload state

    if (result) {
      setState(() {});
    }
  }

So, i call it in a action method from a inkwell, but can be called also from a button:

onTap: () {
   _navigateAndDisplaySelection(context);
},

And finally in the second page, to return something (i returned a bool, you can return whatever you want):

onTap: () {
  Navigator.pop(context, true);
}

Answer 10

I had a similar issue.

Please try this out:

In the First Page:

Navigator.push( context, MaterialPageRoute( builder: (context) => SecondPage()), ).then((value) => setState(() {}));

After you pop back from SecondPage() to FirstPage() the "then" statement will run and refresh the page.

Answer 11

Put this where you're pushing to second screen (inside an async function)

Function f;
f= await Navigator.pushNamed(context, 'ScreenName');
f();

Put this where you are popping

Navigator.pop(context, () {
 setState(() {});
});

The setState is called inside the pop closure to update the data.

Answer 12

You can pass back a dynamic result when you are popping the context and then call the setState((){}) when the value is true otherwise just leave the state as it is.

I have pasted some code snippets for your reference.

handleClear() async {
    try {
      var delete = await deleteLoanWarning(
        context,
        'Clear Notifications?',
        'Are you sure you want to clear notifications. This action cannot be undone',
      );
      if (delete.toString() == 'true') {
        //call setState here to rebuild your state.

      }
    } catch (error) {
      print('error clearing notifications' + error.toString());
             }
  }



Future<bool> deleteLoanWarning(BuildContext context, String title, String msg) async {

  return await showDialog<bool>(
        context: context,
        child: new AlertDialog(
          title: new Text(
            title,
            style: new TextStyle(fontWeight: fontWeight, color: CustomColors.continueButton),
            textAlign: TextAlign.center,
          ),
          content: new Text(
            msg,
            textAlign: TextAlign.justify,
          ),
          actions: <Widget>[
            new Container(
              decoration: boxDecoration(),
              child: new MaterialButton(
                child: new Text('NO',),
                onPressed: () {
                  Navigator.of(context).pop(false);
                },
              ),
            ),
            new Container(
              decoration: boxDecoration(),
              child: new MaterialButton(
                child: new Text('YES', ),
                onPressed: () {
                  Navigator.of(context).pop(true);
                },
              ),
            ),
          ],
        ),
      ) ??
      false;
}

Regards, Mahi

Answer 13

Needed to force rebuild of one of my stateless widgets. Did't want to use stateful. Came up with this solution:

await Navigator.of(context).pushNamed(...);
ModalRoute.of(enclosingWidgetContext);

Note that context and enclosingWidgetContext could be the same or different contexts. If, for example, you push from inside StreamBuilder, they would be different.

We don't do anything here with ModalRoute. The act of subscribing alone is enough to force rebuild.

Answer 14

If you are using an alert dialog then you can use a Future that completes when the dialog is dismissed. After the completion of the future you can force widget to reload the state.

First page

onPressed: () async {
    await showDialog(
       context: context,
       builder: (BuildContext context) {
            return AlertDialog(
                 ....
            );
       }
    );
    setState(() {});
}

In Alert dialog

Navigator.of(context).pop();

Answer 15

In flutter 2.5.2 this is worked for me also it works for updating a list

Navigator.push(
        context,
        MaterialPageRoute(
            builder: (context) => SecondPage()))
    .then((value) => setState(() {}));

then in the second page I just code this

Navigator.pop(context);

I have a ListView in fist page which is display a list[] data, the second page was updating the data for my list[] so the above code works for me.

Answer 16

This simple code worked for me to go to the root and reload the state:

    ...
    onPressed: () {
         Navigator.of(context).pushNamedAndRemoveUntil('/', ModalRoute.withName('/'));
                },
    ...

Answer 17

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<DataState, bool>(

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

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

          return Container(

              child: Consumer<DataState>(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<DataState>(context, listen: false).loadData();

Answer 18

For me worked:

...
onPressed: (){pushUpdate('/somePageName');}
...

pushUpdate (string pageName) async {      //in the same class
  await pushPage(context, pageName);
  setState(() {});
}


//---------------------------------------------
//general sub
pushPage (context, namePage) async {
  await Navigator.pushNamed(context, namePage);
}

In this case doesn't matter how you pop (with button in UI or "back" in android) the update will be done.

Answer 19

Very simply use "then" after you push, when navigator pops back it will fire setState and the view will refresh.

Navigator.push(blabla...).then((value) => setState(() {}))

Answer 20

// Push to second screen
 await Navigator.push(
   context,
   CupertinoPageRoute(
    builder: (context) => SecondScreen(),
   ),
 );

// Call build method to update any changes
setState(() {});

Answer 21

Use setstate in your navigation push code.

Navigator.push(context, MaterialPageRoute(builder: (context) => YourPage())).then((value) {
  setState(() {
    // refresh state
  });
});

Answer 22

This simple code goes to the root and reloads the state even without setState:

Navigator.pushAndRemoveUntil(context, MaterialPageRoute(builder: (context) => MainPage()),  (Route<dynamic> route) => false,);   //// this MainPage is your page to refresh

Answer 23

Another stupid but effective solution would be to create inside the first widget of a widget tree a function that all it does is call the setState() method:

class _FirstWidgetState extends State<FirstWidget> { 

    reBuild() {
      setState(() {});
    }
    
    @override
    Widget build(BuildContext context) {
      ...
    }
}

Pass it down to as many widgets as you want:

@override
Widget build(BuildContext context) {
  return SecondWidget(
   reBuild,
  );
}

Store it as a final variable of type Function:

class SecondWidget extends StatelessWidget {
  final Function buildFunction;

  const SecondWidget(this.buildFunction, {super.key});

  @override
  Widget build(BuildContext context) {
    ...
  }
}

And then, once you're done, you call the function so that it will rebuild the initial widget:

await Navigator.of(context).pushNamed(
        ThirdWidget.routeName,
      ).then((value) => buildFunction());

This helped me in a more complex situation compared to then ones I saw in other answers, so I hope this will be helpful to someone :)

Answer 24

To avoid too much flickering and prevent messing up with the routes, it can be chosen to just rebuild the current context. However this does neither do popping nor pushing, it is a refresh of the current context only - and it might not be sufficient in regards to the topic of this thread.

  void refresh() {
    if (mounted) {
      Navigator.of(context).build(context);
    }
  }

The guard for mounted is included in case any async calls are made to make sure that the context is mounted and ready prior to the refresh.