Migrate `veggieseasons` to `go_router` (#1544)

* add go_router

* wip migration to go_router

* small fixes

* home screen cleanup

* remove unused

* small fixes

* details should be fullscreen dialog

* remove comment

* fix navigation outside the shell by using the correct navigation keys

* add restoration id to all pages

* test passing, but parts are commented out, wip

* uncommented more test code

* Add TODOs

* fix lint issues

* fix tests

* use FadeTransitionPage

* remove unnecessary builders

* FadeTransitionPage same as CustomTransitionPage

* add comments regarding relative routes

* add missing pageKey

* add missing const

---------

Co-authored-by: Brett Morgan <brettmorgan@google.com>

veggieseasons/lib/main.dart

@@ -7,13 +7,21 @@ import 'dart:io';
 import 'package:flutter/cupertino.dart';
 import 'package:flutter/foundation.dart';
 import 'package:flutter/services.dart' show DeviceOrientation, SystemChrome;
+import 'package:go_router/go_router.dart';
 import 'package:provider/provider.dart';
 import 'package:veggieseasons/data/app_state.dart';
 import 'package:veggieseasons/data/preferences.dart';
 import 'package:veggieseasons/screens/home.dart';
 import 'package:veggieseasons/styles.dart';
+import 'package:veggieseasons/widgets/fade_transition_page.dart';
 import 'package:window_size/window_size.dart';
 
+import 'screens/details.dart';
+import 'screens/favorites.dart';
+import 'screens/list.dart';
+import 'screens/search.dart';
+import 'screens/settings.dart';
+
 void main() {
   WidgetsFlutterBinding.ensureInitialized();
   SystemChrome.setPreferredOrientations([
@@ -48,6 +56,9 @@ void setupWindow() {
   }
 }
 
+final _rootNavigatorKey = GlobalKey<NavigatorState>();
+final _shellNavigatorKey = GlobalKey<NavigatorState>();
+
 class VeggieApp extends StatefulWidget {
   const VeggieApp({super.key});
 
@@ -83,12 +94,136 @@ class _VeggieAppState extends State<VeggieApp> with RestorationMixin {
           create: (_) => Preferences()..load(),
         ),
       ],
-      child: CupertinoApp(
+      child: CupertinoApp.router(
         theme: Styles.veggieThemeData,
         debugShowCheckedModeBanner: false,
-        home: const HomeScreen(restorationId: 'home'),
         restorationScopeId: 'app',
+        routerConfig: GoRouter(
+          navigatorKey: _rootNavigatorKey,
+          restorationScopeId: 'router',
+          initialLocation: '/list',
+          redirect: (context, state) {
+            if (state.path == '/') {
+              return '/list';
+            }
+            return null;
+          },
+          debugLogDiagnostics: true,
+          routes: [
+            ShellRoute(
+              navigatorKey: _shellNavigatorKey,
+              pageBuilder: (context, state, child) {
+                return CupertinoPage(
+                  restorationId: 'router.shell',
+                  child: HomeScreen(
+                    restorationId: 'home',
+                    child: child,
+                    onTap: (index) {
+                      if (index == 0) {
+                        context.go('/list');
+                      } else if (index == 1) {
+                        context.go('/favorites');
+                      } else if (index == 2) {
+                        context.go('/search');
+                      } else {
+                        context.go('/settings');
+                      }
+                    },
+                  ),
+                );
+              },
+              routes: [
+                GoRoute(
+                  path: '/list',
+                  pageBuilder: (context, state) {
+                    return FadeTransitionPage(
+                      key: state.pageKey,
+                      restorationId: 'route.list',
+                      child: const ListScreen(restorationId: 'list'),
+                    );
+                  },
+                  routes: [
+                    _buildDetailsRoute(),
+                  ],
                 ),
+                GoRoute(
+                  path: '/favorites',
+                  pageBuilder: (context, state) {
+                    return FadeTransitionPage(
+                      key: state.pageKey,
+                      restorationId: 'route.favorites',
+                      child: const FavoritesScreen(restorationId: 'favorites'),
+                    );
+                  },
+                  routes: [
+                    _buildDetailsRoute(),
+                  ],
+                ),
+                GoRoute(
+                  path: '/search',
+                  pageBuilder: (context, state) {
+                    return FadeTransitionPage(
+                      key: state.pageKey,
+                      restorationId: 'route.search',
+                      child: const SearchScreen(restorationId: 'search'),
+                    );
+                  },
+                  routes: [
+                    _buildDetailsRoute(),
+                  ],
+                ),
+                GoRoute(
+                  path: '/settings',
+                  pageBuilder: (context, state) {
+                    return FadeTransitionPage(
+                      key: state.pageKey,
+                      restorationId: 'route.settings',
+                      child: const SettingsScreen(restorationId: 'settings'),
+                    );
+                  },
+                  routes: [
+                    GoRoute(
+                      parentNavigatorKey: _rootNavigatorKey,
+                      path: 'categories',
+                      pageBuilder: (context, state) {
+                        return VeggieCategorySettingsScreen.pageBuilder(
+                            context);
+                      },
+                    ),
+                    GoRoute(
+                      parentNavigatorKey: _rootNavigatorKey,
+                      path: 'calories',
+                      pageBuilder: (context, state) {
+                        return CalorieSettingsScreen.pageBuilder(context);
+                      },
+                    ),
+                  ],
+                ),
+              ],
+            ),
+          ],
+        ),
+      ),
+    );
+  }
+
+  // GoRouter does not support relative routes,
+  // see https://github.com/flutter/flutter/issues/108177
+  GoRoute _buildDetailsRoute() {
+    return GoRoute(
+      parentNavigatorKey: _rootNavigatorKey,
+      path: 'details/:id',
+      pageBuilder: (context, state) {
+        final veggieId = int.parse(state.params['id']!);
+        return CupertinoPage(
+          restorationId: 'route.details',
+          fullscreenDialog: true,
+          child: DetailsScreen(
+            id: veggieId,
+            restorationId: 'details',
+          ),
+        );
+      },
     );
   }
 }

veggieseasons/lib/screens/details.dart

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import 'package:flutter/cupertino.dart';
+import 'package:go_router/go_router.dart';
 import 'package:provider/provider.dart';
 import 'package:veggieseasons/data/app_state.dart';
 import 'package:veggieseasons/data/preferences.dart';
@@ -240,19 +241,6 @@ class DetailsScreen extends StatefulWidget {
 
   const DetailsScreen({this.id, this.restorationId, super.key});
 
-  static String show(NavigatorState navigator, int veggieId) {
-    return navigator.restorablePush<void>(_routeBuilder, arguments: veggieId);
-  }
-
-  static Route<void> _routeBuilder(BuildContext context, Object? arguments) {
-    final veggieId = arguments as int?;
-    return CupertinoPageRoute(
-      builder: (context) =>
-          DetailsScreen(id: veggieId, restorationId: 'details'),
-      fullscreenDialog: true,
-    );
-  }
-
   @override
   State<DetailsScreen> createState() => _DetailsScreenState();
 }
@@ -295,7 +283,7 @@ class _DetailsScreenState extends State<DetailsScreen> with RestorationMixin {
             left: 16,
             child: SafeArea(
               child: CloseButton(() {
-                Navigator.of(context).pop();
+                context.pop();
               }),
             ),
           ),

veggieseasons/lib/screens/home.dart

@@ -3,23 +3,32 @@
 // found in the LICENSE file.
 
 import 'package:flutter/cupertino.dart';
-import 'package:veggieseasons/screens/favorites.dart';
+import 'package:go_router/go_router.dart';
-import 'package:veggieseasons/screens/list.dart';
-import 'package:veggieseasons/screens/search.dart';
-import 'package:veggieseasons/screens/settings.dart';
 
 class HomeScreen extends StatelessWidget {
-  const HomeScreen({super.key, this.restorationId});
+  const HomeScreen({
+    super.key,
+    this.restorationId,
+    required this.child,
+    required this.onTap,
+  });
 
   final String? restorationId;
+  final Widget child;
+  final void Function(int) onTap;
 
   @override
   Widget build(BuildContext context) {
+    final index = _getSelectedIndex(GoRouter.of(context).location);
     return RestorationScope(
       restorationId: restorationId,
-      child: CupertinoTabScaffold(
+      child: CupertinoPageScaffold(
-        restorationId: 'scaffold',
+        child: Column(
-        tabBar: CupertinoTabBar(items: const [
+          children: [
+            Expanded(child: child),
+            CupertinoTabBar(
+              currentIndex: index,
+              items: const [
                 BottomNavigationBarItem(
                   icon: Icon(CupertinoIcons.home),
                   label: 'Home',
@@ -36,19 +45,20 @@ class HomeScreen extends StatelessWidget {
                   icon: Icon(CupertinoIcons.settings),
                   label: 'Settings',
                 ),
-        ]),
+              ],
-        tabBuilder: (context, index) {
+              onTap: onTap,
-          if (index == 0) {
+            ),
-            return const ListScreen(restorationId: 'list');
+          ],
-          } else if (index == 1) {
+        ),
-            return const FavoritesScreen(restorationId: 'favorites');
-          } else if (index == 2) {
-            return const SearchScreen(restorationId: 'search');
-          } else {
-            return const SettingsScreen(restorationId: 'settings');
-          }
-        },
       ),
     );
   }
+
+  int _getSelectedIndex(String location) {
+    if (location.startsWith('/list')) return 0;
+    if (location.startsWith('/favorites')) return 1;
+    if (location.startsWith('/search')) return 2;
+    if (location.startsWith('/settings')) return 3;
+    return 0;
+  }
 }

veggieseasons/lib/screens/settings.dart

@@ -3,6 +3,7 @@
 // found in the LICENSE file.
 
 import 'package:flutter/cupertino.dart';
+import 'package:go_router/go_router.dart';
 import 'package:provider/provider.dart';
 import 'package:veggieseasons/data/preferences.dart';
 import 'package:veggieseasons/data/veggie.dart';
@@ -15,14 +16,10 @@ class VeggieCategorySettingsScreen extends StatelessWidget {
 
   final String? restorationId;
 
-  static String show(NavigatorState navigator) {
+  static Page<void> pageBuilder(BuildContext context) {
-    return navigator.restorablePush(_routeBuilder);
+    return const CupertinoPage(
-  }
+      restorationId: 'router.categories',
-
+      child: VeggieCategorySettingsScreen(restorationId: 'category'),
-  static Route<void> _routeBuilder(BuildContext context, Object? argument) {
-    return CupertinoPageRoute(
-      builder: (context) =>
-          const VeggieCategorySettingsScreen(restorationId: 'category'),
       title: 'Preferred Categories',
     );
   }
@@ -99,14 +96,10 @@ class CalorieSettingsScreen extends StatelessWidget {
   static const min = 2600;
   static const step = 200;
 
-  static String show(NavigatorState navigator) {
+  static Page<void> pageBuilder(BuildContext context) {
-    return navigator.restorablePush(_routeBuilder);
+    return const CupertinoPage<void>(
-  }
+      restorationId: 'router.calorie',
-
+      child: CalorieSettingsScreen(restorationId: 'calorie'),
-  static Route<void> _routeBuilder(BuildContext context, Object? argument) {
-    return CupertinoPageRoute<void>(
-      builder: (context) =>
-          const CalorieSettingsScreen(restorationId: 'calorie'),
       title: 'Calorie Target',
     );
   }
@@ -198,7 +191,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
         },
       ),
       onPress: () {
-        CalorieSettingsScreen.show(Navigator.of(context));
+        context.go('/settings/calories');
       },
     );
   }
@@ -213,7 +206,7 @@ class _SettingsScreenState extends State<SettingsScreen> {
       ),
       content: const SettingsNavigationIndicator(),
       onPress: () {
-        VeggieCategorySettingsScreen.show(Navigator.of(context));
+        context.go('/settings/categories');
       },
     );
   }
@@ -242,13 +235,13 @@ class _SettingsScreenState extends State<SettingsScreen> {
                 onPressed: () async {
                   await prefs.restoreDefaults();
                   if (!mounted) return;
-                  Navigator.pop(context);
+                  context.pop();
                 },
               ),
               CupertinoDialogAction(
                 isDefaultAction: true,
                 child: const Text('No'),
-                onPressed: () => Navigator.pop(context),
+                onPressed: () => context.pop(),
               )
             ],
           ),

veggieseasons/lib/widgets/fade_transition_page.dart

@@ -0,0 +1,66 @@
+// Copyright 2021, the Flutter project authors. Please see the AUTHORS file
+// for details. 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/cupertino.dart';
+
+class FadeTransitionPage<T> extends Page<T> {
+  final Widget child;
+  final Duration duration;
+
+  const FadeTransitionPage({
+    super.key,
+    required this.child,
+    this.duration = const Duration(milliseconds: 300),
+    super.restorationId,
+  });
+
+  @override
+  Route<T> createRoute(BuildContext context) =>
+      PageBasedFadeTransitionRoute<T>(this);
+}
+
+class PageBasedFadeTransitionRoute<T> extends PageRoute<T> {
+  PageBasedFadeTransitionRoute(FadeTransitionPage<T> page)
+      : super(settings: page);
+
+  FadeTransitionPage<T> get _page => settings as FadeTransitionPage<T>;
+
+  @override
+  Color? get barrierColor => null;
+
+  @override
+  String? get barrierLabel => null;
+
+  @override
+  Duration get transitionDuration => _page.duration;
+
+  @override
+  Duration get reverseTransitionDuration => _page.duration;
+
+  @override
+  bool get maintainState => true;
+
+  @override
+  Widget buildPage(
+    BuildContext context,
+    Animation<double> animation,
+    Animation<double> secondaryAnimation,
+  ) {
+    return _page.child;
+  }
+
+  @override
+  Widget buildTransitions(
+    BuildContext context,
+    Animation<double> animation,
+    Animation<double> secondaryAnimation,
+    Widget child,
+  ) {
+    final tween = CurveTween(curve: Curves.easeInOut);
+    return FadeTransition(
+      opacity: animation.drive(tween),
+      child: _page.child,
+    );
+  }
+}

veggieseasons/lib/widgets/veggie_card.dart

@@ -5,8 +5,8 @@
 import 'dart:ui';
 
 import 'package:flutter/cupertino.dart';
+import 'package:go_router/go_router.dart';
 import 'package:veggieseasons/data/veggie.dart';
-import 'package:veggieseasons/screens/details.dart';
 import 'package:veggieseasons/styles.dart';
 
 class FrostyBackground extends StatelessWidget {
@@ -139,7 +139,12 @@ class VeggieCard extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return PressableCard(
-      onPressed: () => DetailsScreen.show(Navigator.of(context), veggie.id),
+      onPressed: () {
+        // GoRouter does not support relative routes,
+        // so navigate to the absolute route.
+        // see https://github.com/flutter/flutter/issues/108177
+        context.go('/list/details/${veggie.id}');
+      },
       child: Stack(
         children: [
           Semantics(

veggieseasons/lib/widgets/veggie_headline.dart

@@ -3,8 +3,8 @@
 // found in the LICENSE file.
 
 import 'package:flutter/cupertino.dart';
+import 'package:go_router/go_router.dart';
 import 'package:veggieseasons/data/veggie.dart';
-import 'package:veggieseasons/screens/details.dart';
 import 'package:veggieseasons/styles.dart';
 
 class ZoomClipAssetImage extends StatelessWidget {
@@ -72,7 +72,13 @@ class VeggieHeadline extends StatelessWidget {
     final themeData = CupertinoTheme.of(context);
 
     return GestureDetector(
-      onTap: () => DetailsScreen.show(Navigator.of(context), veggie.id),
+      onTap: () {
+        // GoRouter does not support relative routes,
+        // so navigate to the absolute route, which can be either
+        // `/favorites/details/${veggie.id}` or `/search/details/${veggie.id}`
+        // see https://github.com/flutter/flutter/issues/108177
+        context.go('${GoRouter.of(context).location}/details/${veggie.id}');
+      },
       child: Row(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [

veggieseasons/macos/Flutter/GeneratedPluginRegistrant.swift

@@ -5,7 +5,7 @@
 import FlutterMacOS
 import Foundation
 
-import shared_preferences_foundation
+import shared_preferences_macos
 import window_size
 
 func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {

veggieseasons/pubspec.yaml

@@ -20,6 +20,7 @@ dependencies:
     git:
       url: https://github.com/google/flutter-desktop-embedding
       path: plugins/window_size
+  go_router: ^6.0.0
 
 dev_dependencies:
   analysis_defaults: