Per-tab navigation stacks with StatefulShellRoute

WHAT THIS TESTS Whether you can model tabbed navigation where each tab is a self-contained stack, and whether you know the GoRouter primitive purpose-built for it rather than hand-rolling nested Navigators.

A GOOD ANSWER COVERS StatefulShellRoute wraps several StatefulShellBranch entries. Each branch has its own root route, its own Navigator, and its own preserved state. The shell builder receives a StatefulNavigationShell object and returns the persistent chrome, typically a Scaffold with a BottomNavigationBar. Tapping a tab calls navigationShell.goBranch with the target index, which swaps the active branch while keeping the others alive. The indexedStack variant keeps every branch mounted so scroll position and pushed pages persist.

COMMON WRONG ANSWERS Putting all tabs under a single Navigator so pushing in one tab pollutes another, or rebuilding the whole subtree on each tab change which resets scroll and forms. Another mistake is managing the selected index manually with setState instead of letting the shell own it.

LIKELY FOLLOW-UPS How do you read the current index for highlighting. Difference between indexedStack and lazy branch construction. How do you deep-link into a specific tab and route. How do you reset a branch to its root on re-tap.

ONE CONCRETE EXAMPLE A shopping app has Home, Search and Cart tabs. The user opens Home, drills into a product, then a review thread. Switching to Search and back must show that review thread exactly as left, not the Home root. With StatefulShellRoute.indexedStack you declare three branches, each with its nested routes, and a builder returning the Scaffold whose body is the navigationShell and whose BottomNavigationBar onTap calls navigationShell.goBranch(index). Each branch keeps its stack and scroll independently.