Provider Not Displaying Updated State In Another Screen But Only The First Where The Modal Class And Change Notifier Is

so im using provider and change notifier, the problem is when i change the state and notifiy listeners in the same file the user interface is updated, but when i try to access the

Solution 1:

Here is how I usually use the Provider to share data from one widget all the way down in the widget tree to some other widget in a whole other region of the widget tree.

For example:

Define your provider class that extends ChangeNotifier

import 'package:flutter/material.dart';
import 'package:app/utils/AppUser.dart';

class UserProvider extends ChangeNotifier {
  /// You can either set an initial value here or use a UserProvider object 
  /// and call the setter to give it an initial value somewhere in your app, like in main.dart

  AppUser _user; /// or AppUser _user = AppUser("firstName", "lastName");

  AppUser get user => _user;

  set user(AppUser newUser) {
    _user = newUser;

    /// MAKE SURE YOU NOTIFY LISTENERS IN YOUR SETTER
    notifyListeners();
  }

}

Wrap your app with a Provider Widget like so

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


void main() {
  runApp(
    MaterialApp(
      initialRoute: '/root',
      routes: {
        '/root': (context) => MyApp(),
      },
      title: "Your App Title",
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
/// Multiprovider allows you to have more than one provider, which is great for more 
/// complex apps where you might need to share data about something else than just the user
    return MultiProvider(
      providers: [
        /// THIS WILL MAKE SURE ALL WIDGETS IN YOUR APP, THAT LISTEN TO THE PROVIDER CHANGES,
        /// WILL BE NOTIFIED AND THE SHARED DATA WILL BE PROVIDED TO THEM
        ChangeNotifierProvider<UserProvider>.value(value: UserProvider()),
      ],
      child: MaterialApp(
        home: Wrapper(),
      ),
    );
  }
}

Access and data anywhere in the app

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
/// MAKE SURE TO IMPORT THE UserProvider.dart file
import 'package:app/services/UserProvider.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  UserProvider userProvider;

  @override
  Widget build(BuildContext context) {
    /// LISTEN TO THE CHANGES / UPDATES IN THE PROVIDER
    userProvider = Provider.of<UserProvider>(context);

    return Scaffold(
      body: SafeArea(
        child: Center(
          child: Text(
            /// THIS IS HOW YOU GET THE UPDATED DATA FROM THE PROVIDER
            userProvider.user.firstName,
          ),
        ),
      ),
    );
  }
}

Update data anywhere in the app

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
/// MAKE SURE TO IMPORT THE UserProvider.dart file
import 'package:app/services/UserProvider.dart';

class AnotherScreen extends StatefulWidget {
  @override
  _AnotherScreenState createState() => _AnotherScreenState();
}

class _AnotherScreenState extends State<AnotherScreen> {
  UserProvider userProvider;

  @override
  Widget build(BuildContext context) {
    /// LISTEN TO THE CHANGES / UPDATES IN THE PROVIDER
    userProvider = Provider.of<UserProvider>(context);

    return Scaffold(
      body: SafeArea(
        child: Center(
          child: RaisedButton(

            /// THIS IS HOW YOU UPDATE THE DATA IN THE PROVIDER
            onPressed: () {
              userProvider.user = AppUser("new", "user");
              setState(() {});
            },
            child: Text("Update user"),
          ),
        ),
      ),
    );
  }
}

Hope this helps and solves your problem.