Nested navigation using GetX package

This is a simple example of how to implement standard and nested navigation using the GetX package.

Getting Started

When you run this project, you'll see the following interface:

This button takes you to a screen with a BottomNavigationBar that contains three examples:

• Simple Navigation
• Nested Navigation
• Nested Navigation with Tab Bar

Let's take a closer look at these examples.

Simple Navigation

To navigate to the detail screen, we can use named routing:

Get.toNamed(Routes.STANDARD_NAVIGATION_DETAIL)

The detail screen overlays the entire screen, including the BottomNavigationBar.

Nested Navigation

First, we need to create a navigator that contains the entire navigation route chain, including the parent and its detail screen:

Navigator(
   key: Get.nestedKey(Constants.nestedNavigationNavigatorId),
   initialRoute: Routes.NESTED_NAVIGATION_MAIN,
   onGenerateRoute: (routeSettings) {
   if (routeSettings.name == Routes.NESTED_NAVIGATION_MAIN) {
       return MaterialPageRoute(builder: (context) {
       return NestedNavigationMainView();
       });
   } else if (routeSettings.name ==
       Routes.NESTED_NAVIGATION_DETAIL) {
       return GetPageRoute(
       routeName: Routes.NESTED_NAVIGATION_DETAIL,
       page: () => NestedNavigationDetailView(
           argument: routeSettings.arguments as String,
       ),
       binding: NestedNavigationDetailBinding()
       );
   }
 },
)

An important aspect here is the Constants.nestedNavigationNavigatorId constant, which must be used in the navigation function:

Get.toNamed(Routes.NESTED_NAVIGATION_DETAIL,
       arguments: argumentToDetailPage.value,
       id: Constants.nestedNavigationNavigatorId);

When navigation back we must use the same id

Get.back(result: controller.count.value, id: Constants.nestedNavigationNavigatorId)

Nested Navigation with Tab Bar

It's the same principle like in Nested Navigation but I added additional tab bar to demonstrate that navigation state dtays the same when we moves between tabs. The whole example you can take a look here

I've also made a short YouTube video.