> flutter-auto-route-navigation
Implement typed routing, nested routes, and guards using auto_route. Use when adding typed navigation, nested routes, or route guards with auto_route in Flutter. (triggers: **/router.dart, **/app_router.dart, AutoRoute, AutoRouter, router, guards, navigate, push)
curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/flutter-auto-route-navigation?format=md"AutoRoute Navigation
Priority: P1 (HIGH)
Type-safe routing system with code generation using auto_route.
Structure
core/router/
├── app_router.dart # Router configuration
└── app_router.gr.dart # Generated routes
Implementation Workflow
- Annotate pages — Mark all screen/page widgets with
@RoutePage(). - Configure router — Extend
_$AppRouterand annotate with@AutoRouterConfig. - Navigate with types — Use generated route classes (e.g.,
HomeRoute()). Never use strings. - Add guards — Implement
AutoRouteGuardfor authentication/authorization logic. - Handle parameters — Constructors of
@RoutePagewidgets automatically become route parameters. - Prefer declarative calls — Use
context.pushRoute()orcontext.replaceRoute().
Nested Routes & Tabs
Use children in AutoRoute for tabs. Pass the children parameter to define the initial active sub-route.
See implementation examples for nested route navigation and router configuration patterns.
Reference & Examples
For full Router configuration and Auth Guard implementation: See references/REFERENCE.md.
Anti-Patterns
- ❌
Navigator.pushNamed(context, '/orders/123')— always use generated typed route classes (e.g.,OrderDetailRoute(id: 123)) - ❌ Authenticated screen without an
AutoRouteGuard— every protected route must declare a guard; don't rely on UI-level checks alone - ❌
context.router.push(…)called from a BLoC or repository — navigation is a Presentation concern; emit a state and let the UI navigate
Related Topics
go-router-navigation | layer-based-clean-architecture
> related_skills --same-repo
> common-store-changelog
Generate user-facing release notes for the Apple App Store and Google Play Store by collecting git history, triaging user-impacting changes, and drafting store-compliant changelogs. Enforces character limits (App Store ≤4000, Google Play ≤500), tone, and bullet format. Use when generating release notes, app store changelog, play store release, what's new, or version release notes for any mobile app. (triggers: generate changelog, app store notes, play store release, what's new, release notes, ve
> golang-tooling
Go developer toolchain — gopls LSP diagnostics, linting, formatting, and vet. Use when setting up Go tooling, running linters, or integrating gopls with Claude Code. (triggers: gopls, golangci-lint, golangci.yml, go vet, goimports, staticcheck, go tooling, go lint)
> common-ui-design
Design distinctive, production-grade frontend UI with bold aesthetic choices. Use when building web components, pages, interfaces, dashboards, or applications in any framework (React, Next.js, Angular, Vue, HTML/CSS). (triggers: build a page, create a component, design a dashboard, landing page, UI for, build a layout, make it look good, improve the design, build UI, create interface, design screen)
> common-owasp
OWASP Top 10 audit checklist for Web Applications (2021) and APIs (2023). Load during any security review, PR review, or codebase audit touching web, mobile backend, or API code. (triggers: security review, OWASP, broken access control, IDOR, BOLA, injection, broken auth, API review, authorization, access control)