Nested Navigation in flutter web
summary
Shows how go_router handles URL-based routing on Flutter web, why its default shell loses page state, and why the new stateful shell route plus an index stack preserves per-tab counters and nested navigation trees. Demonstrates shell routes for bottom nav, drawer, navigation rail and a collapsible sidebar using go_router subroutes, compares context.go versus context.push, and reports a working demo app that keeps each tab’s state. Notes remaining edge cases and recommends testing against project needs.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 2:36Why nested navigation
- 3:43Navigation in Flutter Web
- 7:17GoRouter basics
- 11:58Nested navigation options
- 13:25Shell route concept
- 14:52Stateful shell route
- 17:44Shell route hierarchy
- 20:13Code example overview
- 23:17Third-party navigation
- 24:23Choosing the right package
- 24:44Resources and conclusion
related talks
30mNested Navigation in flutter web
41mreal world use cases in Flutter with GoRouter and GoRouterBuilder
29mBasic Strategies for State Propagation and Access Control in Flutter Widget Trees
26mVoyager: Navigation and DI for Flutter
27mFrom Mobile to Web: Reusing Flutter via Multi-View Embedding
27mAdd-to-web: Reusing Flutter via multi-view embedding
43mAdding WebView to your Flutter app
31mHow Flutter works under the hood