1
0
mirror of https://github.com/flutter/samples.git synced 2025-11-11 15:28:44 +00:00

Update navigation_and_routing sample to go_router (#2067)

This is a new PR to update the navigation_and_routing sample to the
latest version of go_router. It is a based on
https://github.com/flutter/samples/pull/1437

---------

Co-authored-by: Brett Morgan <brettmorgan@google.com>
This commit is contained in:
John Ryan
2023-11-01 12:14:00 -07:00
committed by GitHub
parent 3e4e3bc784
commit 49eebf8c20
18 changed files with 332 additions and 733 deletions

View File

@@ -5,15 +5,16 @@
import 'package:flutter/material.dart';
import '../data.dart';
import '../routing.dart';
import '../widgets/book_list.dart';
class AuthorDetailsScreen extends StatelessWidget {
final Author author;
final ValueChanged<Book> onBookTapped;
const AuthorDetailsScreen({
super.key,
required this.author,
required this.onBookTapped,
});
@override
@@ -28,7 +29,7 @@ class AuthorDetailsScreen extends StatelessWidget {
child: BookList(
books: author.books,
onTap: (book) {
RouteStateScope.of(context).go('/book/${book.id}');
onBookTapped(book);
},
),
),

View File

@@ -4,14 +4,19 @@
import 'package:flutter/material.dart';
import '../data/author.dart';
import '../data/library.dart';
import '../routing.dart';
import '../widgets/author_list.dart';
class AuthorsScreen extends StatelessWidget {
final String title = 'Authors';
final String title;
final ValueChanged<Author> onTap;
const AuthorsScreen({super.key});
const AuthorsScreen({
required this.onTap,
this.title = 'Authors',
super.key,
});
@override
Widget build(BuildContext context) => Scaffold(
@@ -20,9 +25,7 @@ class AuthorsScreen extends StatelessWidget {
),
body: AuthorList(
authors: libraryInstance.allAuthors,
onTap: (author) {
RouteStateScope.of(context).go('/author/${author.id}');
},
onTap: onTap,
),
);
}

View File

@@ -3,6 +3,7 @@
// 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:url_launcher/link.dart';
import '../data.dart';
@@ -45,14 +46,18 @@ class BookDetailsScreen extends StatelessWidget {
onPressed: () {
Navigator.of(context).push<void>(
MaterialPageRoute<void>(
builder: (context) =>
AuthorDetailsScreen(author: book!.author),
builder: (context) => AuthorDetailsScreen(
author: book!.author,
onBookTapped: (book) {
GoRouter.of(context).go('/books/all/book/${book.id}');
},
),
),
);
},
),
Link(
uri: Uri.parse('/author/${book!.author.id}'),
uri: Uri.parse('/authors/author/${book!.author.id}'),
builder: (context, followLink) => TextButton(
onPressed: followLink,
child: const Text('View author (Link)'),

View File

@@ -4,12 +4,15 @@
import 'package:flutter/material.dart';
import '../data.dart';
import '../routing.dart';
import '../widgets/book_list.dart';
class BooksScreen extends StatefulWidget {
final Widget child;
final ValueChanged<int> onTap;
final int selectedIndex;
const BooksScreen({
required this.child,
required this.onTap,
required this.selectedIndex,
super.key,
});
@@ -28,20 +31,6 @@ class _BooksScreenState extends State<BooksScreen>
..addListener(_handleTabIndexChanged);
}
@override
void didChangeDependencies() {
super.didChangeDependencies();
final newPath = _routeState.route.pathTemplate;
if (newPath.startsWith('/books/popular')) {
_tabController.index = 0;
} else if (newPath.startsWith('/books/new')) {
_tabController.index = 1;
} else if (newPath == '/books/all') {
_tabController.index = 2;
}
}
@override
void dispose() {
_tabController.removeListener(_handleTabIndexChanged);
@@ -49,63 +38,34 @@ class _BooksScreenState extends State<BooksScreen>
}
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(
title: const Text('Books'),
elevation: 8,
bottom: TabBar(
controller: _tabController,
tabs: const [
Tab(
text: 'Popular',
icon: Icon(Icons.people),
),
Tab(
text: 'New',
icon: Icon(Icons.new_releases),
),
Tab(
text: 'All',
icon: Icon(Icons.list),
),
],
),
),
body: TabBarView(
Widget build(BuildContext context) {
_tabController.index = widget.selectedIndex;
return Scaffold(
appBar: AppBar(
title: const Text('Books'),
bottom: TabBar(
controller: _tabController,
children: [
BookList(
books: libraryInstance.popularBooks,
onTap: _handleBookTapped,
tabs: const [
Tab(
text: 'Popular',
icon: Icon(Icons.people),
),
BookList(
books: libraryInstance.newBooks,
onTap: _handleBookTapped,
Tab(
text: 'New',
icon: Icon(Icons.new_releases),
),
BookList(
books: libraryInstance.allBooks,
onTap: _handleBookTapped,
Tab(
text: 'All',
icon: Icon(Icons.list),
),
],
),
);
RouteState get _routeState => RouteStateScope.of(context);
void _handleBookTapped(Book book) {
_routeState.go('/book/${book.id}');
),
body: widget.child,
);
}
void _handleTabIndexChanged() {
switch (_tabController.index) {
case 1:
_routeState.go('/books/new');
case 2:
_routeState.go('/books/all');
case 0:
default:
_routeState.go('/books/popular');
break;
}
widget.onTap(_tabController.index);
}
}

View File

@@ -1,113 +0,0 @@
// 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:collection/collection.dart';
import 'package:flutter/material.dart';
import '../auth.dart';
import '../data.dart';
import '../routing.dart';
import '../screens/sign_in.dart';
import '../widgets/fade_transition_page.dart';
import 'author_details.dart';
import 'book_details.dart';
import 'scaffold.dart';
/// Builds the top-level navigator for the app. The pages to display are based
/// on the `routeState` that was parsed by the TemplateRouteParser.
class BookstoreNavigator extends StatefulWidget {
final GlobalKey<NavigatorState> navigatorKey;
const BookstoreNavigator({
required this.navigatorKey,
super.key,
});
@override
State<BookstoreNavigator> createState() => _BookstoreNavigatorState();
}
class _BookstoreNavigatorState extends State<BookstoreNavigator> {
final _signInKey = const ValueKey('Sign in');
final _scaffoldKey = const ValueKey('App scaffold');
final _bookDetailsKey = const ValueKey('Book details screen');
final _authorDetailsKey = const ValueKey('Author details screen');
@override
Widget build(BuildContext context) {
final routeState = RouteStateScope.of(context);
final authState = BookstoreAuthScope.of(context);
final pathTemplate = routeState.route.pathTemplate;
Book? selectedBook;
if (pathTemplate == '/book/:bookId') {
selectedBook = libraryInstance.allBooks.firstWhereOrNull(
(b) => b.id.toString() == routeState.route.parameters['bookId']);
}
Author? selectedAuthor;
if (pathTemplate == '/author/:authorId') {
selectedAuthor = libraryInstance.allAuthors.firstWhereOrNull(
(b) => b.id.toString() == routeState.route.parameters['authorId']);
}
return Navigator(
key: widget.navigatorKey,
onPopPage: (route, dynamic result) {
// When a page that is stacked on top of the scaffold is popped, display
// the /books or /authors tab in BookstoreScaffold.
if (route.settings is Page &&
(route.settings as Page).key == _bookDetailsKey) {
routeState.go('/books/popular');
}
if (route.settings is Page &&
(route.settings as Page).key == _authorDetailsKey) {
routeState.go('/authors');
}
return route.didPop(result);
},
pages: [
if (routeState.route.pathTemplate == '/signin')
// Display the sign in screen.
FadeTransitionPage<void>(
key: _signInKey,
child: SignInScreen(
onSignIn: (credentials) async {
var signedIn = await authState.signIn(
credentials.username, credentials.password);
if (signedIn) {
await routeState.go('/books/popular');
}
},
),
)
else ...[
// Display the app
FadeTransitionPage<void>(
key: _scaffoldKey,
child: const BookstoreScaffold(),
),
// Add an additional page to the stack if the user is viewing a book
// or an author
if (selectedBook != null)
MaterialPage<void>(
key: _bookDetailsKey,
child: BookDetailsScreen(
book: selectedBook,
),
)
else if (selectedAuthor != null)
MaterialPage<void>(
key: _authorDetailsKey,
child: AuthorDetailsScreen(
author: selectedAuthor,
),
),
],
],
);
}
}

View File

@@ -4,28 +4,30 @@
import 'package:adaptive_navigation/adaptive_navigation.dart';
import 'package:flutter/material.dart';
import '../routing.dart';
import 'scaffold_body.dart';
import 'package:go_router/go_router.dart';
class BookstoreScaffold extends StatelessWidget {
final Widget child;
final int selectedIndex;
const BookstoreScaffold({
required this.child,
required this.selectedIndex,
super.key,
});
@override
Widget build(BuildContext context) {
final routeState = RouteStateScope.of(context);
final selectedIndex = _getSelectedIndex(routeState.route.pathTemplate);
final goRouter = GoRouter.of(context);
return Scaffold(
body: AdaptiveNavigationScaffold(
selectedIndex: selectedIndex,
body: const BookstoreScaffoldBody(),
body: child,
onDestinationSelected: (idx) {
if (idx == 0) routeState.go('/books/popular');
if (idx == 1) routeState.go('/authors');
if (idx == 2) routeState.go('/settings');
if (idx == 0) goRouter.go('/books/popular');
if (idx == 1) goRouter.go('/authors');
if (idx == 2) goRouter.go('/settings');
},
destinations: const [
AdaptiveScaffoldDestination(
@@ -44,11 +46,4 @@ class BookstoreScaffold extends StatelessWidget {
),
);
}
int _getSelectedIndex(String pathTemplate) {
if (pathTemplate.startsWith('/books')) return 0;
if (pathTemplate == '/authors') return 1;
if (pathTemplate == '/settings') return 2;
return 0;
}
}

View File

@@ -1,63 +0,0 @@
// 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/material.dart';
import '../routing.dart';
import '../screens/settings.dart';
import '../widgets/fade_transition_page.dart';
import 'authors.dart';
import 'books.dart';
import 'scaffold.dart';
/// Displays the contents of the body of [BookstoreScaffold]
class BookstoreScaffoldBody extends StatelessWidget {
static GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
const BookstoreScaffoldBody({
super.key,
});
@override
Widget build(BuildContext context) {
var currentRoute = RouteStateScope.of(context).route;
// A nested Router isn't necessary because the back button behavior doesn't
// need to be customized.
return Navigator(
key: navigatorKey,
onPopPage: (route, dynamic result) => route.didPop(result),
pages: [
if (currentRoute.pathTemplate.startsWith('/authors'))
const FadeTransitionPage<void>(
key: ValueKey('authors'),
child: AuthorsScreen(),
)
else if (currentRoute.pathTemplate.startsWith('/settings'))
const FadeTransitionPage<void>(
key: ValueKey('settings'),
child: SettingsScreen(),
)
else if (currentRoute.pathTemplate.startsWith('/books') ||
currentRoute.pathTemplate == '/')
const FadeTransitionPage<void>(
key: ValueKey('books'),
child: BooksScreen(),
)
// Avoid building a Navigator with an empty `pages` list when the
// RouteState is set to an unexpected path, such as /signin.
//
// Since RouteStateScope is an InheritedNotifier, any change to the
// route will result in a call to this build method, even though this
// widget isn't built when those routes are active.
else
FadeTransitionPage<void>(
key: const ValueKey('empty'),
child: Container(),
),
],
);
}
}

View File

@@ -3,10 +3,10 @@
// 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:url_launcher/link.dart';
import '../auth.dart';
import '../routing.dart';
class SettingsScreen extends StatefulWidget {
const SettingsScreen({super.key});
@@ -52,24 +52,27 @@ class SettingsContent extends StatelessWidget {
),
FilledButton(
onPressed: () {
BookstoreAuthScope.of(context).signOut();
BookstoreAuth.of(context).signOut();
},
child: const Text('Sign out'),
),
const Text('Example using the Link widget:'),
Link(
uri: Uri.parse('/book/0'),
uri: Uri.parse('/books/all/book/0'),
builder: (context, followLink) => TextButton(
onPressed: followLink,
child: const Text('Go directly to /book/0 (Link)'),
child: const Text('/books/all/book/0'),
),
),
const Text('Example using GoRouter.of(context).go():'),
TextButton(
child: const Text('Go directly to /book/0 (RouteState)'),
child: const Text('/books/all/book/0'),
onPressed: () {
RouteStateScope.of(context).go('/book/0');
GoRouter.of(context).go('/books/all/book/0');
},
),
].map((w) => Padding(padding: const EdgeInsets.all(8), child: w)),
const Text('Displays a dialog on the root Navigator:'),
TextButton(
onPressed: () => showDialog<String>(
context: context,