Navigation in flutter with go router and riverpod

Question

There a App Landing screen which contains the two buttons SignIn and Signup. If I click on SignIn and there is another button take customer to Signup.

AppLanding Screen > Signin Screen > SignUp Screen

On Signup screen we fill the form and create an account. Once the account is created it should be redirect to OTP verification screen. But it is not redirecting.

Router configuration code is like this

final _key = GlobalKey<NavigatorState>();

final goRouterProvider = Provider<GoRouter>((ref) {
final authState = ref.watch(userAuthProvider);
return GoRouter(
    navigatorKey: _key,
    onException: (context, state, router) {
},

/// Forwards diagnostic messages to the dart:developer log() API.
debugLogDiagnostics: true,


/// The listeners are typically used to notify clients that the object has been
/// updated.
// refreshListenable: authState,

redirect: (BuildContext context, GoRouterState state) {`
    if (authState.isLogedIn) {
        return '/otp-verify';
    } else {
        return '/authlanding';
    }
},
routes: [
    GoRoute(
    path: '/',
    pageBuilder: (context, state) =>
        const MaterialPage(child: ConnectivityScreen()),
  ),
  GoRoute(
    path: '/authlanding',
    name: 'AuthLanding',
    pageBuilder: (context, state) =>
        const MaterialPage(child: AuthLandingScreen()),
  ),
  GoRoute(
    path: '/login',
    name: 'Login',
    pageBuilder: (context, state) =>
        const MaterialPage(child: LoginScreen()),
  ),
  GoRoute(
    path: '/register',
    name: 'CreateAccount',
    pageBuilder: (context, state) =>
        const MaterialPage(child: RegisterScreen()),
  ),
  GoRoute(
    path: '/otp-verify',
    name: 'OTPVerify',
    pageBuilder: (context, state) =>
        const MaterialPage(child: OtpVerifyScreen()),
  ),
]
);
});

I followed two articles for this: https://codewithandrea.com/articles/flutter-navigate-without-context-gorouter-riverpod/ https://medium.com/@madhanrkv10/authentication-using-gorouter-with-riverpod-state-management-bac9313f2afe

Answer 1

You can declare subroutes like that:

GoRoute(
      path: '/authlanding',
      name: 'AuthLanding',
      pageBuilder: (context, state) =>
          const MaterialPage(child: AuthLandingScreen()),
      routes: [
        loginRoute(),
        registerRoute(),
        otpRoute(),
      ],
    ),

the path for subroutes should not contain / at the beginning

GoRoute loginRoute() => GoRoute(
      path: 'login',
      name: 'Login',
      pageBuilder: (context, state) => const MaterialPage(child: LoginScreen()),
    );

GoRoute registerRoute() => GoRoute(
      path: 'register',
      name: 'CreateAccount',
      pageBuilder: (context, state) =>
          const MaterialPage(child: RegisterScreen()),
    );

GoRoute otpRoute() => GoRoute(
      path: 'otp-verify',
      name: 'OTPVerify',
      pageBuilder: (context, state) =>
          const MaterialPage(child: OtpVerifyScreen()),
    );

then when you will call GoRouter.of(context).pushNamed("routeName"); it should be able to navigate to the route you have declared from the root path