Week 5: go_router, Nested Navigation & Deep Linking

1. Declarative Routing with go_router

flutter pub add go_router

final router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(path: '/', builder: (context, state) => const ProductListScreen()),
    GoRoute(
      path: '/product/:id',
      builder: (context, state) {
        final id = int.parse(state.pathParameters['id']!);
        return ProductDetailScreen(productId: id);
      },
    ),
  ],
);

MaterialApp.router(routerConfig: router)

Every route is a real, typed URL path — /product/42 — rather than an opaque named route with manually-passed arguments, which is what makes deep linking (this week's last section) work naturally instead of as a bolted-on afterthought.

2. Nested Navigators & Shell Routes

A ShellRoute (or its StatefulShellRoute variant for tabs) wraps a set of routes in a persistent shell — like the bottom nav bar — while each child route still gets its own independent push/pop history underneath.

StatefulShellRoute.indexedStack(
  builder: (context, state, shell) => MainScreen(shell: shell),
  branches: [
    StatefulShellBranch(routes: [
      GoRoute(path: '/shop', builder: (c, s) => const ProductListScreen()),
      GoRoute(path: '/shop/product/:id', builder: (c, s) =>
        ProductDetailScreen(productId: int.parse(s.pathParameters['id']!))),
    ]),
    StatefulShellBranch(routes: [
      GoRoute(path: '/cart', builder: (c, s) => const CartScreen()),
    ]),
  ],
)

This is the fix for the exact gap Week 4 flagged — pushing a product detail screen from the Shop tab now genuinely lives on the Shop tab's own stack, and switching to Cart and back preserves it, instead of the whole app sharing one flat navigation history.

3. Typed Parameters

Raw string path parameters (state.pathParameters['id']) work but push parsing and validation into every route builder. Wrapping route construction in a small typed helper cleans that up.

class ProductRoute {
  static String path(int id) => '/shop/product/$id';
}

// call sites now read cleanly, with no raw string formatting scattered around
context.go(ProductRoute.path(42));

This is a lighter-weight version of what packages like go_router_builder generate automatically from annotations — worth adopting once a route table grows past a handful of routes, but a hand-written helper is enough to see the pattern.

4. Deep Links & Auth-Gated Redirects

Because every route is a real path, a deep link (a push notification, a shared URL, a universal link) that opens /shop/product/42 lands directly on the right screen — no extra deep-linking library required, on top of what go_router already provides.

final router = GoRouter(
  redirect: (context, state) {
    final isSignedIn = AuthState.of(context).isSignedIn;
    final isLoggingIn = state.matchedLocation == '/login';

    if (!isSignedIn && !isLoggingIn) return '/login';
    if (isSignedIn && isLoggingIn) return '/';
    return null; // no redirect needed
  },
  routes: [ /* ... */ ],
);

This redirect callback runs before every navigation, including a deep link opening the app cold — so a link to /cart received while signed out correctly detours through /login first, rather than crashing or exposing a screen it shouldn't.

5. Hands-on Exercise

6. Knowledge Check

Four quick questions. Expand each to check your answer.