Learn Navigator 2.0 in Flutter (Declarative Navigation) #

Navigator 2.0 is Flutter’s modern, declarative navigation system. Instead of pushing and popping routes manually, you describe the navigation state, and Flutter builds the navigation stack automatically.

It is designed for large apps, deep linking, and Flutter Web.

---

Key Idea of Navigator 2.0 #

UI = Function(State)

You manage app state, and navigation reacts to that state.

Example:

• User logged out → Show Login page
• User logged in → Show Home page
• URL changes → App updates automatically

---

Navigator 1.0 vs Navigator 2.0 #

Feature	Navigator 1.0	Navigator 2.0
Navigation Style	Imperative	Declarative
Stack Handling	push / pop	Pages list
URL Support	Weak	Excellent
Deep Linking	Difficult	Built-in
Web Support	Limited	First-class
Complexity	Simple	Advanced

---

Core Components of Navigator 2.0 #

Navigator 2.0 is built using three main concepts:

1. Page #

Represents a screen in the navigation stack.

MaterialPage(
  key: ValueKey('HomePage'),
  child: HomeScreen(),
)

---

2. RouterDelegate #

Controls what pages are shown based on app state.

class AppRouterDelegate extends RouterDelegate
    with ChangeNotifier, PopNavigatorRouterDelegateMixin {
  
  final GlobalKey<NavigatorState> navigatorKey = GlobalKey();

  bool isLoggedIn = false;

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: navigatorKey,
      pages: [
        if (!isLoggedIn)
          MaterialPage(child: LoginScreen()),
        if (isLoggedIn)
          MaterialPage(child: HomeScreen()),
      ],
      onPopPage: (route, result) {
        return route.didPop(result);
      },
    );
  }

  @override
  Future<void> setNewRoutePath(configuration) async {}
}

---

3. RouteInformationParser #

Converts URL → Route configuration.

class AppRouteParser extends RouteInformationParser<String> {
  @override
  Future<String> parseRouteInformation(
      RouteInformation routeInformation) async {
    return routeInformation.location ?? '/';
  }
}

---

App Entry with MaterialApp.router #

Navigator 2.0 uses MaterialApp.router.

MaterialApp.router(
  routerDelegate: AppRouterDelegate(),
  routeInformationParser: AppRouteParser(),
);

---

Handling Back Button #

onPopPage: (route, result) {
  if (!route.didPop(result)) return false;
  notifyListeners();
  return true;
}

---

Example: Login Flow #

pages: [
  MaterialPage(child: LoginScreen()),
  if (isLoggedIn)
    MaterialPage(child: DashboardScreen()),
]

• State changes
• Stack updates automatically
• No manual push() or pop()

---

Deep Linking Example #

URL:

/profile/12

Parsed by RouteInformationParser and converted into:

MaterialPage(
  child: ProfileScreen(userId: 12),
)

---

Advantages of Navigator 2.0 #

• Declarative and predictable
• Excellent web & deep link support
• Centralized navigation logic
• URL-driven navigation

---

Disadvantages #

• Steep learning curve
• Verbose boilerplate
• Overkill for small apps

---

When to Use Navigator 2.0 #

Use Navigator 2.0 if:

• You are building Flutter Web
• App needs deep linking
• Complex navigation flows
• Multi-platform large applications

Avoid it if:

• App is simple
• You want fast development

---

Recommended Alternatives (Built on Navigator 2.0) #

For real projects, Flutter developers often use:

Package	Purpose
go_router	Simple, declarative routing
auto_route	Code-generated routing
beamer	URL-based navigation

---

Best Practices #

• Use state management (Provider, Riverpod, Bloc)
• Keep navigation state separate from UI
• Prefer go_router unless you need full control
• Keep URL structure clean

---

Summary #

Navigator 2.0 is powerful but complex.
It is best suited for enterprise-level apps, Flutter Web, and deep-link heavy applications.