Agent Skills: AutoRoute 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)

UncategorizedID: hoangnguyen0403/agent-skills-standard/flutter-auto-route-navigation

Install this agent skill to your local

pnpm dlx add-skill https://github.com/HoangNguyen0403/agent-skills-standard/tree/HEAD/skills/flutter/flutter-auto-route-navigation

Skill Files

Browse the full folder contents for flutter-auto-route-navigation.

Download Skill

Loading file tree…

skills/flutter/flutter-auto-route-navigation/SKILL.md

Skill Metadata

Name
flutter-auto-route-navigation
Description
Implement typed routing, nested routes, and guards using auto_route in Flutter. Use when adding navigation flows, nested routes, or route guards with auto_route.

AutoRoute Navigation

Priority: P1 (HIGH)

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 children parameter to define 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

  • No string-based navigation: Use generated typed route classes (e.g., OrderDetailRoute(id: 123)).
  • No protected screen without AutoRouteGuard: Every protected route must declare guard; don't rely on UI-level checks.
  • No navigation calls from BLoC: Emit state and let Presentation layer navigate.

References