how to use inner navigation if we using bottomNavigationBar on GetX

Question

I'm trying to make navigation inside the body of the widget where the bottomNavigationBar remains outside, here is my code:

class WrapperController extends GetxController {
  int currentIndex = 0;
  List items = [];

  Widget navigationTab({GlobalKey naviKey, Widget widget}) {
    return Navigator(
      key: naviKey,
      onGenerateRoute: (routeSettings) {
        return GetPageRoute(page: () => widget);
      },
    );
  }

  Widget bottomNavigationBar() {
    return BottomNavigationBar(
      selectedItemColor: Get.theme.accentColor,
      type: BottomNavigationBarType.fixed,
      currentIndex: currentIndex,
      backgroundColor: Get.theme.primaryColor,
      onTap: (int index) => _selectTab(index),
      items: items.map((e) => e.bottomBarItem).toList(),
    );
  }

  void _selectTab(int index) {
    if (index == currentIndex) {
      items[index]
          .navigationKey
          .currentState
          .popUntil((route) => route.isFirst);
    } else {
      currentIndex = index;
    }
    update();
  }

  Future onWillPop() async {
    final isFirstRouteInCurrentTab =
        !await items[currentIndex].navigationKey.currentState.maybePop();
    if (isFirstRouteInCurrentTab) {
      if (currentIndex != 0) {
        // _selectTab(1);
        return false;
      }
    }
    return isFirstRouteInCurrentTab;
  }

  @override
  void onInit() {
    super.onInit();
    items = [
      //Каталог
      BottomNavigationElement(
        bottomBarItem: BottomNavigationBarItem(
          icon: Icon(Icons.search),
          label: "Home",
        ),
        bottomBarView: HomePage(),
        navigationKey: Get.nestedKey('0'),
      ),
      //Любимое
      BottomNavigationElement(
        bottomBarItem: BottomNavigationBarItem(
          icon: Icon(Icons.favorite_border),
          label: "Favorites",
        ),
        bottomBarView: FavoritesPage(),
        navigationKey: Get.nestedKey('1'),
      ),
      //Корзина
      BottomNavigationElement(
        bottomBarItem: BottomNavigationBarItem(
          icon: Icon(Icons.shopping_cart_outlined),
          label: "Cart",
        ),
        bottomBarView: CartPage(),
        navigationKey: Get.nestedKey('2'),
      ),
      //Заказы
      BottomNavigationElement(
        bottomBarItem: BottomNavigationBarItem(
          icon: Icon(Icons.history),
          label: "History",
        ),
        bottomBarView: HistoryPage(),
        navigationKey: Get.nestedKey('3'),
      ),
      //Меню
      BottomNavigationElement(
        bottomBarItem: BottomNavigationBarItem(
          icon: Icon(Icons.menu),
          label: "Menu",
        ),
        bottomBarView: MenuPage(),
        navigationKey: Get.nestedKey('4'),
      ),
    ];
  }
}

class BottomNavigationElement {
  Widget bottomBarView;
  BottomNavigationBarItem bottomBarItem;
  GlobalKey navigationKey;
  BottomNavigationElement({
    @required this.bottomBarView,
    @required this.bottomBarItem,
    @required GlobalKey navigationKey,
  });
}

and here is the Wrapper widget :

class Wrapper extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetBuilder(builder: (controller) {
      return Scaffold(
        body: IndexedStack(
          index: controller.currentIndex,
          children: controller.items
              .map((e) => controller.navigationTab(
                    naviKey: e.navigationKey,
                    widget: e.bottomBarView,
                  ))
              .toList(),
        ),
        bottomNavigationBar: controller.bottomNavigationBar(),
      );
    });
  }
}

here is the HomePage("Search") which has a navigation button:

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Home"),
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => Navigator.of(context).push(
            MaterialPageRoute(
              builder: (context) => Detail(),
            ),
          ),
          child: Text("Detail"),
        ),
      ),
    );
  }
}

the question is, when I use Navigator.of (context) Get.to () instead, then the navigation is done entirely and not inside the body. I need internal navigation using Get.to (), how do I do this?

user_15156312 · Answer

There is one quick solution

Create a separate navigator for the bottom navbar (if you want to separate auth from the main logic).

Code for that is:

Expanded(
            child: Navigator(
            key: Get.nestedKey(1),
            initialRoute: controller.pageName.value,
            onGenerateRoute: HomeRouter.generateRoute,
          )
)

For Navigation

void gotoPage(String page, BuildContext context) {
    pageName.value = page;
    print("Request to go to ${pageName.value}");
    Get.keys[1]!.currentState!.pushNamed(page);
    //if you want to change the URL in browser as well
    html.window.history.pushState(null, "/", page);
  }

how to use inner navigation if we using bottomNavigationBar on GetX

1 Answers