flutter-navigation_skill

Overview

This skill is a practical guide for implementing navigation and routing in Flutter apps across mobile and web. It helps you choose between the Navigator API and go_router, set up deep links, manage data passing and returns, and handle browser history for web builds. The content focuses on actionable recommendations and real-world patterns for scalable navigation.

How this skill works

The guide explains imperative navigation with the Navigator API and declarative routing with go_router, showing when each approach fits. It covers passing and returning data between screens, configuring deep linking for Android, iOS, and web, and managing web URL strategies and browser history. Advanced topics include route guards, nested routes, error handling, and coordinating multiple Navigator widgets.

When to use it

• Use Navigator API for small apps, simple stacks, or quick prototypes without deep linking.
• Use go_router for apps that need deep links, URL-based routing, or web browser history support.
• Choose path-based web URLs for clean links when you can configure the server; use hash URLs otherwise.
• Apply nested routes or multiple Navigators when parts of the UI need independent navigation stacks.
• Add route guards when you need authentication redirects or conditional access to routes.

Best practices

• Prefer go_router for production apps that require deep linking and consistent URL behavior across platforms.
• Avoid named routes for complex apps—named routes limit deep-link customization and browser back/forward behavior.
• Pass data via constructor parameters or query parameters; validate and parse parameters on route entry.
• Always check context.mounted after awaiting navigation results before updating state.
• Handle unknown routes or errors with a dedicated 404/error route and user-friendly messages.

Example use cases

• A mobile app with a few screens and simple back-stack navigation using Navigator.push/pop.
• A web-first app that needs readable URLs, deep links, and browser history using go_router with path URL strategy.
• An app that opens content from external links (universal links/deep links) and routes users to the correct screen.
• A multi-tab UI where each tab manages its own Navigator to preserve independent navigation stacks.
• A gated flow that redirects unauthenticated users to a login route via route guards.