How do you implement nested navigation in Flutter?
TL;DR: Nested navigation means each tab or section has its own navigation stack. In go_router use ShellRoute. With Navigator 1.0, each tab hosts its own Navigator widget with its own key.
Full Answer
Many apps need nested navigation: a bottom nav bar that persists while navigating within each tab.
go_router's ShellRoute wraps a set of routes in a persistent shell widget (your Scaffold with BottomNavigationBar). Each tab's routes render inside the shell, maintaining the shell UI.
With StatefulShellRoute in go_router 7+, each branch maintains its own navigation state (scroll, history). Without it, switching tabs resets each tab's stack.
Code Examples
BottomNavigationBar persists; each tab has independent navigation stack; switching tabs preserves history
Common Mistakes
- ✗Using a single Navigator for bottom nav — all tabs share one stack; back button breaks
- ✗Forgetting to use StatefulShellRoute — regular ShellRoute resets tab state on switch
Interview Tip
This is one of the most common real-world architecture questions for mid-to-senior Flutter roles. StatefulShellRoute + go_router is the current best-practice answer.