Nested navigation with GetX

App 의 Bottom Navigation 을 사용할때 페이지 이동시, BottomNavigation 을 유지 하면서 이동하는 할때 주로 사용되는 Nested navigation 기능입니다.

• Nested 기능을 사용할때 는 하고자 하는 페이지는 GetX 를 사용하는것이 아니라, 기본 flutter 의 기능인 Navigator, MaterialPageRoute 등을 사용해야 편리하게 구성할 수 있습니다.

1.페이지 이동

// in lib/pages/internal_storage/internal_storage_page.dart

ElevatedButton(
  style: ElevatedButton.styleFrom(
    primary: Colors.redAccent,
    elevation: 0,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(20),
    ),
  ),
  child: Text("Increase"),

  // AddCounter page 로 이동
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => AddCounter(),
      ),
    );
  },
),

2.Nested routing 설정

이동된 페이지에서 bottom navigation 이 보이게 하기 위해선 bottom navigation 설정 하는 페이지에서 IndexedStack 부분에서 body component 부분 page children 에서 Navigator 에서 setting 이 필요합니다

// in pages/dashboard/dashboard.dart

class MyDashBoard extends StatelessWidget {
  MyDashBoard({Key? key}) : super(key: key);

  // Navigator key 생성
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  @override
Widget build(BuildContext context) {
  return GetBuilder<DashboardController>(
      builder: (controller) {
        return Scaffold(
          body: SafeArea(
            child: IndexedStack(
              index: controller.tabIndex,
              children: [
                HomePage(),
                // NestingRouting 을 위해서 GetX 가 아닌 Navigator 로 넘김
                Navigator(
                  onGenerateRoute: (routeSettings) {
                    return MaterialPageRoute(
                      builder: (context) => InternalStorage(),
                    );
                  },
                ),
                SettingsPage(),
              ],
            ),
          bottomNavigationBar: CustomAnimatedBottomBar(.....

3.뒤로 가기 설정(in Android App)

위에처럼 nested Routing 을 설정할때, android 경우 시스템 상의 뒤로가기 버튼을 누르게 되면 이전페이지로 가지 않고, root 경로로 빠져 나가게 되면서 처리가 안되는 부분이 발생 합니다

이부분을 해결하기 위해서는 뒤로가기 버튼의 event 를 잡아내서 설정을 해줘야 합니다. 그렇게 하기 위해서 WillPopScope 위젯을 사용해서 event 처리를 막아주면 됩니다

class MyDashBoard extends StatelessWidget {
  MyDashBoard({Key? key}) : super(key: key);

  // Navigator key 생성
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    // 뒤로가기 버튼을 누르게 되면 onWillPop 에 event 가 잡히게 되는것
    return WillPopScope(
      onWillPop: () async {
        // maypop : pop 할께 있으면 pop을 하고, 아니면, app 을 종료 시키는것
        // pop 할께 있으면 true 인데, true 이면 app 이 종료가 되기 때문에 false 로 바꿔 줘야 되기 때문에 await 앞에 ! 을 넣어 줌
        return !await navigatorKey.currentState!.maybePop();
      },
      child: GetBuilder<DashboardController>(
        builder: (controller) {
          return Scaffold(
            body: SafeArea(
              child: IndexedStack(
                index: controller.tabIndex,
                children: [
                  HomePage(),
                  // NestingRouting 을 위해서 GetX 가 아닌 Navigatior 로 넘김
                  Navigator(
                    key: navigatorKey,
                    onGenerateRoute: (routeSettings) {
                      return MaterialPageRoute(
                        builder: (context) => InternalStorage(),
                      );
                    },
                  ),
                  SettingsPage(),
                ],
              ),
            ),
            bottomNavigationBar: CustomAnimatedBottomBar(

Nested navigation with GetX Practice Code

🔶 🔷 📌 🔑

Reference

GetX pub.dev - https://pub.dev/packages/get

Jonas Poxleitner - https://medium.com/@jonaspoxleitner/nested-navigation-with-getx-25401616c9db

개발하는 남자 - https://youtu.be/1aqAUVXJde0