[Flutter] go_router : StatefulShellRoute 사용시 쉘 외부로 페이지 이동방법(cover application shell)

홍석·2023년 9월 20일

GoRouter를 이용하여서 BottomnavigationBar를 구현하고 이제 세부 페이지를 연결하려고하니, 바텀네비게이션바가 남은채로 페이지가 이동되는 상황이 발생했고,
공식 예제를 찾아봐도

// The details screen to display stacked on the inner Navigator.
// This will cover screen A but not the application shell.

이런 주석만 달려있었다.

스택오버플로우에서 결국 해답을 찾을수 있었고
https://stackoverflow.com/questions/76575211/using-go-router-package-in-a-flutter-app-with-a-statefulshellroute-how-to-navig

GoRoute(
  path: 'job_detail',
  name: JobDetailScreen.routeName,
  parentNavigatorKey: rootNavigatorKey,//key넣어주기!!
  pageBuilder: (context, state){
   return const NoTransitionPage(
    child: JobDetailScreen(),
    );
  },
),

해당 페이지에 parentNavigatorKey를 넣어주는 것으로 해결하였다!

끝!






전체코드

final rootNavigatorKey = GlobalKey<NavigatorState>();

final routerProvider = Provider<GoRouter>((ref){
  final provider = ref.read(navigationProvider);
  return GoRouter(
    debugLogDiagnostics: true,
    navigatorKey: rootNavigatorKey,
    initialLocation: '/login',
    routes: provider.routes,
    refreshListenable: provider,
    redirect: provider.redirectLogic,
  );
});


final _shellReservationKey =
    GlobalKey<NavigatorState>(debugLabel: 'shellReservation');
final _shellJobKey = GlobalKey<NavigatorState>(debugLabel: 'shellJob');
final _shellAlarmKey = GlobalKey<NavigatorState>(debugLabel: 'shellAlarm');
final _shellMyKey = GlobalKey<NavigatorState>(debugLabel: 'shellMy');

final navigationProvider = ChangeNotifierProvider<NavigationNotifier>(
  (ref) => NavigationNotifier(ref: ref),
);

class NavigationNotifier extends ChangeNotifier {
  final Ref ref;

  NavigationNotifier({required this.ref}) {
    // ref.listen(userProvider, (previous, next) {
    //   if (previous != next) {
    //     notifyListeners();
    //   }
    // });
  }

  List<RouteBase> get routes => [
        StatefulShellRoute.indexedStack(
          builder: (context, state, navigationShell) {
            return RootTab(
              navigationShell: navigationShell,
            );
          },
          branches: [
            StatefulShellBranch(
              navigatorKey: _shellReservationKey,
              routes: [
                GoRoute(
                  path: '/reservation',
                  name: ReservationScreen.routeName,
                  pageBuilder: (context, state) => const NoTransitionPage(
                    child: ReservationScreen(),
                  ),
                ),
              ],
            ),
            StatefulShellBranch(
              navigatorKey: _shellJobKey,
              routes: [
                GoRoute(
                  path: '/job',
                  name: JobScreen.routeName,
                  pageBuilder: (context, state) => const NoTransitionPage(
                    child: JobScreen(),
                  ),
                  routes: [
                    GoRoute(
                      path: 'job_detail',
                      name: JobDetailScreen.routeName,
                      parentNavigatorKey: rootNavigatorKey,
                      pageBuilder: (context, state){
                        return const NoTransitionPage(
                          child: JobDetailScreen(),
                        );
                      },
                    ),
                  ],
                ),
              ],
            ),
            StatefulShellBranch(
              navigatorKey: _shellAlarmKey,
              routes: [
                GoRoute(
                  path: '/alarm',
                  name: AlarmScreen.routeName,
                  pageBuilder: (context, state) => const NoTransitionPage(
                    child: AlarmScreen(),
                  ),
                ),
              ],
            ),
            StatefulShellBranch(
              navigatorKey: _shellMyKey,
              routes: [
                GoRoute(
                  path: '/my',
                  name: MyScreen.routeName,
                  pageBuilder: (context, state) => const NoTransitionPage(
                    child: MyScreen(),
                  ),
                ),
              ],
            ),
          ],
        ),
       
      ];

}
profile
bayy1216.tistory.com <- 블로그 이전했습니다 🥹

0개의 댓글