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:
@@ -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);
|
||||
},
|
||||
),
|
||||
),
|
||||
|
||||
@@ -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,
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
@@ -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)'),
|
||||
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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,
|
||||
),
|
||||
),
|
||||
],
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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(),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
}
|
||||
@@ -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,
|
||||
|
||||
Reference in New Issue
Block a user