Navigate With GoRouter In Flutter
A declarative routing package for Flutter that uses the Router API to provide a convenient, URL-based API for navigating between different screens.
Table Of Content
Introduction:
The goal of the go_router package is to simplify the use of the Router in Flutter as specified by the MaterialApp.router constructor. By default, it requires an implementation of the Router Delegate and Route Information Parser classes. These two implementations themselves imply the definition of a custom type to hold the app state that drives the creation of the Navigator. You can read an excellent blog post on these requirements on Medium. This separation of responsibilities allows the Flutter developer to implement several routing and navigation policies at the cost of complexity.
Add Dependency:
Open the terminal in your Flutter project. Then run the following command to install the go_router package in your Flutter Project.$ flutter pub add go_router
or you will add this line to your package’s pubspec. ymal file and run “flutter pub get”
dependencies:
go_router: ^6.0.1Features:
GoRouter has many features:-
- > Parsing path and query parameters using a template syntax (for example, “user/:id’).
- > Displaying multiple screens for a destination (sub-routes).
- > Redirection support — you can re-route the user to a different URL based on application state, for example to a sign-in when the user is not authenticated.
- > Backwards compatibility with Navigator API
- > Support for both Material and Cupertino apps
Implementation:
Hello Everyone…!!!! Today we learn about routing in the flutter application. To integrate go_router in your app first you have to add MaterialApp.router in the place of the MaterialApp. This constructor accepts many properties like routeInformationParser, routerDelegate, etc.
MaterialApp.router(
debugShowCheckedModeBanner: false,
routeInformationParser:
NyAppRouter.returnRouter(false).routeInformationParser,
routerDelegate: NyAppRouter.returnRouter(false).routerDelegate,
);After that, we create an app_route_config.dart. In this file, we pass all the routes. First, we add the default route which is the home page. In routes, we add a name, path ad pageBuilder. After that, we create a route for the profile page in which we pass the userId and userName. And we also create GoRoute for the about page and contact us page.
class NyAppRouter {
static GoRouter returnRouter(bool isAuth) {
GoRouter router = GoRouter(
routes: [
GoRoute(
name: MyAppRouteConstants.homeRouteName,
path: '/',
pageBuilder: (context, state) {
return const MaterialPage(child: Home());
},
),
GoRoute(
name: MyAppRouteConstants.profileRouteName,
path: '/profile/:username/:userid',
pageBuilder: (context, state) {
return MaterialPage(
child: Profile(
userid: state.params['userid']!,
username: state.params['username']!,
));
},
),
GoRoute(
name: MyAppRouteConstants.aboutRouteName,
path: '/about',
pageBuilder: (context, state) {
return const MaterialPage(child: About());
},
),
GoRoute(
name: MyAppRouteConstants.contactUsRouteName,
path: '/contact_us',
pageBuilder: (context, state) {
return const MaterialPage(child: ContactUS());
},
)
],
errorPageBuilder: (context, state) {
return const MaterialPage(child: ErrorPage());
},
);
return router;
}
}And also add errorPageBuilder in which we return MaterialPage and pass ErrorPage as a child. and return the router. This is how we create the routes for navigators.
We also create the route constants for GoRouters. In which we pass all the routes as a string.
class MyAppRouteConstants {
static const String homeRouteName = 'home';
static const String aboutRouteName = 'about';
static const String profileRouteName = 'profile';
static const String contactUsRouteName = 'contact_us';
}At last, we create the UI of the project and in the UI part, we also learn the go_router and how to navigate the UI. In-home. dart we return the scaffold and pass the appbar in which we pass the title. Pass the Column in the body and add the buttons by which we navigate from one screen to another screen.
We can navigate in many ways like push, pushNamed in which we pass the params like userName and UserId or we can directly pass the path of the route which we already defined in the route_config.dart file. This is how we use go_router. I hope you learn many things like how to create paths or routes and how to pass params easily.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
centerTitle: true,
title: const Text('Go Router Demo'),
),
body: Column(
children: [
ElevatedButton(
onPressed: () {
GoRouter.of(context).push(Uri(path: '/about').toString());
},
child: const Text('About Page')),
ElevatedButton(
onPressed: () {
GoRouter.of(context)
.pushNamed(MyAppRouteConstants.profileRouteName, params: {
'username': 'Text user',
'userid': 'uhfhfhfdghfk'
});
},
child: const Text('Profile Page')),
ElevatedButton(
onPressed: () {
GoRouter.of(context)
.pushNamed(MyAppRouteConstants.contactUsRouteName);
},
child: const Text('ContactUs Page')),
],
),
);
}Conclusion:
In this article, we learn how to implement go_router in Flutter Application. We learn many things like how to create the config file and how to pass params to another screen and many things.
❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
GitHub Link:
Find the source code of the Navigate With GoRouter In Flutter:
GitHub – flutter-devs/go_router_demo-
You can’t perform that action at this time. You signed in with another tab or window. You signed out in another tab or…github.com
Feel free to connect with us:
And read more articles from FlutterDevs.com.
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire a flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! For any flutter-related queries, you can connect with us on Facebook, GitHub, Twitter, and LinkedIn Facebook, GitHub, Twitter, and LinkedIn.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences.
