Provider not updating values in navigated screen

Question

I have two screens:

screen A: there is a button, when user clicks on the button, the method addLogFolder is called and notifies all listeners with the new value. Then it navigates to screen B.
screen B: this screen has a container which is listening to changes in the model and it should change color to red after the button click in screen A.

What is happening:

the button changes the values in the model ✓ (I've debugged it and I've seen the values change by the model)
navigation from screen A to screen B without errors ✓
screen B's UI is updated because values in model are changed ✗

Screen B just remains the same. And when I debugged, I saw that it didn't even get notified with the new values, so it keeps using the old values. Why is that happening?

Here's the code:

build widget of Screen A:

return Scaffold(
body: Container(
child: lightTurquoiseElevatedButton(
                   'Proceed', () {
                    Provider.of<LogFoldersModel>(context, listen: false).changeColor();

                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) =>
                            MyHomePage.customConstructor(1), //go to log list
                      ),
                    );
                  }),
),);

build widget of Screen B:

return ChangeNotifierProvider(
    create: (context) => LogFoldersModel(),
    child: Scaffold(
      body: Consumer<LogFoldersModel>(
                    builder: (_, logfolder, __) {
                      return Container(
                        height: 47,
                        width: 276,
                        color: logfolder.color, //color should change here
                        child: Text(
                            'Box that has to change color',
                            textAlign: TextAlign.center,
                            style: TextStyle(
                                color: Colors.white,
                                fontSize: 13,
                                fontWeight: FontWeight.w200)),
                      );
                    },
                  ),
    ),
);

changeColor method in LogFoldersModel()

class LogFoldersModel extends ChangeNotifier {
  Color color = new Color(0xff707070);

  changeColor() {
    color = Color(0xff664411);
    notifyListeners();
  }
}

Note: it was working fine when the button was in Screen B, but now that I want to update values in another screen THEN navigate to screen B, it won't work. So I thought the problem might be something I'm doing wrong in navigation ..?

score 1 · Accepted Answer · answered Apr 17 '21 at 21:07

I believe your ChangeNotifierProvider should wrap your MaterialApp widget in main.dart and should not wrap anything in Screen B.

This will make sure all your routes/pages have access to the Provider and the state objects / values it is holding.

I explain Provider scope in depth in this answer.

If you have a ChangeNotifierProvider wrapping both MaterialApp and Screen B, then the one in Screen B is shadowing the Provider from MaterialApp when inside Screen B. Hence, you won't be sharing state from Screen A → Screen B. Screen B is in its own Provider scope.

Provider not updating values in navigated screen

1 Answers1