Flutter Nested Navigation: Routers Within Routers
Nested Navigation is like having a mini-app with its own back button inside a single screen. It's used for UIs like a BottomNavigationBar where each tab needs its own navigation history. The footgun is calling the wrong Navigator's context.
Why it exists
Some UI patterns require independent navigation flows within a single screen. Without nesting, if a user navigates deep into one tab and then switches to another, their position in the first tab is lost. Nested navigation solves this by creating isolated history stacks for different parts of the UI.
The mental model
Imagine your app is a building with a main lobby (the root navigator). Nested navigation is like putting an elevator inside one of the rooms. That elevator only travels between floors within that specific room; it has its own controls and doesn't affect the main lobby elevator. You can use the room's elevator, leave the room, and when you come back, the elevator is right where you left it.
How it works
In Flutter, you create a nested navigator by placing a Navigator widget within your widget tree, typically as the body of a screen that is itself part of the main navigation flow. This new Navigator widget manages its own stack of Route objects. Any Navigator.pop or Navigator.push calls made using a BuildContext from within this sub-tree will be handled by the nested navigator, not the root one.
When to use it
This pattern is essential for stateful tabbed navigation. The most common use case is a Scaffold with a BottomNavigationBar or TabBar, where each tab's view is a separate Navigator. This preserves the user's navigation state within each tab. It's also key for creating master-detail layouts on tablets, where selecting an item in a list on the left pushes a new screen into a navigator on the right.
When not to use it
For simple, linear user flows (like a wizard or a settings page), a single global navigator is much simpler. Introducing nested navigators adds complexity to state management, deep linking, and understanding which navigator is being controlled. Avoid it unless you explicitly need to maintain separate, parallel history stacks within one screen.
One canonical example
A shopping app has 'Home', 'Search', and 'Cart' tabs. A user on the 'Search' tab taps a product, then another, going three screens deep. They then switch to the 'Cart' tab. When they return to the 'Search' tab, they are still on the third screen they navigated to, not back at the initial search page. This is because the body of the 'Search' tab is its own Navigator instance.
Interview question
Which scenario best illustrates the primary benefit of Flutter's nested navigation?
- a.Maintaining separate navigation histories for each tab in a BottomNavigationBar.Correct
- b.Creating a single, unified navigation flow for all screens in the application.
- c.Ensuring all push and pop operations always affect the main, root navigator.
- d.Simplifying the overall app's deep linking and state management.
Why? this is the answer
The card explicitly states that nested navigation creates isolated history stacks for different parts of the UI, making it essential for stateful tabbed navigation like a BottomNavigationBar. Conversely, it notes that nested navigators add complexity to state management and deep linking, making option D incorrect.
Just read this? Test yourself on what you have been reading.
Read the original → docs.flutter.dev
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on flutter — each one lists the topics its interview covers.
See open roles