Flutter 提供者 state 未在消费者小部件中更新

Question

I'm trying to set state using provider across pages. but its not changing.

I have added the changeNotifierProvider in the main.dart main.dart

    class MyApp extends StatelessWidget {
      // This widget is the root of your application.
      @override
      Widget build(BuildContext context) {
        return MultiProvider(
          providers: [
            ChangeNotifierProvider(builder: (context) => GlobalState())
          ],
        child: MaterialApp(
            title: 'Flutter Demo',
            theme: ThemeData(
              primarySwatch: Colors.blue,
            ),
            routes: {
              '/': (context) => HomePage(),
              '/products': (context) => ProductsPage()
            }
          )
        );
      }
    }

I am trying to set and get a simple name string

globatState.dart

    class GlobalState extends ChangeNotifier{
      String _name = 'Hello';
      String get getName => _name;
      void setName(String value){
        _name = value;
        notifyListeners();
      }
    }

In the home page I am setting the state and can move to products page using navigator pushNamed route.

homepage.dart

    class HomePage extends StatelessWidget {
      @override
      Widget build(BuildContext context){
        GlobalState gs = GlobalState();
        return Scaffold(
          appBar: AppBar(title: Text('Home'),),
          body: Container(
            child: Column(children: <Widget>[
              RaisedButton(onPressed: ((){
                gs.setName('World');
                }),
                child: Text('Set data'),
              ),
              RaisedButton(
                onPressed: () => Navigator.pushNamed(context, '/products'),
                child: Text('Products'),
              ),
            ],)

          ),
        );
      }
    }

In the products Page I'm using consumer to get the state productsPage.dart

    class ProductsPage extends StatelessWidget{
      @override
      Widget build(BuildContext context){
        return Scaffold(appBar: AppBar(title: Text('Products'),
        ),
        body: Container(child:Column(children: <Widget>[
          Text('This is the productPage'),
          Container(
            child:Consumer<GlobalState>(
              builder: (context, gs, child){
                return Text('this is the data: ${gs.getName}');
              },
            )
          )
        ],))
        );
      }
    }

But in the products page I'm only getting the initial value of the state not the changed one. Am I missing something or I am navigating the wrong way?

Answer 1

GlobalState gs = GlobalState();

will create a new instance of your GlobalState class. Which is not registered as a provider.

Instead, use the instance provided by provider like this

GlobalState gs = Provider.of<GlobalState>(context, listen:false);
gs.setName('world');

Answer 2

Try using the equatable package on pub.dev, link below ->

https://pub.dev/packages/equatable

You can extend a class from Equatable and then inside the class you can override the getter props with all the properties/member variables of the class.

This happens because when your data gets updated from the data source (REST APIs) due to performance optimisation techniques that Flutter uses, it does not compare every property/member variable inside your class instance, it refers to the object's location in memory only. Using equatable you can essentially override the == operator and hashCode for every object of the class in memory and it will compare the old value for every defined property in the props getter variable to the new value and if any property does not match, then it will overwrite it and then your provider/consumer will update the UI and it will reflect the updated state.