Flutter Question posted in
The official Flutter documentation can be found here.

Showing different page based on provider value in Flutter

This is my UserAuthProvider:

class UserAuthProvider extends ChangeNotifier {
  bool _isSignedIn = false;
  bool get isSignedIn => _isSignedIn;

  void userSignedIn() {
    _isSignedIn = true;
    notifyListeners();
  }

  void userSignedOut() {
    _isSignedIn = false;
    notifyListeners();
  }
}

I want to show HomePage when _isSignedIn is true, and I want to show SignInPage when _isSignedIn is false. User can sign in and sign out in both pages, so I want to show two pages continuously based on provider value change.

So I created MainPage. Here is my MainPage code:

class MainPage extends StatefulWidget {
  const MainPage({super.key});

  @override
  State<MainPage> createState() => _MainScreenState();
}

class _MainScreenState extends State<MainPage> {
  Map pages = {
    true: HomePage(), false: LoginPage()
  }
  
  @override
  Widget build(BuildContext context) {
    return Consumer<UserAuthProvider>(builder: (context, provider, _){
      return pages[provider.isSignedIn];
    });
  }
}

However, this code does not work properly. When I run the app first time, it shows LoginPage because initial value of _isSignedIn is false. But when I change _isSignedIn value using context.read<UserAuthProvider>().userSignedIn(); inside LoginPage, the page does not change.

How to fix this problem? Or can you suggest me better approach on showing different page based on provider value?

Tags:

2

Answers


  1. 0

    You might forget use ChangeNotifierProvider I guess

        return ChangeNotifierProvider<UserAuthProvider>(
      create: (_) => UserAuthProvider(),
      child: Consumer<UserAuthProvider>(builder: (context, provider, _){
        return pages[provider.isSignedIn];
      }),
    );
    Login or Signup to reply.
  2. 0 
        - when i test this code i can not face any issues, screen are navigated properly.
    - note: "may be your ChangeNotifierProvider wrapping issues, in my advised you can wrap ChangeNotifierProvider on materialApp because you can access every variable and every method define in userAuthProvider to your entire app"
    - you can use isSignedIn variable in both screen to change there value and userSignedIn() & userSignedOut() 
    - below code for better understanding.
    
    main.dart
     return ChangeNotifierProvider(
      create: (BuildContext context) => MainPageProvider(),
      child: MaterialApp(
        title: 'Flutter Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: const MainPage(),
      ),
    );
    
    main_page.dart
       Map pages = {
        true: Home(), false: Login()
      };
    
      @override
       Widget build(BuildContext context) {
        return Consumer<MainPageProvider>(builder: (context, provider, _){
         return pages[provider.isSignedIn];
       });
     }

    main_page.provider
     class MainPageProvider extends ChangeNotifier {
      bool _isSignedIn = false;
      bool get isSignedIn => _isSignedIn;

     void userSignedIn() {
      _isSignedIn = true;
      notifyListeners();
    }

    void userSignedOut() {
      _isSignedIn = false;
      notifyListeners();
   }
 }

 login.dart
   ElevatedButton(
                onPressed: (){
                  provider.userSignedIn();
                  if(provider.isSignedIn){
                    Navigator.push(context, MaterialPageRoute(builder: (context) => const Home()));
                  }
                },
                child: const Text("Login"),
              ),

 home.dart
   ElevatedButton(
              onPressed: (){
                provider.userSignedOut();
                if(!provider.isSignedIn){
                  Navigator.pop(context);
                }
              },
              child: const Text("LogOut"),
            ),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search