flutter-implementing-navigation-and-routing
Imperative and declarative routing patterns for Flutter screen transitions and deep linking.
- Covers both
Navigator(imperative, stack-based) andRouter(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
Activityin Android or aViewControllerin iOS. - Navigator vs. Router:
- Use
Navigator(Imperative) for small applications without complex deep linking requirements. It manages a stack ofRouteobjects. - Use
Router(Declarative) for applications with advanced navigation, web URL synchronization, and specific deep linking requirements.
- Use
- 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.routesandNavigator.pushNamed) for most applications. They have rigid deep linking behavior and do not support the browser forward button. Use a routing package likego_routerinstead.
Implementing Imperative Navigation
More from flutter/skills
flutter-building-layouts
Builds Flutter layouts using the constraint system and layout widgets. Use when creating or refining the UI structure of a Flutter application.
10.6Kflutter-architecting-apps
Architects a Flutter application using the recommended layered approach (UI, Logic, Data). Use when structuring a new project or refactoring for scalability.
10.4Kflutter-animating-apps
Implements animated effects, transitions, and motion in a Flutter app. Use when adding visual feedback, shared element transitions, or physics-based animations.
9.6Kflutter-managing-state
Manages application and ephemeral state in a Flutter app. Use when sharing data between widgets or handling complex UI state transitions.
9.6Kflutter-theming-apps
Customizes the visual appearance of a Flutter app using the theming system. Use when defining global styles, colors, or typography for an application.
9.5Kflutter-testing-apps
Implements unit, widget, and integration tests for a Flutter app. Use when ensuring code quality and preventing regressions through automated testing.
9.0K