flutter-gorouter-navigation | Skill Performance & Reviews | TopRankSkills

TopRank Skills

Home / Skills / tools / flutter-gorouter-navigation

flutter-gorouter-navigation

maintained by HoangNguyen0403

star 143 account_tree 48 verified_user MIT License
bolt View GitHub

name: Flutter GoRouter Navigation description: Typed routes, route state, and redirection using go_router. metadata: labels: [navigation, go-router, routing] triggers: files: ['/router.dart', '/app_router.dart'] keywords: [GoRouter, GoRoute, StatefulShellRoute, redirection, typed-routes]

GoRouter Navigation

Priority: P0 (CRITICAL)

Type-safe deep linking and routing system using go_router and go_router_builder.

Structure

core/router/
├── app_router.dart # Router configuration
└── routes.dart # Typed route definitions (GoRouteData)

Implementation Guidelines

  • Typed Routes: Always use GoRouteData from go_router_builder. Never use raw path strings.
  • Root Router: One global GoRouter instance registered in DI.
  • Sub-Routes: Nest related routes using TypedGoRoute and children lists.
  • Redirection: Handle Auth (Login check) in the redirect property of the GoRouter config.
  • Parameters: Use @TypedGoRoute to define paths with :id parameters.
  • Transitions: Define standard transitions (Fade, Slide) in buildPage.
  • Navigation: Use MyRoute().go(context) or MyRoute().push(context).

Code

// Route Definition
@TypedGoRoute<HomeRoute>(path: '/')
class HomeRoute extends GoRouteData {
  @override
  Widget build(context, state) => const HomePage();
}

// Router Config
final router = GoRouter(
  routes: $appRoutes,
  redirect: (context, state) {
    if (notAuthenticated) return '/login';
    return null;
  },
);

Related Topics

layer-based-clean-architecture | auto-route-navigation | security

chat Comments (0)

chat_bubble_outline

No comments yet. Be the first to share your thoughts!

Skill Details

GitHub Stars 143
GitHub Forks 48
Created Jan 2026
Last Updated 8 months ago
tools tools frontend

Related Skills

ui-ux-pro-max
chevron_right
ui-ux-pro-max
chevron_right
data-fetching
chevron_right
tailwind-setup
chevron_right
api-routes
chevron_right

Build your own?

Join 12,000+ developers contributing to the Claude ecosystem.