flutter-implementing-navigation-and-routing

Implements imperative, declarative, and nested navigation patterns in Flutter applications.

1|Updated Apr 30, 2026
One-click install
npx skills add https://github.com/Wishtohear/bucket-water-oms --skill flutter-implementing-navigation-and-routing-wishtohear
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: flutter-implementing-navigation-and-routing
Source: https://github.com/Wishtohear/bucket-water-oms/tree/main/bucket-water-oms-admin-mobile/skills/flutter-implementing-navigation-and-routing
Command: npx skills add https://github.com/Wishtohear/bucket-water-oms --skill flutter-implementing-navigation-and-routing-wishtohear

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires go_router.

What problem does it solve? Choosing and implementing the right navigation approach in Flutter is confusing: developers struggle to decide between Navigator and Router, handle deep linking, pass data between screens, and manage nested flows without breaking the back button. ## Core Features & Use Cases - Imperative Navigation: Push, pop, replace routes with MaterialPageRoute or CupertinoPageRoute, and pass or return data between screens. - Declarative Routing with go_router: Configure deep-linkable, web-friendly routes using MaterialApp.router and context.go(). - Nested Navigation Flows: Build multi-step sub-flows (e.g., device setup wizards) with a nested Navigator, GlobalKey control, and PopScope back-button interception. - Use Case: When adding a multi-step checkout flow to a Flutter app, use the nested navigation workflow to keep the flow independent from the global navigator and intercept accidental exits. ## Quick Start Ask the assistant to implement navigation between two Flutter screens with data passing, or to set up go_router-based deep linking for the app.

Frequently Asked Questions about flutter-implementing-navigation-and-routing

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I navigate between screens in Flutter?▼

Use Navigator.push with a MaterialPageRoute or CupertinoPageRoute to move to a new screen, and Navigator.pop to return. Pass data through the destination widget's constructor and return values via Navigator.pop(context, result).

Navigator vs Router in Flutter: which should I use?▼

Use the imperative Navigator for small apps without deep linking needs. Use the declarative Router API, typically via the go_router package, when you need deep linking, web URL synchronization, or complex routing behavior.

How do I implement deep linking in a Flutter app?▼

Add the go_router package, switch MaterialApp to MaterialApp.router, and define a GoRouter configuration mapping URL paths to routes. Navigate with context.go() or context.push() instead of Navigator.push.

Why should I avoid named routes in Flutter?▼

Named routes via MaterialApp.routes and Navigator.pushNamed have rigid deep linking behavior and do not support the browser forward button. The recommended approach is a routing package like go_router for declarative navigation.

How do I handle the back button in a nested Flutter navigation flow?▼

Wrap the host widget in a PopScope with canPop set to false and use onPopInvokedWithResult to intercept back presses. Control the nested Navigator through a GlobalKey<NavigatorState> so the top-level navigator does not pop the entire flow.