how to navigate to a stateful route using go router package in flutter

Question

given a statefulshell route with shellroutebranches /leagues, /matches, /favorites. i wanted to add anothe rstatefullshell route inside the /leagues route with a shellroute branch of /details:tournamentId. here is the code:

@riverpod
GoRouter goRouter(GoRouterRef ref) {
  return GoRouter(
   
      initialLocation: '/matches',
  
      routes: [
        StatefulShellRoute.indexedStack(
            builder: (context, state, navigationShell) {
            return ScaffoldWithNestedNavigation(
                  navigationShell: navigationShell);

            },
            branches: [
              StatefulShellBranch(routes: [
                GoRoute(
                  path: '/leagues',
                  pageBuilder: (context, state) =>
                      NoTransitionPage(child: LeaguesScreen()),
                  routes: leagueRoutes(),
                ),
              ]),
              StatefulShellBranch(routes: [
                GoRoute(
                    path: '/matches',
                    pageBuilder: (context, state) =>
                        const NoTransitionPage(child: TodaysMatchScreen()),
                    routes: [
                      GoRoute(
                        path: "live",
                        pageBuilder: (context, state) =>
                            const NoTransitionPage(child: LiveScreen()),
                      )
                    ]),
              ]),
              StatefulShellBranch(routes: [
                GoRoute(
                  path: '/favorites',
                  pageBuilder: (context, state) =>
                      const NoTransitionPage(child: FavoritesMatchScreen()),
                ),
              ])
            ]),
      ]);
}

below is the defination of the leagueroutes() function:

List<RouteBase> leagueRoutes() {

  return [
    StatefulShellRoute.indexedStack(
        
        builder: (context, state, navigationShell) {
          return LeagueScaffoldNestedNavigation(
              navigationShell: navigationShell,
              tournamentId: state.pathParameters['tournamentId']!);
        },
        branches: [
         
          StatefulShellBranch(routes: [
            GoRoute(
          
                name: 'details',
                path: 'details/:tournamentId',
                pageBuilder: (context, state) {
                  return NoTransitionPage(
                      child: MatchesScreen(
                          tournamentId: state.pathParameters['tournamentId']!));
                })
          ]),
        ])
  ];
}

i was expecting to navigate to matches screen with new navbar(LeagueScaffoldNavigation) when i pressed a certain button inside leagues screen, but i got error. the error is gone when i return a GoRoute object from leagueRoutes method, but i want to return a statefulshell route. could you help me with this problem please?

summary:

when the app is launched appbar1 is shown containing 3 navigation links(/leagues, /matches, /favorites) when i click a button inside /leagues route i want to navigate to /leagues/details/:tournamentId although this route is a child of /leagues , i want it to have its own navbar

if the question is not clear ask me for details, i will be more than happy to explain it again. Thank you!!

how to navigate to a stateful route using go router package in flutter

0 Answers0