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.
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( routerConfig: _router, 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(); }, ), ], ); }
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(), ), ], );
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.
Create a GoRouter object and initialize your MaterialApp
or CupertinoApp
:
final GoRouter _router = GoRouter( routes: <GoRoute>[ // ... ] ); MaterialApp.router( routerConfig: _router, );
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), );
You can use redirection to prevent the user from visiting a specific page. In go_router, redirection can be asynchronous.
GoRouter( ... redirect: (context, state) async { if (await LoginService.of(context).isLoggedIn) { // No redirect is required if the user is already logged in. return null; } return '/login'; }, );
If the code depends on BuildContext through the dependOnInheritedWidgetOfExactType (which is how of
methods are usually implemented), the redirect will be called every time the InheritedWidget updated.
The GoRouter.redirect is always called for every navigation regardless of which GoRoute was matched. The top-level redirect always takes priority over route-level redirect.
If the top-level redirect does not redirect to a different location, the GoRoute.redirect is then called if the route has matched the GoRoute. If there are multiple GoRoute matches, e.g. GoRoute with sub-routes, the parent route redirect takes priority over sub-routes' redirect.
To navigate between routes, use the GoRouter.go method:
onTap: () => GoRouter.of(context).go('/page2')
go_router also provides a more concise way to navigate using Dart extension methods:
onTap: () => context.go('/page2')
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'); }, ), ], ), ], ), ], );
For more details, see the ShellRoute API documentation. For a complete example, see the ShellRoute sample in the example/ directory.
See examples for complete runnable examples or visit API documentation
See the Changelog for a list of new features and breaking changes.
See the github project for our current priority.