Nested Navigation

Introduction to nested navigation

When we use the root navigator to handle our app’s navigation, we essentially work with a single stack of pages. This means that the navigation can branch out in only one direction. This is fine for most use cases, but it can become quite restricting if we want to preserve the navigation state of a particular group of widgets.

What does that mean? Let’s understand with an example!

Standard navigation example

Here, we have a standard navigation flow that uses the root navigator:

In the example above, we navigate to the settings page using the root navigator, i.e., using Get.toNamed('/profile/settings'). However, there’s a problem with that. Notice how the bottom bar disappears? That is not the desired behavior.

Nested navigation example

The ideal navigation flow in this case should look like this:

See how the bottom bar persists. That’s because we’ve implemented nested navigation using a localized navigator. The navigation flow is scoped to a single widget rather than the entire app, so the settings page does not take up the entire screen space. ...