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.

is the consumer actively listening to the stream of data? I'd suggest using firebase auth for authentication, but it totally depends on your use case. — Delwinn, May 27 '22 at 19:49
There has no any API integration I have build, function will always return true if I call it from anywhere. — Abu Sayed, May 27 '22 at 19:56

Danny · Answer 1 · 2022-05-27T20:41:26.720

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();
}

Hi @Danny Provider registration part I already did in builder , I have updated my question. My only question is why it's not redirection after state made true ? — Abu Sayed, May 27 '22 at 20:25
it is redirecting for me.. i have tried it and it works.. have you set the MultiProvider class in the main function? — Danny, May 27 '22 at 20:26
If I try it in login page it's working fine , but if you create a button in login page to go signup page , then try it in signup page it will not work ! — Abu Sayed, May 27 '22 at 20:34
why I do I need to redirect user by enforced ? Why condition is not working in MaterialApp widget ? — Abu Sayed, May 27 '22 at 20:52

score 0 · Answer 2 · answered May 28 '22 at 09:15

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

Flutter screen not changing after provider state changed

2 Answers2