flutter-auto-route-navigation
Typed routing, nested routes, and guards using auto_route. Use when implementing typed navigation, nested routes, or route guards with auto_route in Flutter. (triggers: **/router.dart, **/app_router.dart, AutoRoute, AutoRouter, router, guards, navigate, push)
- License 许可
- MIT
- 最近更新
- 2026-06-24
- Stars
- ★ 67
- Forks
- 24
01 前言 Front Matter
- name
- flutter-auto-route-navigation
- description
- Typed routing, nested routes, and guards using auto_route. Use when implementing typed navigation, nested routes, or route guards with auto_route in Flutter. (triggers: **/router.dart, **/app_router.dart, AutoRoute, AutoRouter, router, guards, navigate, push)
02 资源文件 8
- 参考文档.claude-plugin/plugin.json293 B
- 参考文档platforms.yaml837 B
- 参考文档presets.yaml11.1 KB
- 参考文档references/api_reference.md2.6 KB
- 资产文件references/vhs-infomercial.png495.0 KB
- 参考文档screenshot.json792 B
- 资产文件screenshot.png328.9 KB
- 脚本scripts/gpt_image_2.py29.9 KB
03 SKILL.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 Guidelines
-
@RoutePage: Annotate all screen/page widgets with
@RoutePage(). -
Router Config: Extend
_$AppRouterand annotate with@AutoRouterConfig. -
Typed Navigation: Use generated route classes (e.g.,
HomeRoute()). Never use strings. -
Nested Routes & Tabs: Use
childreninAutoRoutefor tabs. When navigating to a route with nested tabs, use thechildrenparameter to define the initial active sub-route (e.g.,context.navigateTo(OrdersTabRoute(children: [ViewByOrdersPageRoute()]))). -
Guards: Implement
AutoRouteGuardfor authentication/authorization logic. -
Parameters: Constructors of
@RoutePagewidgets automatically become route parameters. -
Declarative: Prefer
context.pushRoute()orcontext.replaceRoute().
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