Learning Flutter's new navigation and routing system
Article Summary
John Ryan from Flutter's team tackles one of mobile dev's messiest problems: navigation. But the solution might be more complex than the problem itself.
Flutter introduced Navigator 2.0 to give developers declarative control over navigation stacks and URL parsing—critical for web support. This deep-dive tutorial walks through the new Router, RouterDelegate, and RouteInformationParser APIs with working code examples.
Key Takeaways
- Navigator 2.0 adds Router widget for URL parsing and declarative page management
- RouterDelegate and RouteInformationParser replace imperative push/pop navigation patterns
- New system enables nested routers and custom transition animations
- Community feedback: 250 lines for 2-page app feels overengineered
Flutter's new navigation system offers powerful declarative control and web URL support, but requires significantly more boilerplate than the original imperative API.
About This Article
Before Navigator 2.0, Flutter developers struggled with complex navigation tasks. They couldn't push or pop multiple pages at once, and removing pages underneath the current one was difficult. GitHub issue #12146 documented these problems.
John Ryan's article explains how to use the Router widget with RouteInformationParser and RouterDelegate classes. These classes parse browser URLs into custom data types like BookRoutePath. This approach lets you manage the page stack declaratively instead of using imperative push and pop calls.
The new system keeps web apps in sync with the URL bar and handles back button presses from both the app and browser. However, setting it up takes about 250 lines of code for a basic two-page application, which is more work than some simpler alternatives.