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>
pull/1675/head
Miguel Beltran 2 years ago committed by GitHub
parent d53a8ee93f
commit 8c06626190
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

@ -7,13 +7,21 @@ import 'dart:io';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart'; import 'package:flutter/foundation.dart';
import 'package:flutter/services.dart' show DeviceOrientation, SystemChrome; import 'package:flutter/services.dart' show DeviceOrientation, SystemChrome;
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:veggieseasons/data/app_state.dart'; import 'package:veggieseasons/data/app_state.dart';
import 'package:veggieseasons/data/preferences.dart'; import 'package:veggieseasons/data/preferences.dart';
import 'package:veggieseasons/screens/home.dart'; import 'package:veggieseasons/screens/home.dart';
import 'package:veggieseasons/styles.dart'; import 'package:veggieseasons/styles.dart';
import 'package:veggieseasons/widgets/fade_transition_page.dart';
import 'package:window_size/window_size.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() { void main() {
WidgetsFlutterBinding.ensureInitialized(); WidgetsFlutterBinding.ensureInitialized();
SystemChrome.setPreferredOrientations([ SystemChrome.setPreferredOrientations([
@ -48,6 +56,9 @@ void setupWindow() {
} }
} }
final _rootNavigatorKey = GlobalKey<NavigatorState>();
final _shellNavigatorKey = GlobalKey<NavigatorState>();
class VeggieApp extends StatefulWidget { class VeggieApp extends StatefulWidget {
const VeggieApp({super.key}); const VeggieApp({super.key});
@ -83,14 +94,138 @@ class _VeggieAppState extends State<VeggieApp> with RestorationMixin {
create: (_) => Preferences()..load(), create: (_) => Preferences()..load(),
), ),
], ],
child: CupertinoApp( child: CupertinoApp.router(
theme: Styles.veggieThemeData, theme: Styles.veggieThemeData,
debugShowCheckedModeBanner: false, debugShowCheckedModeBanner: false,
home: const HomeScreen(restorationId: 'home'),
restorationScopeId: 'app', 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',
),
);
},
);
}
} }
class _RestorableAppState extends RestorableListenable<AppState> { class _RestorableAppState extends RestorableListenable<AppState> {

@ -3,6 +3,7 @@
// found in the LICENSE file. // found in the LICENSE file.
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:go_router/go_router.dart';
import 'package:provider/provider.dart'; import 'package:provider/provider.dart';
import 'package:veggieseasons/data/app_state.dart'; import 'package:veggieseasons/data/app_state.dart';
import 'package:veggieseasons/data/preferences.dart'; import 'package:veggieseasons/data/preferences.dart';
@ -240,19 +241,6 @@ class DetailsScreen extends StatefulWidget {
const DetailsScreen({this.id, this.restorationId, super.key}); 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 @override
State<DetailsScreen> createState() => _DetailsScreenState(); State<DetailsScreen> createState() => _DetailsScreenState();
} }
@ -295,7 +283,7 @@ class _DetailsScreenState extends State<DetailsScreen> with RestorationMixin {
left: 16, left: 16,
child: SafeArea( child: SafeArea(
child: CloseButton(() { child: CloseButton(() {
Navigator.of(context).pop(); context.pop();
}), }),
), ),
), ),

@ -3,52 +3,62 @@
// found in the LICENSE file. // found in the LICENSE file.
import 'package:flutter/cupertino.dart'; 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 { 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 String? restorationId;
final Widget child;
final void Function(int) onTap;
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
final index = _getSelectedIndex(GoRouter.of(context).location);
return RestorationScope( return RestorationScope(
restorationId: restorationId, restorationId: restorationId,
child: CupertinoTabScaffold( child: CupertinoPageScaffold(
restorationId: 'scaffold', child: Column(
tabBar: CupertinoTabBar(items: const [ children: [
BottomNavigationBarItem( Expanded(child: child),
icon: Icon(CupertinoIcons.home), CupertinoTabBar(
label: 'Home', currentIndex: index,
), items: const [
BottomNavigationBarItem( BottomNavigationBarItem(
icon: Icon(CupertinoIcons.book), icon: Icon(CupertinoIcons.home),
label: 'My Garden', label: 'Home',
), ),
BottomNavigationBarItem( BottomNavigationBarItem(
icon: Icon(CupertinoIcons.search), icon: Icon(CupertinoIcons.book),
label: 'Search', label: 'My Garden',
), ),
BottomNavigationBarItem( BottomNavigationBarItem(
icon: Icon(CupertinoIcons.settings), icon: Icon(CupertinoIcons.search),
label: 'Settings', label: 'Search',
), ),
]), BottomNavigationBarItem(
tabBuilder: (context, index) { icon: Icon(CupertinoIcons.settings),
if (index == 0) { label: 'Settings',
return const ListScreen(restorationId: 'list'); ),
} else if (index == 1) { ],
return const FavoritesScreen(restorationId: 'favorites'); onTap: onTap,
} 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;
}
} }

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

@ -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,
);
}
}

@ -5,8 +5,8 @@
import 'dart:ui'; import 'dart:ui';
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:go_router/go_router.dart';
import 'package:veggieseasons/data/veggie.dart'; import 'package:veggieseasons/data/veggie.dart';
import 'package:veggieseasons/screens/details.dart';
import 'package:veggieseasons/styles.dart'; import 'package:veggieseasons/styles.dart';
class FrostyBackground extends StatelessWidget { class FrostyBackground extends StatelessWidget {
@ -139,7 +139,12 @@ class VeggieCard extends StatelessWidget {
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return PressableCard( 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( child: Stack(
children: [ children: [
Semantics( Semantics(

@ -3,8 +3,8 @@
// found in the LICENSE file. // found in the LICENSE file.
import 'package:flutter/cupertino.dart'; import 'package:flutter/cupertino.dart';
import 'package:go_router/go_router.dart';
import 'package:veggieseasons/data/veggie.dart'; import 'package:veggieseasons/data/veggie.dart';
import 'package:veggieseasons/screens/details.dart';
import 'package:veggieseasons/styles.dart'; import 'package:veggieseasons/styles.dart';
class ZoomClipAssetImage extends StatelessWidget { class ZoomClipAssetImage extends StatelessWidget {
@ -72,7 +72,13 @@ class VeggieHeadline extends StatelessWidget {
final themeData = CupertinoTheme.of(context); final themeData = CupertinoTheme.of(context);
return GestureDetector( 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( child: Row(
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [

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

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

Loading…
Cancel
Save