mirror of
https://github.com/flutter/samples.git
synced 2025-11-08 13:58:47 +00:00
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>
This commit is contained in:
@@ -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,14 +94,138 @@ 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',
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
class _RestorableAppState extends RestorableListenable<AppState> {
|
||||
|
||||
@@ -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();
|
||||
}),
|
||||
),
|
||||
),
|
||||
|
||||
@@ -3,52 +3,62 @@
|
||||
// found in the LICENSE file.
|
||||
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:veggieseasons/screens/favorites.dart';
|
||||
import 'package:veggieseasons/screens/list.dart';
|
||||
import 'package:veggieseasons/screens/search.dart';
|
||||
import 'package:veggieseasons/screens/settings.dart';
|
||||
import 'package:go_router/go_router.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(
|
||||
restorationId: 'scaffold',
|
||||
tabBar: CupertinoTabBar(items: const [
|
||||
BottomNavigationBarItem(
|
||||
icon: Icon(CupertinoIcons.home),
|
||||
label: 'Home',
|
||||
),
|
||||
BottomNavigationBarItem(
|
||||
icon: Icon(CupertinoIcons.book),
|
||||
label: 'My Garden',
|
||||
),
|
||||
BottomNavigationBarItem(
|
||||
icon: Icon(CupertinoIcons.search),
|
||||
label: 'Search',
|
||||
),
|
||||
BottomNavigationBarItem(
|
||||
icon: Icon(CupertinoIcons.settings),
|
||||
label: 'Settings',
|
||||
),
|
||||
]),
|
||||
tabBuilder: (context, index) {
|
||||
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');
|
||||
}
|
||||
},
|
||||
child: CupertinoPageScaffold(
|
||||
child: Column(
|
||||
children: [
|
||||
Expanded(child: child),
|
||||
CupertinoTabBar(
|
||||
currentIndex: index,
|
||||
items: const [
|
||||
BottomNavigationBarItem(
|
||||
icon: Icon(CupertinoIcons.home),
|
||||
label: 'Home',
|
||||
),
|
||||
BottomNavigationBarItem(
|
||||
icon: Icon(CupertinoIcons.book),
|
||||
label: 'My Garden',
|
||||
),
|
||||
BottomNavigationBarItem(
|
||||
icon: Icon(CupertinoIcons.search),
|
||||
label: 'Search',
|
||||
),
|
||||
BottomNavigationBarItem(
|
||||
icon: Icon(CupertinoIcons.settings),
|
||||
label: 'Settings',
|
||||
),
|
||||
],
|
||||
onTap: onTap,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
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.
|
||||
|
||||
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) {
|
||||
return navigator.restorablePush(_routeBuilder);
|
||||
}
|
||||
|
||||
static Route<void> _routeBuilder(BuildContext context, Object? argument) {
|
||||
return CupertinoPageRoute(
|
||||
builder: (context) =>
|
||||
const VeggieCategorySettingsScreen(restorationId: 'category'),
|
||||
static Page<void> pageBuilder(BuildContext context) {
|
||||
return const CupertinoPage(
|
||||
restorationId: 'router.categories',
|
||||
child: 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) {
|
||||
return navigator.restorablePush(_routeBuilder);
|
||||
}
|
||||
|
||||
static Route<void> _routeBuilder(BuildContext context, Object? argument) {
|
||||
return CupertinoPageRoute<void>(
|
||||
builder: (context) =>
|
||||
const CalorieSettingsScreen(restorationId: 'calorie'),
|
||||
static Page<void> pageBuilder(BuildContext context) {
|
||||
return const CupertinoPage<void>(
|
||||
restorationId: 'router.calorie',
|
||||
child: 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(),
|
||||
)
|
||||
],
|
||||
),
|
||||
|
||||
66
veggieseasons/lib/widgets/fade_transition_page.dart
Normal file
66
veggieseasons/lib/widgets/fade_transition_page.dart
Normal file
@@ -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 '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(
|
||||
|
||||
@@ -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: [
|
||||
|
||||
@@ -5,7 +5,7 @@
|
||||
import FlutterMacOS
|
||||
import Foundation
|
||||
|
||||
import shared_preferences_foundation
|
||||
import shared_preferences_macos
|
||||
import window_size
|
||||
|
||||
func RegisterGeneratedPlugins(registry: FlutterPluginRegistry) {
|
||||
|
||||
@@ -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:
|
||||
|
||||
Reference in New Issue
Block a user