Flutter go_router Grandchild Navigation Example

main.dart

import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() {
  runApp(MaterialApp(home: Routes()));
}

final GlobalKey<NavigatorState> rootNavigatorKey = GlobalKey<NavigatorState>(debugLabel: 'root');
final GlobalKey<NavigatorState> firstNavigatorKey = GlobalKey<NavigatorState>(debugLabel: 'shell');

class Routes extends StatelessWidget {
  Routes({super.key});

  final GoRouter router = GoRouter(
    navigatorKey: rootNavigatorKey,
    initialLocation: '/a',
    routes: [
      ShellRoute(
        navigatorKey: firstNavigatorKey,
        builder: (BuildContext context, GoRouterState state, Widget child) {
          //Main App Structure =====
          return Scaffold(
            body: Row(
              children: [
                const SizedBox(
                  width: 68,
                  child: Nav(),
                ),
                Expanded(child: child),
              ],
            ),
          );
        },
        routes: [
          //===== A =====
          GoRoute(
            path: '/a',
            pageBuilder: (context, state) => NoTransitionPage<void>(
              key: state.pageKey,
              child: const PageA(),
            ),
            routes: [
              GoRoute(
                path: 'child',
                builder: (context, state) {
                  return const PageAChild();
                },
                routes: [
                  GoRoute(
                    path: 'grandchild',
                    builder: (context, state) {
                      return const PageAGrandChild();
                    },
                    routes: [],
                  ),
                ],
              ),
            ],
          ),
          //===== B =====
          GoRoute(
            path: '/b',
            pageBuilder: (context, state) => NoTransitionPage<void>(
              key: state.pageKey,
              child: const PageB(),
            ),
            routes: [],
          ),
        ],
      ),
    ],
  );

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: router,
      debugShowCheckedModeBanner: false,
    );
  }
}

class Nav extends StatelessWidget {
  const Nav({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(color: Colors.white),
      child: Column(
        children: [
          TextButton(
            onPressed: () {
              GoRouter.of(context).go('/a');
            },
            child: const Text('Go to A'),
          ),
          const SizedBox(height: 20),
          TextButton(
            onPressed: () {
              GoRouter.of(context).go('/b');
            },
            child: const Text('Go to B'),
          ),
        ],
      ),
    );
  }
}

class PageA extends StatelessWidget {
  const PageA({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(color: Colors.deepPurple),
      child: Center(
        child: Column(
          children: [
            const Text(
              'Page A',
              style: TextStyle(color: Colors.white),
            ),
            TextButton(
              onPressed: () {
                GoRouter.of(context).go('/a/child');
              },
              child: const Text('Go to A\'s Child'),
            ),
          ],
        ),
      ),
    );
  }
}

class PageAChild extends StatelessWidget {
  const PageAChild({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(color: Colors.deepOrange),
      child: Center(
        child: Column(
          children: [
            const Text('Page A Child'),
            TextButton(
              onPressed: () {
                GoRouter.of(context).go('/a/child/grandchild');
              },
              child: const Text(
                'Go to A\'s Grandchild',
                style: TextStyle(color: Colors.white),
              ),
            ),
            TextButton(
              onPressed: () {
                GoRouter.of(context).pop();
              },
              child: const Text('Go Back'),
            ),
          ],
        ),
      ),
    );
  }
}

class PageAGrandChild extends StatelessWidget {
  const PageAGrandChild({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(color: Colors.red),
      child: Center(
        child: Column(
          children: [
            const Text('Page A Grandchild'),
            TextButton(
              onPressed: () {
                GoRouter.of(context).pop();
              },
              child: const Text('Go Back'),
            ),
          ],
        ),
      ),
    );
  }
}

class PageB extends StatelessWidget {
  const PageB({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: const BoxDecoration(color: Colors.pink),
      child: const Center(
        child: Text('Page B'),
      ),
    );
  }
}