9

lib/13/go/others/custom_stateful_shell_route.dart

@@ -0,0 +1,460 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:collection/collection.dart';
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+final GlobalKey<NavigatorState> _rootNavigatorKey =
+    GlobalKey<NavigatorState>(debugLabel: 'root');
+final GlobalKey<NavigatorState> _tabANavigatorKey =
+    GlobalKey<NavigatorState>(debugLabel: 'tabANav');
+
+// This example demonstrates how to setup nested navigation using a
+// BottomNavigationBar, where each bar item uses its own persistent navigator,
+// i.e. navigation state is maintained separately for each item. This setup also
+// enables deep linking into nested pages.
+//
+// This example also demonstrates how build a nested shell with a custom
+// container for the branch Navigators (in this case a TabBarView).
+
+void main() {
+  runApp(NestedTabNavigationExampleApp());
+}
+
+/// An example demonstrating how to use nested navigators
+class NestedTabNavigationExampleApp extends StatelessWidget {
+  /// Creates a NestedTabNavigationExampleApp
+  NestedTabNavigationExampleApp({super.key});
+
+  final GoRouter _router = GoRouter(
+    navigatorKey: _rootNavigatorKey,
+    initialLocation: '/a',
+    routes: <RouteBase>[
+      StatefulShellRoute(
+        builder: (BuildContext context, GoRouterState state,
+            StatefulNavigationShell navigationShell) {
+          // This nested StatefulShellRoute demonstrates the use of a
+          // custom container for the branch Navigators. In this implementation,
+          // no customization is done in the builder function (navigationShell
+          // itself is simply used as the Widget for the route). Instead, the
+          // navigatorContainerBuilder function below is provided to
+          // customize the container for the branch Navigators.
+          return navigationShell;
+        },
+        navigatorContainerBuilder: (BuildContext context,
+            StatefulNavigationShell navigationShell, List<Widget> children) {
+          // Returning a customized container for the branch
+          // Navigators (i.e. the `List<Widget> children` argument).
+          //
+          // See ScaffoldWithNavBar for more details on how the children
+          // are managed (using AnimatedBranchContainer).
+          return ScaffoldWithNavBar(
+              navigationShell: navigationShell, children: children);
+        },
+        branches: <StatefulShellBranch>[
+          // The route branch for the first tab of the bottom navigation bar.
+          StatefulShellBranch(
+            navigatorKey: _tabANavigatorKey,
+            routes: <RouteBase>[
+              GoRoute(
+                // The screen to display as the root in the first tab of the
+                // bottom navigation bar.
+                path: '/a',
+                builder: (BuildContext context, GoRouterState state) =>
+                    const RootScreenA(),
+                routes: <RouteBase>[
+                  // The details screen to display stacked on navigator of the
+                  // first tab. This will cover screen A but not the application
+                  // shell (bottom navigation bar).
+                  GoRoute(
+                    path: 'details',
+                    builder: (BuildContext context, GoRouterState state) =>
+                        const DetailsScreen(label: 'A'),
+                  ),
+                ],
+              ),
+            ],
+          ),
+
+          // The route branch for the third tab of the bottom navigation bar.
+          StatefulShellBranch(
+            // StatefulShellBranch will automatically use the first descendant
+            // GoRoute as the initial location of the branch. If another route
+            // is desired, specify the location of it using the defaultLocation
+            // parameter.
+            // defaultLocation: '/c2',
+            routes: <RouteBase>[
+              StatefulShellRoute(
+                builder: (BuildContext context, GoRouterState state,
+                    StatefulNavigationShell navigationShell) {
+                  // Just like with the top level StatefulShellRoute, no
+                  // customization is done in the builder function.
+                  return navigationShell;
+                },
+                navigatorContainerBuilder: (BuildContext context,
+                    StatefulNavigationShell navigationShell,
+                    List<Widget> children) {
+                  // Returning a customized container for the branch
+                  // Navigators (i.e. the `List<Widget> children` argument).
+                  //
+                  // See TabbedRootScreen for more details on how the children
+                  // are managed (in a TabBarView).
+                  return TabbedRootScreen(
+                      navigationShell: navigationShell, children: children);
+                },
+                // This bottom tab uses a nested shell, wrapping sub routes in a
+                // top TabBar.
+                branches: <StatefulShellBranch>[
+                  StatefulShellBranch(routes: <GoRoute>[
+                    GoRoute(
+                      path: '/b1',
+                      builder: (BuildContext context, GoRouterState state) =>
+                          const TabScreen(
+                              label: 'B1', detailsPath: '/b1/details'),
+                      routes: <RouteBase>[
+                        GoRoute(
+                          path: 'details',
+                          builder:
+                              (BuildContext context, GoRouterState state) =>
+                                  const DetailsScreen(
+                            label: 'B1',
+                            withScaffold: false,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ]),
+                  StatefulShellBranch(routes: <GoRoute>[
+                    GoRoute(
+                      path: '/b2',
+                      builder: (BuildContext context, GoRouterState state) =>
+                          const TabScreen(
+                              label: 'B2', detailsPath: '/b2/details'),
+                      routes: <RouteBase>[
+                        GoRoute(
+                          path: 'details',
+                          builder:
+                              (BuildContext context, GoRouterState state) =>
+                                  const DetailsScreen(
+                            label: 'B2',
+                            withScaffold: false,
+                          ),
+                        ),
+                      ],
+                    ),
+                  ]),
+                ],
+              ),
+            ],
+          ),
+        ],
+      ),
+    ],
+  );
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp.router(
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      routerConfig: _router,
+    );
+  }
+}
+
+/// Builds the "shell" for the app by building a Scaffold with a
+/// BottomNavigationBar, where [child] is placed in the body of the Scaffold.
+class ScaffoldWithNavBar extends StatelessWidget {
+  /// Constructs an [ScaffoldWithNavBar].
+  const ScaffoldWithNavBar({
+    required this.navigationShell,
+    required this.children,
+    Key? key,
+  }) : super(key: key ?? const ValueKey<String>('ScaffoldWithNavBar'));
+
+  /// The navigation shell and container for the branch Navigators.
+  final StatefulNavigationShell navigationShell;
+
+  /// The children (branch Navigators) to display in a custom container
+  /// ([AnimatedBranchContainer]).
+  final List<Widget> children;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: AnimatedBranchContainer(
+        currentIndex: navigationShell.currentIndex,
+        children: children,
+      ),
+      bottomNavigationBar: BottomNavigationBar(
+        // Here, the items of BottomNavigationBar are hard coded. In a real
+        // world scenario, the items would most likely be generated from the
+        // branches of the shell route, which can be fetched using
+        // `navigationShell.route.branches`.
+        items: const <BottomNavigationBarItem>[
+          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Section A'),
+          BottomNavigationBarItem(icon: Icon(Icons.work), label: 'Section B'),
+        ],
+        currentIndex: navigationShell.currentIndex,
+        onTap: (int index) => _onTap(context, index),
+      ),
+    );
+  }
+
+  /// Navigate to the current location of the branch at the provided index when
+  /// tapping an item in the BottomNavigationBar.
+  void _onTap(BuildContext context, int index) {
+    // When navigating to a new branch, it's recommended to use the goBranch
+    // method, as doing so makes sure the last navigation state of the
+    // Navigator for the branch is restored.
+    navigationShell.goBranch(
+      index,
+      // A common pattern when using bottom navigation bars is to support
+      // navigating to the initial location when tapping the item that is
+      // already active. This example demonstrates how to support this behavior,
+      // using the initialLocation parameter of goBranch.
+      initialLocation: index == navigationShell.currentIndex,
+    );
+  }
+}
+
+/// Custom branch Navigator container that provides animated transitions
+/// when switching branches.
+class AnimatedBranchContainer extends StatelessWidget {
+  /// Creates a AnimatedBranchContainer
+  const AnimatedBranchContainer(
+      {super.key, required this.currentIndex, required this.children});
+
+  /// The index (in [children]) of the branch Navigator to display.
+  final int currentIndex;
+
+  /// The children (branch Navigators) to display in this container.
+  final List<Widget> children;
+
+  @override
+  Widget build(BuildContext context) {
+    return Stack(
+        children: children.mapIndexed(
+      (int index, Widget navigator) {
+        return AnimatedScale(
+          scale: index == currentIndex ? 1 : 1.5,
+          duration: const Duration(milliseconds: 400),
+          child: AnimatedOpacity(
+            opacity: index == currentIndex ? 1 : 0,
+            duration: const Duration(milliseconds: 400),
+            child: _branchNavigatorWrapper(index, navigator),
+          ),
+        );
+      },
+    ).toList());
+  }
+
+  Widget _branchNavigatorWrapper(int index, Widget navigator) => IgnorePointer(
+        ignoring: index != currentIndex,
+        child: TickerMode(
+          enabled: index == currentIndex,
+          child: navigator,
+        ),
+      );
+}
+
+/// Widget for the root page for the first section of the bottom navigation bar.
+class RootScreenA extends StatelessWidget {
+  /// Creates a RootScreenA
+  const RootScreenA({super.key});
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: const Text('Root of section A'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: <Widget>[
+            Text('Screen A', style: Theme.of(context).textTheme.titleLarge),
+            const Padding(padding: EdgeInsets.all(4)),
+            TextButton(
+              onPressed: () {
+                GoRouter.of(context).go('/a/details');
+              },
+              child: const Text('View details'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// The details screen for either the A or B screen.
+class DetailsScreen extends StatefulWidget {
+  /// Constructs a [DetailsScreen].
+  const DetailsScreen({
+    required this.label,
+    this.param,
+    this.withScaffold = true,
+    super.key,
+  });
+
+  /// The label to display in the center of the screen.
+  final String label;
+
+  /// Optional param
+  final String? param;
+
+  /// Wrap in scaffold
+  final bool withScaffold;
+
+  @override
+  State<StatefulWidget> createState() => DetailsScreenState();
+}
+
+/// The state for DetailsScreen
+class DetailsScreenState extends State<DetailsScreen> {
+  int _counter = 0;
+
+  @override
+  Widget build(BuildContext context) {
+    if (widget.withScaffold) {
+      return Scaffold(
+        appBar: AppBar(
+          title: Text('Details Screen - ${widget.label}'),
+        ),
+        body: _build(context),
+      );
+    } else {
+      return Container(
+        color: Theme.of(context).scaffoldBackgroundColor,
+        child: _build(context),
+      );
+    }
+  }
+
+  Widget _build(BuildContext context) {
+    return Center(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          Text('Details for ${widget.label} - Counter: $_counter',
+              style: Theme.of(context).textTheme.titleLarge),
+          const Padding(padding: EdgeInsets.all(4)),
+          TextButton(
+            onPressed: () {
+              setState(() {
+                _counter++;
+              });
+            },
+            child: const Text('Increment counter'),
+          ),
+          const Padding(padding: EdgeInsets.all(8)),
+          if (widget.param != null)
+            Text('Parameter: ${widget.param!}',
+                style: Theme.of(context).textTheme.titleMedium),
+          const Padding(padding: EdgeInsets.all(8)),
+          if (!widget.withScaffold) ...<Widget>[
+            const Padding(padding: EdgeInsets.all(16)),
+            TextButton(
+              onPressed: () {
+                GoRouter.of(context).pop();
+              },
+              child: const Text('< Back',
+                  style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
+            ),
+          ]
+        ],
+      ),
+    );
+  }
+}
+
+/// Builds a nested shell using a [TabBar] and [TabBarView].
+class TabbedRootScreen extends StatefulWidget {
+  /// Constructs a TabbedRootScreen
+  const TabbedRootScreen(
+      {required this.navigationShell, required this.children, super.key});
+
+  /// The current state of the parent StatefulShellRoute.
+  final StatefulNavigationShell navigationShell;
+
+  /// The children (branch Navigators) to display in the [TabBarView].
+  final List<Widget> children;
+
+  @override
+  State<StatefulWidget> createState() => _TabbedRootScreenState();
+}
+
+class _TabbedRootScreenState extends State<TabbedRootScreen>
+    with SingleTickerProviderStateMixin {
+  late final TabController _tabController = TabController(
+      length: widget.children.length,
+      vsync: this,
+      initialIndex: widget.navigationShell.currentIndex);
+
+  @override
+  void didUpdateWidget(covariant TabbedRootScreen oldWidget) {
+    super.didUpdateWidget(oldWidget);
+    _tabController.index = widget.navigationShell.currentIndex;
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    final List<Tab> tabs = widget.children
+        .mapIndexed((int i, _) => Tab(text: 'Tab ${i + 1}'))
+        .toList();
+
+    return Scaffold(
+      appBar: AppBar(
+          title: const Text('Root of Section B (nested TabBar shell)'),
+          bottom: TabBar(
+            controller: _tabController,
+            tabs: tabs,
+            onTap: (int tappedIndex) => _onTabTap(context, tappedIndex),
+          )),
+      body: TabBarView(
+        controller: _tabController,
+        children: widget.children,
+      ),
+    );
+  }
+
+  void _onTabTap(BuildContext context, int index) {
+    widget.navigationShell.goBranch(index);
+  }
+}
+
+/// Widget for the pages in the top tab bar.
+class TabScreen extends StatelessWidget {
+  /// Creates a RootScreen
+  const TabScreen({required this.label, required this.detailsPath, super.key});
+
+  /// The label
+  final String label;
+
+  /// The path to the detail page
+  final String detailsPath;
+
+  @override
+  Widget build(BuildContext context) {
+    return Center(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          Text('Screen $label', style: Theme.of(context).textTheme.titleLarge),
+          const Padding(padding: EdgeInsets.all(4)),
+          TextButton(
+            onPressed: () {
+              GoRouter.of(context).go(detailsPath);
+            },
+            child: const Text('View details'),
+          ),
+        ],
+      ),
+    );
+  }
+}

lib/13/go/others/error_screen.dart

@@ -0,0 +1,110 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+void main() => runApp(App());
+
+/// The main app.
+class App extends StatelessWidget {
+  /// Creates an [App].
+  App({super.key});
+
+  /// The title of the app.
+  static const String title = 'GoRouter Example: Custom Error Screen';
+
+  @override
+  Widget build(BuildContext context) => MaterialApp.router(
+        routerConfig: _router,
+        title: title,
+      );
+
+  final GoRouter _router = GoRouter(
+    routes: <GoRoute>[
+      GoRoute(
+        path: '/',
+        builder: (BuildContext context, GoRouterState state) =>
+            const Page1Screen(),
+      ),
+      GoRoute(
+        path: '/page2',
+        builder: (BuildContext context, GoRouterState state) =>
+            const Page2Screen(),
+      ),
+    ],
+    errorBuilder: (BuildContext context, GoRouterState state) =>
+        ErrorScreen(state.error!),
+  );
+}
+
+/// The screen of the first page.
+class Page1Screen extends StatelessWidget {
+  /// Creates a [Page1Screen].
+  const Page1Screen({super.key});
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        appBar: AppBar(title: const Text(App.title)),
+        body: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              ElevatedButton(
+                onPressed: () => context.go('/page2'),
+                child: const Text('Go to page 2'),
+              ),
+            ],
+          ),
+        ),
+      );
+}
+
+/// The screen of the second page.
+class Page2Screen extends StatelessWidget {
+  /// Creates a [Page2Screen].
+  const Page2Screen({super.key});
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        appBar: AppBar(title: const Text(App.title)),
+        body: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              ElevatedButton(
+                onPressed: () => context.go('/'),
+                child: const Text('Go to home page'),
+              ),
+            ],
+          ),
+        ),
+      );
+}
+
+/// The screen of the error page.
+class ErrorScreen extends StatelessWidget {
+  /// Creates an [ErrorScreen].
+  const ErrorScreen(this.error, {super.key});
+
+  /// The error to display.
+  final Exception error;
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        appBar: AppBar(title: const Text('My "Page Not Found" Screen')),
+        body: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              SelectableText(error.toString()),
+              TextButton(
+                onPressed: () => context.go('/'),
+                child: const Text('Home'),
+              ),
+            ],
+          ),
+        ),
+      );
+}

lib/13/go/others/extra_param.dart

@@ -0,0 +1,133 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+/// Family data class.
+class Family {
+  /// Create a family.
+  const Family({required this.name, required this.people});
+
+  /// The last name of the family.
+  final String name;
+
+  /// The people in the family.
+  final Map<String, Person> people;
+}
+
+/// Person data class.
+class Person {
+  /// Creates a person.
+  const Person({required this.name, required this.age});
+
+  /// The first name of the person.
+  final String name;
+
+  /// The age of the person.
+  final int age;
+}
+
+const Map<String, Family> _families = <String, Family>{
+  'f1': Family(
+    name: 'Doe',
+    people: <String, Person>{
+      'p1': Person(name: 'Jane', age: 23),
+      'p2': Person(name: 'John', age: 6),
+    },
+  ),
+  'f2': Family(
+    name: 'Wong',
+    people: <String, Person>{
+      'p1': Person(name: 'June', age: 51),
+      'p2': Person(name: 'Xin', age: 44),
+    },
+  ),
+};
+
+void main() => runApp(App());
+
+/// The main app.
+class App extends StatelessWidget {
+  /// Creates an [App].
+  App({super.key});
+
+  /// The title of the app.
+  static const String title = 'GoRouter Example: Extra Parameter';
+
+  @override
+  Widget build(BuildContext context) => MaterialApp.router(
+        routerConfig: _router,
+        title: title,
+      );
+
+  late final GoRouter _router = GoRouter(
+    routes: <GoRoute>[
+      GoRoute(
+        name: 'home',
+        path: '/',
+        builder: (BuildContext context, GoRouterState state) =>
+            const HomeScreen(),
+        routes: <GoRoute>[
+          GoRoute(
+            name: 'family',
+            path: 'family',
+            builder: (BuildContext context, GoRouterState state) {
+              final Map<String, Object> params =
+                  state.extra! as Map<String, String>;
+              final String fid = params['fid']! as String;
+              return FamilyScreen(fid: fid);
+            },
+          ),
+        ],
+      ),
+    ],
+  );
+}
+
+/// The home screen that shows a list of families.
+class HomeScreen extends StatelessWidget {
+  /// Creates a [HomeScreen].
+  const HomeScreen({super.key});
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        appBar: AppBar(title: const Text(App.title)),
+        body: ListView(
+          children: <Widget>[
+            for (final MapEntry<String, Family> entry in _families.entries)
+              ListTile(
+                title: Text(entry.value.name),
+                onTap: () => context.goNamed('family',
+                    extra: <String, String>{'fid': entry.key}),
+              )
+          ],
+        ),
+      );
+}
+
+/// The screen that shows a list of persons in a family.
+class FamilyScreen extends StatelessWidget {
+  /// Creates a [FamilyScreen].
+  const FamilyScreen({required this.fid, super.key});
+
+  /// The family to display.
+  final String fid;
+
+  @override
+  Widget build(BuildContext context) {
+    final Map<String, Person> people = _families[fid]!.people;
+    return Scaffold(
+      appBar: AppBar(title: Text(_families[fid]!.name)),
+      body: ListView(
+        children: <Widget>[
+          for (final Person p in people.values)
+            ListTile(
+              title: Text(p.name),
+            ),
+        ],
+      ),
+    );
+  }
+}

lib/13/go/others/init_loc.dart

@@ -0,0 +1,110 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+void main() => runApp(App());
+
+/// The main app.
+class App extends StatelessWidget {
+  /// Creates an [App].
+  App({super.key});
+
+  /// The title of the app.
+  static const String title = 'GoRouter Example: Initial Location';
+
+  @override
+  Widget build(BuildContext context) => MaterialApp.router(
+        routerConfig: _router,
+        title: title,
+      );
+
+  final GoRouter _router = GoRouter(
+    initialLocation: '/page3',
+    routes: <GoRoute>[
+      GoRoute(
+        path: '/',
+        builder: (BuildContext context, GoRouterState state) =>
+            const Page1Screen(),
+      ),
+      GoRoute(
+        path: '/page2',
+        builder: (BuildContext context, GoRouterState state) =>
+            const Page2Screen(),
+      ),
+      GoRoute(
+        path: '/page3',
+        builder: (BuildContext context, GoRouterState state) =>
+            const Page3Screen(),
+      ),
+    ],
+  );
+}
+
+/// The screen of the first page.
+class Page1Screen extends StatelessWidget {
+  /// Creates a [Page1Screen].
+  const Page1Screen({super.key});
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        appBar: AppBar(title: const Text(App.title)),
+        body: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              ElevatedButton(
+                onPressed: () => context.go('/page2'),
+                child: const Text('Go to page 2'),
+              ),
+            ],
+          ),
+        ),
+      );
+}
+
+/// The screen of the second page.
+class Page2Screen extends StatelessWidget {
+  /// Creates a [Page2Screen].
+  const Page2Screen({super.key});
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        appBar: AppBar(title: const Text(App.title)),
+        body: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              ElevatedButton(
+                onPressed: () => context.go('/'),
+                child: const Text('Go to home page'),
+              ),
+            ],
+          ),
+        ),
+      );
+}
+
+/// The screen of the third page.
+class Page3Screen extends StatelessWidget {
+  /// Creates a [Page3Screen].
+  const Page3Screen({super.key});
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        appBar: AppBar(title: const Text(App.title)),
+        body: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              ElevatedButton(
+                onPressed: () => context.go('/page2'),
+                child: const Text('Go to page 2'),
+              ),
+            ],
+          ),
+        ),
+      );
+}

lib/13/go/others/nav_observer.dart

@@ -0,0 +1,167 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+import 'package:logging/logging.dart';
+
+void main() => runApp(App());
+
+/// The main app.
+class App extends StatelessWidget {
+  /// Creates an [App].
+  App({super.key});
+
+  /// The title of the app.
+  static const String title = 'GoRouter Example: Navigator Observer';
+
+  @override
+  Widget build(BuildContext context) => MaterialApp.router(
+        routerConfig: _router,
+        title: title,
+      );
+
+  final GoRouter _router = GoRouter(
+    observers: <NavigatorObserver>[MyNavObserver()],
+    routes: <GoRoute>[
+      GoRoute(
+        // if there's no name, path will be used as name for observers
+        path: '/',
+        builder: (BuildContext context, GoRouterState state) =>
+            const Page1Screen(),
+        routes: <GoRoute>[
+          GoRoute(
+            name: 'page2',
+            path: 'page2/:p1',
+            builder: (BuildContext context, GoRouterState state) =>
+                const Page2Screen(),
+            routes: <GoRoute>[
+              GoRoute(
+                name: 'page3',
+                path: 'page3',
+                builder: (BuildContext context, GoRouterState state) =>
+                    const Page3Screen(),
+              ),
+            ],
+          ),
+        ],
+      ),
+    ],
+  );
+}
+
+/// The Navigator observer.
+class MyNavObserver extends NavigatorObserver {
+  /// Creates a [MyNavObserver].
+  MyNavObserver() {
+    log.onRecord.listen((LogRecord e) => debugPrint('$e'));
+  }
+
+  /// The logged message.
+  final Logger log = Logger('MyNavObserver');
+
+  @override
+  void didPush(Route<dynamic> route, Route<dynamic>? previousRoute) =>
+      log.info('didPush: ${route.str}, previousRoute= ${previousRoute?.str}');
+
+  @override
+  void didPop(Route<dynamic> route, Route<dynamic>? previousRoute) =>
+      log.info('didPop: ${route.str}, previousRoute= ${previousRoute?.str}');
+
+  @override
+  void didRemove(Route<dynamic> route, Route<dynamic>? previousRoute) =>
+      log.info('didRemove: ${route.str}, previousRoute= ${previousRoute?.str}');
+
+  @override
+  void didReplace({Route<dynamic>? newRoute, Route<dynamic>? oldRoute}) =>
+      log.info('didReplace: new= ${newRoute?.str}, old= ${oldRoute?.str}');
+
+  @override
+  void didStartUserGesture(
+    Route<dynamic> route,
+    Route<dynamic>? previousRoute,
+  ) =>
+      log.info('didStartUserGesture: ${route.str}, '
+          'previousRoute= ${previousRoute?.str}');
+
+  @override
+  void didStopUserGesture() => log.info('didStopUserGesture');
+}
+
+extension on Route<dynamic> {
+  String get str => 'route(${settings.name}: ${settings.arguments})';
+}
+
+/// The screen of the first page.
+class Page1Screen extends StatelessWidget {
+  /// Creates a [Page1Screen].
+  const Page1Screen({super.key});
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        appBar: AppBar(title: const Text(App.title)),
+        body: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              ElevatedButton(
+                onPressed: () => context.goNamed(
+                  'page2',
+                  pathParameters: <String, String>{'p1': 'pv1'},
+                  queryParameters: <String, String>{'q1': 'qv1'},
+                ),
+                child: const Text('Go to page 2'),
+              ),
+            ],
+          ),
+        ),
+      );
+}
+
+/// The screen of the second page.
+class Page2Screen extends StatelessWidget {
+  /// Creates a [Page2Screen].
+  const Page2Screen({super.key});
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        appBar: AppBar(title: const Text(App.title)),
+        body: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              ElevatedButton(
+                onPressed: () => context.goNamed(
+                  'page3',
+                  pathParameters: <String, String>{'p1': 'pv2'},
+                ),
+                child: const Text('Go to page 3'),
+              ),
+            ],
+          ),
+        ),
+      );
+}
+
+/// The screen of the third page.
+class Page3Screen extends StatelessWidget {
+  /// Creates a [Page3Screen].
+  const Page3Screen({super.key});
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        appBar: AppBar(title: const Text(App.title)),
+        body: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              ElevatedButton(
+                onPressed: () => context.go('/'),
+                child: const Text('Go to home page'),
+              ),
+            ],
+          ),
+        ),
+      );
+}

lib/13/go/others/push.dart

@@ -0,0 +1,101 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+void main() => runApp(App());
+
+/// The main app.
+class App extends StatelessWidget {
+  /// Creates an [App].
+  App({super.key});
+
+  /// The title of the app.
+  static const String title = 'GoRouter Example: Push';
+
+  @override
+  Widget build(BuildContext context) => MaterialApp.router(
+        routerConfig: _router,
+        title: title,
+      );
+
+  late final GoRouter _router = GoRouter(
+    routes: <GoRoute>[
+      GoRoute(
+        path: '/',
+        builder: (BuildContext context, GoRouterState state) =>
+            const Page1ScreenWithPush(),
+      ),
+      GoRoute(
+        path: '/page2',
+        builder: (BuildContext context, GoRouterState state) =>
+            Page2ScreenWithPush(
+          int.parse(state.uri.queryParameters['push-count']!),
+        ),
+      ),
+    ],
+  );
+}
+
+/// The screen of the first page.
+class Page1ScreenWithPush extends StatelessWidget {
+  /// Creates a [Page1ScreenWithPush].
+  const Page1ScreenWithPush({super.key});
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        appBar: AppBar(title: const Text('${App.title}: page 1')),
+        body: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              ElevatedButton(
+                onPressed: () => context.push('/page2?push-count=1'),
+                child: const Text('Push page 2'),
+              ),
+            ],
+          ),
+        ),
+      );
+}
+
+/// The screen of the second page.
+class Page2ScreenWithPush extends StatelessWidget {
+  /// Creates a [Page2ScreenWithPush].
+  const Page2ScreenWithPush(this.pushCount, {super.key});
+
+  /// The push count.
+  final int pushCount;
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        appBar: AppBar(
+          title: Text('${App.title}: page 2 w/ push count $pushCount'),
+        ),
+        body: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              Padding(
+                padding: const EdgeInsets.all(8),
+                child: ElevatedButton(
+                  onPressed: () => context.go('/'),
+                  child: const Text('Go to home page'),
+                ),
+              ),
+              Padding(
+                padding: const EdgeInsets.all(8),
+                child: ElevatedButton(
+                  onPressed: () => context.push(
+                    '/page2?push-count=${pushCount + 1}',
+                  ),
+                  child: const Text('Push page 2 (again)'),
+                ),
+              ),
+            ],
+          ),
+        ),
+      );
+}

lib/13/go/others/router_neglect.dart

@@ -0,0 +1,95 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+void main() => runApp(App());
+
+/// The main app.
+class App extends StatelessWidget {
+  /// Creates an [App].
+  App({super.key});
+
+  /// The title of the app.
+  static const String title = 'GoRouter Example: Router neglect';
+
+  @override
+  Widget build(BuildContext context) => MaterialApp.router(
+        routerConfig: _router,
+        title: title,
+      );
+
+  final GoRouter _router = GoRouter(
+    // turn off history tracking in the browser for this navigation
+    routerNeglect: true,
+    routes: <GoRoute>[
+      GoRoute(
+        path: '/',
+        builder: (BuildContext context, GoRouterState state) =>
+            const Page1Screen(),
+      ),
+      GoRoute(
+        path: '/page2',
+        builder: (BuildContext context, GoRouterState state) =>
+            const Page2Screen(),
+      ),
+    ],
+  );
+}
+
+/// The screen of the first page.
+class Page1Screen extends StatelessWidget {
+  /// Creates a [Page1Screen].
+  const Page1Screen({super.key});
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        appBar: AppBar(title: const Text(App.title)),
+        body: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              ElevatedButton(
+                onPressed: () => context.go('/page2'),
+                child: const Text('Go to page 2'),
+              ),
+              const SizedBox(height: 8),
+              ElevatedButton(
+                // turn off history tracking in the browser for this navigation;
+                // note that this isn't necessary when you've set routerNeglect
+                // but it does illustrate the technique
+                onPressed: () => Router.neglect(
+                  context,
+                  () => context.push('/page2'),
+                ),
+                child: const Text('Push page 2'),
+              ),
+            ],
+          ),
+        ),
+      );
+}
+
+/// The screen of the second page.
+class Page2Screen extends StatelessWidget {
+  /// Creates a [Page2Screen].
+  const Page2Screen({super.key});
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        appBar: AppBar(title: const Text(App.title)),
+        body: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              ElevatedButton(
+                onPressed: () => context.go('/'),
+                child: const Text('Go to home page'),
+              ),
+            ],
+          ),
+        ),
+      );
+}

lib/13/go/others/state_restoration.dart

@@ -0,0 +1,102 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+void main() => runApp(
+      const RootRestorationScope(restorationId: 'root', child: App()),
+    );
+
+/// The main app.
+class App extends StatefulWidget {
+  /// Creates an [App].
+  const App({super.key});
+
+  /// The title of the app.
+  static const String title = 'GoRouter Example: State Restoration';
+
+  @override
+  State<App> createState() => _AppState();
+}
+
+class _AppState extends State<App> with RestorationMixin {
+  @override
+  String get restorationId => 'wrapper';
+
+  @override
+  void restoreState(RestorationBucket? oldBucket, bool initialRestore) {
+    // Implement restoreState for your app
+  }
+
+  @override
+  Widget build(BuildContext context) => MaterialApp.router(
+        routerConfig: _router,
+        title: App.title,
+        restorationScopeId: 'app',
+      );
+
+  final GoRouter _router = GoRouter(
+    routes: <GoRoute>[
+      // restorationId set for the route automatically
+      GoRoute(
+        path: '/',
+        builder: (BuildContext context, GoRouterState state) =>
+            const Page1Screen(),
+      ),
+
+      // restorationId set for the route automatically
+      GoRoute(
+        path: '/page2',
+        builder: (BuildContext context, GoRouterState state) =>
+            const Page2Screen(),
+      ),
+    ],
+    restorationScopeId: 'router',
+  );
+}
+
+/// The screen of the first page.
+class Page1Screen extends StatelessWidget {
+  /// Creates a [Page1Screen].
+  const Page1Screen({super.key});
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        appBar: AppBar(title: const Text(App.title)),
+        body: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              ElevatedButton(
+                onPressed: () => context.go('/page2'),
+                child: const Text('Go to page 2'),
+              ),
+            ],
+          ),
+        ),
+      );
+}
+
+/// The screen of the second page.
+class Page2Screen extends StatelessWidget {
+  /// Creates a [Page2Screen].
+  const Page2Screen({super.key});
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        appBar: AppBar(title: const Text(App.title)),
+        body: Center(
+          child: Column(
+            mainAxisAlignment: MainAxisAlignment.center,
+            children: <Widget>[
+              ElevatedButton(
+                onPressed: () => context.go('/'),
+                child: const Text('Go to home page'),
+              ),
+            ],
+          ),
+        ),
+      );
+}

lib/13/go/others/stateful_shell_state_restoration.dart

@@ -0,0 +1,236 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+void main() => runApp(RestorableStatefulShellRouteExampleApp());
+
+/// An example demonstrating how to use StatefulShellRoute with state
+/// restoration.
+class RestorableStatefulShellRouteExampleApp extends StatelessWidget {
+  /// Creates a NestedTabNavigationExampleApp
+  RestorableStatefulShellRouteExampleApp({super.key});
+
+  final GoRouter _router = GoRouter(
+    initialLocation: '/a',
+    restorationScopeId: 'router',
+    routes: <RouteBase>[
+      StatefulShellRoute.indexedStack(
+        restorationScopeId: 'shell1',
+        pageBuilder: (BuildContext context, GoRouterState state,
+            StatefulNavigationShell navigationShell) {
+          return MaterialPage<void>(
+              restorationId: 'shellWidget1',
+              child: ScaffoldWithNavBar(navigationShell: navigationShell));
+        },
+        branches: <StatefulShellBranch>[
+          // The route branch for the first tab of the bottom navigation bar.
+          StatefulShellBranch(
+            restorationScopeId: 'branchA',
+            routes: <RouteBase>[
+              GoRoute(
+                // The screen to display as the root in the first tab of the
+                // bottom navigation bar.
+                path: '/a',
+                pageBuilder: (BuildContext context, GoRouterState state) =>
+                    const MaterialPage<void>(
+                        restorationId: 'screenA',
+                        child:
+                            RootScreen(label: 'A', detailsPath: '/a/details')),
+                routes: <RouteBase>[
+                  // The details screen to display stacked on navigator of the
+                  // first tab. This will cover screen A but not the application
+                  // shell (bottom navigation bar).
+                  GoRoute(
+                    path: 'details',
+                    pageBuilder: (BuildContext context, GoRouterState state) =>
+                        const MaterialPage<void>(
+                            restorationId: 'screenADetail',
+                            child: DetailsScreen(label: 'A')),
+                  ),
+                ],
+              ),
+            ],
+          ),
+          // The route branch for the second tab of the bottom navigation bar.
+          StatefulShellBranch(
+            restorationScopeId: 'branchB',
+            routes: <RouteBase>[
+              GoRoute(
+                // The screen to display as the root in the second tab of the
+                // bottom navigation bar.
+                path: '/b',
+                pageBuilder: (BuildContext context, GoRouterState state) =>
+                    const MaterialPage<void>(
+                        restorationId: 'screenB',
+                        child:
+                            RootScreen(label: 'B', detailsPath: '/b/details')),
+                routes: <RouteBase>[
+                  // The details screen to display stacked on navigator of the
+                  // first tab. This will cover screen A but not the application
+                  // shell (bottom navigation bar).
+                  GoRoute(
+                    path: 'details',
+                    pageBuilder: (BuildContext context, GoRouterState state) =>
+                        const MaterialPage<void>(
+                            restorationId: 'screenBDetail',
+                            child: DetailsScreen(label: 'B')),
+                  ),
+                ],
+              ),
+            ],
+          ),
+        ],
+      ),
+    ],
+  );
+
+  @override
+  Widget build(BuildContext context) {
+    return MaterialApp.router(
+      restorationScopeId: 'app',
+      title: 'Flutter Demo',
+      theme: ThemeData(
+        primarySwatch: Colors.blue,
+      ),
+      routerConfig: _router,
+    );
+  }
+}
+
+/// Builds the "shell" for the app by building a Scaffold with a
+/// BottomNavigationBar, where [child] is placed in the body of the Scaffold.
+class ScaffoldWithNavBar extends StatelessWidget {
+  /// Constructs an [ScaffoldWithNavBar].
+  const ScaffoldWithNavBar({
+    required this.navigationShell,
+    Key? key,
+  }) : super(key: key ?? const ValueKey<String>('ScaffoldWithNavBar'));
+
+  /// The navigation shell and container for the branch Navigators.
+  final StatefulNavigationShell navigationShell;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      body: navigationShell,
+      bottomNavigationBar: BottomNavigationBar(
+        items: const <BottomNavigationBarItem>[
+          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Section A'),
+          BottomNavigationBarItem(icon: Icon(Icons.work), label: 'Section B'),
+        ],
+        currentIndex: navigationShell.currentIndex,
+        onTap: (int tappedIndex) => navigationShell.goBranch(tappedIndex),
+      ),
+    );
+  }
+}
+
+/// Widget for the root/initial pages in the bottom navigation bar.
+class RootScreen extends StatelessWidget {
+  /// Creates a RootScreen
+  const RootScreen({
+    required this.label,
+    required this.detailsPath,
+    super.key,
+  });
+
+  /// The label
+  final String label;
+
+  /// The path to the detail page
+  final String detailsPath;
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('Root of section $label'),
+      ),
+      body: Center(
+        child: Column(
+          mainAxisSize: MainAxisSize.min,
+          children: <Widget>[
+            Text('Screen $label',
+                style: Theme.of(context).textTheme.titleLarge),
+            const Padding(padding: EdgeInsets.all(4)),
+            TextButton(
+              onPressed: () {
+                GoRouter.of(context).go(detailsPath);
+              },
+              child: const Text('View details'),
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+}
+
+/// The details screen for either the A or B screen.
+class DetailsScreen extends StatefulWidget {
+  /// Constructs a [DetailsScreen].
+  const DetailsScreen({
+    required this.label,
+    super.key,
+  });
+
+  /// The label to display in the center of the screen.
+  final String label;
+
+  @override
+  State<StatefulWidget> createState() => DetailsScreenState();
+}
+
+/// The state for DetailsScreen
+class DetailsScreenState extends State<DetailsScreen> with RestorationMixin {
+  final RestorableInt _counter = RestorableInt(0);
+
+  @override
+  String? get restorationId => 'DetailsScreen-${widget.label}';
+
+  @override
+  void restoreState(RestorationBucket? oldBucket, bool initialRestore) {
+    registerForRestoration(_counter, 'counter');
+  }
+
+  @override
+  void dispose() {
+    super.dispose();
+    _counter.dispose();
+  }
+
+  @override
+  Widget build(BuildContext context) {
+    return Scaffold(
+      appBar: AppBar(
+        title: Text('Details Screen - ${widget.label}'),
+      ),
+      body: _build(context),
+    );
+  }
+
+  Widget _build(BuildContext context) {
+    return Center(
+      child: Column(
+        mainAxisSize: MainAxisSize.min,
+        children: <Widget>[
+          Text('Details for ${widget.label} - Counter: ${_counter.value}',
+              style: Theme.of(context).textTheme.titleLarge),
+          const Padding(padding: EdgeInsets.all(4)),
+          TextButton(
+            onPressed: () {
+              setState(() {
+                _counter.value++;
+              });
+            },
+            child: const Text('Increment counter'),
+          ),
+          const Padding(padding: EdgeInsets.all(8)),
+        ],
+      ),
+    );
+  }
+}

lib/13/go/others/transitions.dart

@@ -0,0 +1,163 @@
+// Copyright 2013 The Flutter Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+import 'package:flutter/material.dart';
+import 'package:go_router/go_router.dart';
+
+void main() => runApp(App());
+
+/// The main app.
+class App extends StatelessWidget {
+  /// Creates an [App].
+  App({super.key});
+
+  /// The title of the app.
+  static const String title = 'GoRouter Example: Custom Transitions';
+
+  @override
+  Widget build(BuildContext context) => MaterialApp.router(
+        routerConfig: _router,
+        title: title,
+      );
+
+  final GoRouter _router = GoRouter(
+    routes: <GoRoute>[
+      GoRoute(
+        path: '/',
+        redirect: (_, __) => '/none',
+      ),
+      GoRoute(
+        path: '/fade',
+        pageBuilder: (BuildContext context, GoRouterState state) =>
+            CustomTransitionPage<void>(
+          key: state.pageKey,
+          child: const ExampleTransitionsScreen(
+            kind: 'fade',
+            color: Colors.red,
+          ),
+          transitionsBuilder: (BuildContext context,
+                  Animation<double> animation,
+                  Animation<double> secondaryAnimation,
+                  Widget child) =>
+              FadeTransition(opacity: animation, child: child),
+        ),
+      ),
+      GoRoute(
+        path: '/scale',
+        pageBuilder: (BuildContext context, GoRouterState state) =>
+            CustomTransitionPage<void>(
+          key: state.pageKey,
+          child: const ExampleTransitionsScreen(
+            kind: 'scale',
+            color: Colors.green,
+          ),
+          transitionsBuilder: (BuildContext context,
+                  Animation<double> animation,
+                  Animation<double> secondaryAnimation,
+                  Widget child) =>
+              ScaleTransition(scale: animation, child: child),
+        ),
+      ),
+      GoRoute(
+        path: '/slide',
+        pageBuilder: (BuildContext context, GoRouterState state) =>
+            CustomTransitionPage<void>(
+          key: state.pageKey,
+          child: const ExampleTransitionsScreen(
+            kind: 'slide',
+            color: Colors.yellow,
+          ),
+          transitionsBuilder: (BuildContext context,
+                  Animation<double> animation,
+                  Animation<double> secondaryAnimation,
+                  Widget child) =>
+              SlideTransition(
+            position: animation.drive(
+              Tween<Offset>(
+                begin: const Offset(0.25, 0.25),
+                end: Offset.zero,
+              ).chain(CurveTween(curve: Curves.easeIn)),
+            ),
+            child: child,
+          ),
+        ),
+      ),
+      GoRoute(
+        path: '/rotation',
+        pageBuilder: (BuildContext context, GoRouterState state) =>
+            CustomTransitionPage<void>(
+          key: state.pageKey,
+          child: const ExampleTransitionsScreen(
+            kind: 'rotation',
+            color: Colors.purple,
+          ),
+          transitionsBuilder: (BuildContext context,
+                  Animation<double> animation,
+                  Animation<double> secondaryAnimation,
+                  Widget child) =>
+              RotationTransition(turns: animation, child: child),
+        ),
+      ),
+      GoRoute(
+        path: '/none',
+        pageBuilder: (BuildContext context, GoRouterState state) =>
+            NoTransitionPage<void>(
+          key: state.pageKey,
+          child: const ExampleTransitionsScreen(
+            kind: 'none',
+            color: Colors.white,
+          ),
+        ),
+      ),
+    ],
+  );
+}
+
+/// An Example transitions screen.
+class ExampleTransitionsScreen extends StatelessWidget {
+  /// Creates an [ExampleTransitionsScreen].
+  const ExampleTransitionsScreen({
+    required this.color,
+    required this.kind,
+    super.key,
+  });
+
+  /// The available transition kinds.
+  static final List<String> kinds = <String>[
+    'fade',
+    'scale',
+    'slide',
+    'rotation',
+    'none'
+  ];
+
+  /// The color of the container.
+  final Color color;
+
+  /// The transition kind.
+  final String kind;
+
+  @override
+  Widget build(BuildContext context) => Scaffold(
+        appBar: AppBar(title: Text('${App.title}: $kind')),
+        body: Container(
+          color: color,
+          child: Center(
+            child: Column(
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: <Widget>[
+                for (final String kind in kinds)
+                  Padding(
+                    padding: const EdgeInsets.all(8),
+                    child: ElevatedButton(
+                      onPressed: () => context.go('/$kind'),
+                      child: Text('$kind transition'),
+                    ),
+                  )
+              ],
+            ),
+          ),
+        ),
+      );
+}