Here you will learn about routing, navigation and pass object and parameters to screens using go_router in Flutter.
GoRouter Basic Routes
Let's first define two routes name using String. One is for root of the app, and another one is for singleArticle
static const root = '/';
static const singleArticle = '/article';They are like Getx router. So you could create as many routes as possible like this. Just remember to put a slash in-front of the string.
GoRouter Dynamic Routes
We would also be able to define methods that takes arguments and return a route based on that. This way your routes become dynamic.
static home([CurrentTab? type]) => '/${type?.name ?? ':type'}';
// static const singleArticleWithParams = '/article/:id';
/// get route name with parameters, here [id] is optional because we need [:id] to define path on [_singleArticleWithParams]
static singleArticleWithParams([String? id]) => '/article/${id ?? ':id'}';From the above code, you can see we are using fat arrow to return a String. That means we can define our own custom method and return values.
We also passing value as arguments. Here CurrentTab is an enum and others are String type.
Now here we can call home([CurrentTab? type]) from inside GoRouter() constructor.
Since in the case of home([CurrentTab? type]) and singleArticleWithParams([String? id]) both takes dynamic arguments, it means we can make dynamic links.
We can also define not found page using Go Router.
static Widget errorWidget(BuildContext context, GoRouterState state) => const NotFoundPage();Here errorWidget() is function and returns a widget type.
GoRouter Constructor and Object
Now we can create a GoRouter object. To do that just pass GoRoute() function inside the list routes. GoRoute() function takes path, redirect and builder properties.
The property path takes a string or function that returns objects.
The property builder takes a callback function and
The property redirect take function as well.
static final GoRouter _router = GoRouter(
routes: <GoRoute>[
GoRoute(path: root, redirect: (_) => home(CurrentTab.blogs)),
GoRoute(path: home(), builder: _homePageRouteBuilder),
GoRoute(path: singleArticle, builder: _singleBlog),
GoRoute(path: singleArticleWithParams(), builder: _singleArticleWithParams)
],
errorBuilder: errorWidget,
);Let's create a class name app_router.dart
class AppRouter {
// all the route paths. So that we can access them easily across the app
static const root = '/';
static const singleArticle = '/article';
static home([CurrentTab? type]) => '/${type?.name ?? ':type'}';
// static const singleArticleWithParams = '/article/:id';
/// get route name with parameters, here [id] is optional because we need [:id] to define path on [_singleArticleWithParams]
static singleArticleWithParams([String? id]) => '/article/${id ?? ':id'}';
/// private static methods that are accessible only in this class and not from outside
static Widget _homePageRouteBuilder(BuildContext context, GoRouterState state) =>
HomePage(currentTab: state.params['type']! == CurrentTab.blogs.name ? CurrentTab.blogs : CurrentTab.favorite);
static Widget _singleBlog(BuildContext context, GoRouterState state) => SingleArticle(blog: state.extra as Blog);
static Widget _singleArticleWithParams(BuildContext context, GoRouterState state) =>
SingleArticleWithParams(id: state.params["id"]!);
static Widget errorWidget(BuildContext context, GoRouterState state) => const NotFoundPage();
/// use this in [MaterialApp.router]
static final GoRouter _router = GoRouter(
routes: <GoRoute>[
GoRoute(path: root, redirect: (_) => home(CurrentTab.blogs)),
GoRoute(path: home(), builder: _homePageRouteBuilder),
GoRoute(path: singleArticle, builder: _singleBlog),
GoRoute(path: singleArticleWithParams(), builder: _singleArticleWithParams)
],
errorBuilder: errorWidget,
);
static GoRouter get router => _router;
}
You can pass parameters. It are more like Getx parameters
We also covered dynamic routing.
This class's all the methods and properties are static, so we would be able to access the properties and methods urinsg AppRouter, the class name itself.
