flutter-routing-and-navigation
Navigate between screens, handle deep linking, and manage data passing in Flutter applications.
- Evaluates app requirements to select the optimal routing strategy: imperative
Navigatorfor simple flows, declarativeRouter/go_routerfor deep linking and web support, or nestedNavigatorfor independent sub-flows - Supports data passing between routes via constructor arguments (preferred) or
RouteSettingswith type-safe argument extraction - Implements named routes with
MaterialApp.routesoronGenerateRoutefor dynamic route handling, with guidance on limitations for deep linking scenarios - Includes nested navigation patterns using
GlobalKey<NavigatorState>for managing independent navigation stacks within sub-flows like setup wizards or persistent bottom navigation
flutter-navigation-routing
Goal
Implements robust navigation and routing in Flutter applications. Evaluates application requirements to select the appropriate routing strategy (imperative Navigator, declarative Router, or nested navigation), handles deep linking, and manages data passing between routes while adhering to Flutter best practices.
Instructions
1. Determine Routing Strategy (Decision Logic)
Evaluate the application's navigation requirements using the following decision tree:
- Condition A: Does the app require complex deep linking, web URL synchronization, or advanced routing logic?
- Action: Use the declarative
RouterAPI (typically via a routing package likego_router).
- Action: Use the declarative
- Condition B: Does the app require independent sub-flows (e.g., a multi-step setup wizard or persistent bottom navigation bars)?
- Action: Implement a Nested
Navigator.
- Action: Implement a Nested
- Condition C: Is it a simple application with basic screen-to-screen transitions and no complex deep linking?
- Action: Use the imperative
NavigatorAPI (Navigator.pushandNavigator.pop) withMaterialPageRouteorCupertinoPageRoute.
- Action: Use the imperative
- Condition D: Are Named Routes requested?
- Action: Use
MaterialApp.routesoronGenerateRoute, but note the limitations regarding deep link customization and web forward-button support.
- Action: Use
STOP AND ASK THE USER: "Based on your app's requirements, should we implement simple imperative navigation (Navigator.push), declarative routing (Router/go_router for deep links/web), or a nested navigation flow?"
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-implementing-navigation-and-routing
Handles routing, navigation, and deep linking in a Flutter application. Use when moving between screens or setting up URL-based navigation.
9.3K