Flutter screen not changing after provider state changed

Question

I'm new in flutter and trying to understand flutter state management concept using provider. This the image scenario what I'm trying to do

I have created a file called auth_provider.dart file under the folder called Providers

class AuthProvider with ChangeNotifier{
    
    bool isLogin = false;

    Future createUser() async
    {
        isLogin = true; 
        notifyListeners();
    }

    Future login() async
    {
        isLogin = true; 
        notifyListeners();
    }

    void logout()
    {
        isLogin = false; 
        notifyListeners();
    }
}

This the Signup button that I have created in the login page

TextButton(
    onPressed: () {
        Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => const SignupPage()
            ),
        );
    },
    child: const Text(
        'Signup Button',
    ),
)

This is the signUp button in signup screen

child: ElevatedButton(
    onPressed: () => signUpSubmit(),
    child: const Text(
        'Sign Up',
    ),
),

I have written a signUpSubmit future like below

Future<void> signUpSubmit() async {
    Provider.of<AuthProvider>(context, listen: false).createUser();
}

I have used AuthProvider consumer in main.dart page

class MyApp extends StatelessWidget {
    const MyApp({Key? key}) : super(key: key);
    @override
    Widget build(BuildContext context) {
        return MultiProvider(
            providers: [
                ChangeNotifierProvider(
                    create: (context) => AuthProvider(),
                ),
            ],

            child: Consumer<AuthProvider>(
                builder: (ctx,auth,child){
                    print(auth.isLogin);
                    return MaterialApp(         
                        home: auth.isLogin ? const HomeScreen():const LoginPage(),
            
                        routes: {
                            HomeScreen.routeName: (ctx) => const HomeScreen(),
                            SignupPage.routeName: (ctx) => const SignupPage(),
                            LoginPage.routeName: (ctx) => const LoginPage(),
                        },
                    );
                }      
            ),
        );
    }
}

After click on signup button I'm getting true in main page , which I have given a print under Consumer builder in main.dart page. So according to MaterialApp widget home condition page should redirect to HomeScreen but it's not moving. Why it's not moving ? What is the main cause and what it the best way to solve this problem ?

Note : If I try it from login screen redirection is working fine. But according to my image flow (Login -> signup) it's not working.

Answer 1

here is the code you are looking for, but bear in mind with the implementation you have right now, if the user opens the app again, it will redirect them to the signin page. because the boolean value will disappear once the user closes the app.

change your main.dart file like the following..

main function

void main() {
// you just need to add the multiprovider and the change notifier provider class
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => AuthProvider()),
      ],
      child: const MyApp(),
    ),
  );
}

here is the MyApp class as i understand it.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {

    return Consumer<AuthProvider>(builder: (ctx, auth, child) {
      print(auth.isLogin);
      return MaterialApp(
        home: auth.isLogin ? MyHomePage() : LoginPage(),
        routes: {
          MyHomePage.routeName: (ctx) => MyHomePage(),
          LoginPage.routeName: (ctx) => LoginPage(),
          //NavScreen.routeName: (ctx) => const NavScreen(),
        },
      );
    });
  }
}

Change the signup button in the register page to the following.

ElevatedButton(
          onPressed: () {
            signUpSubmit(context);
            Navigator.of(context).pushNamed(HomeScreen.routeName);
          },

and the signupsubmit function like this..

signUpSubmit(BuildContext context) {
    Provider.of<AuthProvider>(context, listen: false).createUser();
}

Answer 2

The main cause of your problem is that you are pushing a new route (screen) from login page and the best way to solve problem is to pop that route (screen) from sigupPage.

On click of Signup button from login page you are pushing a new route, so in order to redirect to HomeScreen from SignupPage first you need to pop that route so that you can see the updated changes.

Future<void> signUpSubmit() async {
    Navigator.of(context).pop();
    Provider.of<AuthProvider>(context, listen: false).createUser();
  }

https://docs.flutter.dev/cookbook/navigation/navigation-basics