flutter-implementing-navigation-and-routing

SKILL.md

Imperative and declarative routing patterns for Flutter screen transitions and deep linking.

Covers both Navigator (imperative, stack-based) and Router (declarative, URL-synchronized) approaches with guidance on when to use each

Supports deep linking on iOS, Android, and Web; includes data passing via constructors, route arguments, and return values

Implements nested navigation for multi-step flows (e.g., setup wizards) with independent sub-navigators and back-button interception

Provides three complete workflows: standard screen transitions, deep-linkable routing setup, and nested navigation flows with code examples

Implementing Navigation and Routing in Flutter

Contents

Core Concepts

Implementing Imperative Navigation

Implementing Declarative Navigation

Implementing Nested Navigation

Workflows

Examples

Core Concepts

Routes: In Flutter, screens and pages are referred to as routes. A route is simply a widget. This is equivalent to an Activity in Android or a ViewController in iOS.

Navigator vs. Router:

Use Navigator (Imperative) for small applications without complex deep linking requirements. It manages a stack of Route objects.

Use Router (Declarative) for applications with advanced navigation, web URL synchronization, and specific deep linking requirements.

Deep Linking: Allows an app to open directly to a specific location based on a URL. Supported on iOS, Android, and Web. Web requires no additional setup.

Named Routes: Avoid using named routes (MaterialApp.routes and Navigator.pushNamed) for most applications. They have rigid deep linking behavior and do not support the browser forward button. Use a routing package like go_router instead.

Implementing Imperative Navigation