May 9, 2025
Declarative Navigation: Navigator 2.0 manages routes via an explicit list of
Page
objects.Deep Linking Support: URLs map directly to routes using a custom
RouteInformationParser
.RouterDelegate Control: Manages app state and page transitions with fine-grained logic.
Dynamic Stack Updates: Push, pop, or reorder pages to reflect user flows and auth states.
Web-Ready: Enables back/forward button support and route sync for web apps.
Scalability: Ideal for nested flows, guarded routes, and tabbed navigation.
Introduction
In Flutter, smooth navigation is vital for user experience. While Navigator 1.0 works well for basic use cases, complex flows—deep linking, browser-like back/forward, URL synchronization—demand Navigator 2.0. This tutorial introduces new devs to Navigator 2.0, covering core concepts and a code-forward setup, so you can handle modern app routes with confidence.
Understanding Navigator 2.0 Concepts
Navigator 2.0 revolves around three pillars:
Pages: Immutable objects describing a route (e.g.,
MaterialPage
).RouterDelegate: Controls the stack of pages. It exposes methods like
setNewRoutePath
and manages aList<Page>
.RouteInformationParser: Converts between a URL (or OS route string) and a typed configuration object.
Key benefits of this navigation approach:
Declarative route stacks.
URL-based routing for web and deep links.
Fine-grained control over back button behavior.
Setting Up a Basic Navigator 2.0
Below is a minimal example illustrating how to wire up Navigator 2.0. It renders two pages: Home and Details.
This example demonstrates:
Defining a custom
RouteInformationParser
.Implementing
RouterDelegate
to manage navigation state.Building a declarative page stack.
Updating the Navigation Stack
In Navigator 2.0, you control navigation by mutating the list of pages. For dynamic flows, you can:
Add pages (
pages.add(...)
) to push.Remove pages (
pages.removeLast()
) to pop.Reorder pages for nested navigation or tabs.
Example: toggling a login screen before Home:
This pattern scales to complex requirements—nested navigators, guarded routes, deep linking—by updating the page list in your build method.
Vibe Studio

Vibe Studio, powered by Steve’s advanced AI agents, is a revolutionary no-code, conversational platform that empowers users to quickly and efficiently create full-stack Flutter applications integrated seamlessly with Firebase backend services. Ideal for solo founders, startups, and agile engineering teams, Vibe Studio allows users to visually manage and deploy Flutter apps, greatly accelerating the development process. The intuitive conversational interface simplifies complex development tasks, making app creation accessible even for non-coders.
Conclusion
By mastering Navigator 2.0, you gain full control over routing, deep linking, and back-button behavior in Flutter. Start small with a custom RouterDelegate and RouteInformationParser, then expand to nested navigation, authentication flows, or web-style URLs. Now you’re ready to build scalable Flutter apps with robust navigation and seamless routing. Happy coding!