> 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)

fetch
$curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/flutter-auto-route-navigation?format=md"
SKILL.mdflutter-auto-route-navigation

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

  1. Annotate pages — Mark all screen/page widgets with @RoutePage().
  2. Configure router — Extend _$AppRouter and annotate with @AutoRouterConfig.
  3. Navigate with types — Use generated route classes (e.g., HomeRoute()). Never use strings.
  4. Add guards — Implement AutoRouteGuard for authentication/authorization logic.
  5. Handle parameters — Constructors of @RoutePage widgets automatically become route parameters.
  6. Prefer declarative calls — Use context.pushRoute() or context.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)

┌ stats

installs/wk0
░░░░░░░░░░
github stars452
██████████
first seenMar 17, 2026
└────────────

┌ repo

HoangNguyen0403/agent-skills-standard
by HoangNguyen0403
└────────────

┌ tags

└────────────