How to Navigate from Splash Screen to a StatefulShellRoute.indexedStack route of go_router Flutter

Question

I am developing a Mobile App where the App starts from a SplashScreen and Navigates go HomeScreen which is implemented under StatefulShellRoute.indexedStack that contains BottomNavigationBar and each screens of contains multiple routes.

When the splash screens completes its 3 second animation, I intend to make the app load the HomeScreen.

Here is the snippet from the splash_screen.dart

Timer(
      const Duration(seconds: 3),
      () {
        // TODO: How to navigate to StatefulShellRoute.indexedStack here instead of context.goNamed('home')
        isOnboardingCompleted ? isLoggedIn ? context.goNamed('home') 
                : context.goNamed('signin')
            : context.goNamed('onboarding');
      },
    );
  }

and snippet from gorouter.dart

late final router = GoRouter(
    refreshListenable: appStateProvider,
    initialLocation: '/splash-screen',
    navigatorKey: _rootNavigatorKey,
    routes: [
      /// splash
      GoRoute(
        path: '/splash-screen',
        name: 'splash',
        builder: (context, state) => const SplashScreen(),
      ),

      ///
      StatefulShellRoute.indexedStack(
        builder: (context, state, navigationShell) {
          return HomeScreen(navigationShell: navigationShell);
        },
        branches: [
          // first branch (Account)
          StatefulShellBranch(
            navigatorKey: _shellNavigatorAccountKey,
            routes: [
              GoRoute(
                path: '/account',
                name: 'account',
                pageBuilder: (context, state) {
                  return CustomTransitionPage(
                    child: const AccountScreen(),
                    transitionsBuilder:
                        (context, animation, secondaryAnimation, child) {
                      return FadeTransition(
                        opacity:
                            CurveTween(curve: Curves.linear).animate(animation),
                        child: child,
                      );
                    },
                  );
                },
                routes: [
                  GoRoute(
                    path: 'personal-info',
                    name: 'personalinfo',
                    pageBuilder: (context, state) {
                      return CustomTransitionPage(
                        child: const PersonalInfoScreen(),
                        transitionsBuilder:
                            (context, animation, secondaryAnimation, child) {
                          return FadeTransition(
                            opacity: CurveTween(curve: Curves.linear)
                                .animate(animation),
                            child: child,
                          );
                        },
                      );
                    },
                  )
                ],
              ),
            ],
          ),
        ],
      ),
    ],
    
.......  

Please, kindly help me how can I redirect to HomeScreen from SplashScreen

Answer 1

Using ShellRoute or StatefulShellRoute is for having an additional Navigator placed in the widget tree to be used instead of the root navigator. These shell-route widgets are NOT routes themselves, they are a wrapper around other routes to share a common internal navigator and UI elements. See more information and examples in the official docs.

The widget that is provided in the builder function of the StatefulShellRoute (HomeScreen in your example) is just a shell, i.e. a wrapper to show UI elements which are common to those routes. That widget is usually just a Scaffold with a bottom nav bar or any other common UI/UX elements.

In the shell-route the StatefulNavigationShell is passed to be able access the state of the shell, and to navigate to other branches in a "stateful way" (using goBranch())

Outside the "shellroute" you navigate to those routes as you would to any other route, using context.goNamed(nameOfTheRoute) or context.go(pathOfTheRoute). In your example you shall define somewhere those home, sigin and onboading routes.

For example, if you would like to have three routes "/a", "/b" and "/c", which are within a shell, and you would like to navigate to route "/a" by context.go("/a") in your timer, you shall implement the following:

StatefulShellRoute.indexedStack(
        builder: (BuildContext context, GoRouterState state,
            StatefulNavigationShell navigationShell) {
          return HomeScreen(navigationShell: navigationShell);
        },
        branches: <StatefulShellBranch>[
          // The route branch for the first tab of the bottom navigation bar.
          StatefulShellBranch(
            navigatorKey: _sectionANavigatorKey,
            routes: <RouteBase>[
              GoRoute(
                // The screen to display in the first tab of the
                // bottom navigation bar.
                path: '/a',
                builder: (BuildContext context, GoRouterState state) =>
                    const ScreenAShellBody(),
              ),
            ],
          ),

          // The route branch for the second tab of the bottom navigation bar.
          StatefulShellBranch(
            // It's not necessary to provide a navigatorKey if it isn't also
            // needed elsewhere. If not provided, a default key will be used.
            routes: <RouteBase>[
              GoRoute(
                // The screen to display as the shell body in the second tab of the bottom navigation bar.
                path: '/b',
                builder: (BuildContext context, GoRouterState state) =>
                    const ScreenBShellBody(),
              ),
            ],
          ),

          StatefulShellBranch(
            routes: <RouteBase>[
              GoRoute(
                // The screen to display as the shell body in the third tab of the
                // bottom navigation bar.
                path: '/c',
                builder: (BuildContext context, GoRouterState state) =>
                    const ScreenCShellBody(),
              ),
            ],
          ),
        ],
      )

Answer 2

@override
void initState() {
    super.initState();
    naivigate();
}
void naivigate() {
    Future.delayed(Duration(seconds: 3)).then((value) {
    isOnboardingCompleted
        ? isLoggedIn
            ? context.goNamed('home')
            : context.goNamed('signin')
        : context.goNamed('onboarding');
    });
  }

you can put the navigation logic in initState like above.