nested_go_router

Description:

nested go router

go_router #
A Declarative Routing Package for Flutter.
This package uses the Flutter framework's Router API to provide a
convenient, url-based API for navigating between different screens. You can
define URL patterns, navigate using a URL, handle deep links,
and a number of other navigation-related scenarios.
Getting Started #
Follow the package install instructions,
and you can start using go_router in your app:
import 'package:flutter/material.dart';
import 'package:go_router/go_router.dart';

void main() => runApp(App());

class App extends StatelessWidget {
App({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) {
return MaterialApp.router(
routeInformationProvider: _router.routeInformationProvider,
routeInformationParser: _router.routeInformationParser,
routerDelegate: _router.routerDelegate,
title: 'GoRouter Example',
);
}

final GoRouter _router = GoRouter(
routes: <GoRoute>[
GoRoute(
path: '/',
builder: (BuildContext context, GoRouterState state) {
return ScreenA();
},
),
GoRoute(
path: '/b',
builder: (BuildContext context, GoRouterState state) {
return ScreenB();
},
),
],
);
}
copied to clipboard
Define Routes #
go_router is governed by a set of routes which are specified as part of the
GoRouter
constructor:
GoRouter(
routes: [
GoRoute(
path: '/',
builder: (context, state) => const Page1Screen(),
),
GoRoute(
path: '/page2',
builder: (context, state) => const Page2Screen(),
),
],
);
copied to clipboard
In the above snippet, two routes are defined, / and /page2.
When the URL changes, it is matched against each route path.
The path is matched in a case-insensitive way, but the case for
parameters is preserved. If there are multiple route matches,
the first match in the list takes priority over the others.
The builder
is responsible for building the Widget to display on screen.
Alternatively, you can use pageBuilder to customize the transition
animation when that route becomes active.
The default transition is used between pages
depending on the app at the top of its widget tree, e.g. the use of MaterialApp
will cause go_router to use the MaterialPage transitions. Consider using
pageBuilder
for custom Page class.
Initalization #
Create a GoRouter
object and initialize your MaterialApp or CupertinoApp:
final GoRouter _router = GoRouter(
routes: <GoRoute>[
// ...
]
);

MaterialApp.router(
routeInformationProvider: _router.routeInformationProvider,
routeInformationParser: _router.routeInformationParser,
routerDelegate: _router.routerDelegate,
);
copied to clipboard
Error handling #
By default, go_router comes with default error screens for both MaterialApp and
CupertinoApp as well as a default error screen in the case that none is used.
Once can also replace the default error screen by using the errorBuilder:
GoRouter(
...
errorBuilder: (context, state) => ErrorScreen(state.error),
);
copied to clipboard
Navigation #
To navigate between routes, use the GoRouter.go method:
onTap: () => GoRouter.of(context).go('/page2')
copied to clipboard
go_router also provides a more concise way to navigate using Dart extension
methods:
onTap: () => context.go('/page2')
copied to clipboard
Nested Navigation #
The ShellRoute route type provides a way to wrap all sub-routes with a UI shell.
Under the hood, GoRouter places a Navigator in the widget tree, which is used
to display matching sub-routes:
final _router = GoRouter(
routes: [
ShellRoute(
builder: (context, state, child) {
return AppScaffold(child: child);
},
routes: <RouteBase>[
GoRoute(
path: '/albums',
builder: (context, state) {
return HomeScreen();
},
routes: <RouteBase>[
/// The details screen to display stacked on the inner Navigator.
GoRoute(
path: 'song/:songId',
builder: (BuildContext context, GoRouterState state) {
return const DetailsScreen(label: 'A');
},
),
],
),
],
),
],
);
copied to clipboard
For more details, see the
ShellRoute
API documentation. For a complete
example, see the
ShellRoute sample
in the example/ directory.
Still not sure how to proceed? #
See examples for complete runnable examples or visit API documentation
Migration guides #

Migrating to 2.0
Migrating to 2.5
Migrating to 3.0
Migrating to 4.0

Changelog #
See the Changelog
for a list of new features and breaking changes.