Flutter provider state not updating in consumer widget

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