Hey Folks 👨🏻💻 today we’ll understand the GoRouter In Flutter.
What is the need for GoRouter in Flutter app development
First let’s understand the difference btw the Flutter Navigation 2.0 and GoRouter.
Difference btw GoRouter and Navigator 2.0
GoRouter and Navigator 2.0 are two different routing libraries available in different programming languages: GoRouter is a routing library for Flutter Web and Navigator 2.0 is a routing library for Flutter Mobile.
You can also check out our Flutter app development services for more Flutter app development.
The main difference between GoRouter and Navigator 2.0 lies in their approach to managing and navigating between different pages within a Flutter app. GoRouter is a declarative, widget-based routing library that allows you to define your routes using a set of nested MaterialApp, Scaffold and Navigator widgets. On the other hand, Navigator 2.0 is a new, more powerful version of Flutter’s built-in Navigator class that uses a declarative routing API to manage page transitions.
Another significant difference is that Navigator 2.0 provides support for deep linking, which means you can define routes that can be accessed through a URL, making it easier to share and navigate to specific pages within an app. GoRouter does not provide built-in support for deep linking.
In summary, GoRouter is a routing library for Flutter Web that uses a widget-based approach to manage routes, while Navigator 2.0 is a more powerful version of Flutter’s built-in Navigator class that provides declarative routing and support for deep linking for Flutter Mobile.
Note: If you are a Mobile app developer then you don’t have to use the GoRouter in Mobile application for Navigation. If you don’t want to write boilerplate code for navigation then you can use the GoRouter for mobile application.
Let’s Understand the GoRouter In Flutter and it’s basic usage.
As mobile applications become increasingly complex, routing and navigation have become critical components of app development. Flutter, a popular mobile app development framework, provides the Navigator widget to handle routing and navigation within an app. However, for larger and more complex applications, a more robust routing solution is needed. This is where go_router comes into play.
go_router is a powerful routing library for Flutter that provides an intuitive and declarative way to manage navigation within an app. With go_router, developers can easily define and manage routes, including nested routes and dynamic routes.
Here are some of the features and benefits of using go_router in a Flutter mobile application:
Declarative Routing
go_router uses a declarative approach to routing. Developers define the routes and their associated parameters in a simple and intuitive way. This makes it easy to manage complex routing scenarios, such as nested routes and dynamic routing.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 |
import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { final router = GoRouter( routes: [ GoRoute( name: '/', pageBuilder: (context, state) => HomePage(), ), GoRoute( name: '/details/:id', pageBuilder: (context, state) => DetailsPage(id: state.params['id']), ), GoRoute( name: '/profile/:username', pageBuilder: (context, state) => ProfilePage(username: state.params['username']), ), ], ); @override Widget build(BuildContext context) { return MaterialApp( title: 'My App', theme: ThemeData(primarySwatch: Colors.blue), routerDelegate: router.delegate(), routeInformationParser: router.defaultRouteParser(), ); } } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home Page'), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: [ ElevatedButton( onPressed: () => context.go('/details/1'), child: Text('Go to Details Page'), ), ElevatedButton( onPressed: () => context.go('/profile/john'), child: Text('Go to Profile Page'), ), ], ), ), ); } } class DetailsPage extends StatelessWidget { final String id; DetailsPage({required this.id}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Details Page'), ), body: Center( child: Text('Details for ID $id'), ), ); } } class ProfilePage extends StatelessWidget { final String username; ProfilePage({required this.username}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Profile Page'), ), body: Center( child: Text('Profile for user $username'), ), ); } } |
we define three routes: the home route '/', the details route '/details/:id', and the profile route '/profile/:username'. Each route is defined using the GoRoute class, which takes a name and a page builder function as arguments. The page builder function is responsible for building the page that is displayed when the route is navigated to.
To navigate to a route, we use the context.go() method, which takes the name of the route as an argument. We can also include route parameters in the name of the route, such as '/details/1' or '/profile/john'. The GoRouter class automatically extracts the parameters from the route name and passes them to the page builder function as part of the state.params map.
Customizable Navigation
go_router provides customizable navigation options, including push, pop, and replace. Developers can also define custom transition animations and specify transition durations.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 |
import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp.router( routerDelegate: GoRouter( routes: [ GoRoute( path: '/', pageBuilder: (context, state) { return HomePage(); }, ), GoRoute( path: '/settings', pageBuilder: (context, state) { return SettingsPage(); }, ), ], ), ); } } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home'), ), body: Center( child: ElevatedButton( onPressed: () { context.go('/settings'); }, child: Text('Go to Settings'), ), ), ); } } class SettingsPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Settings'), ), body: Center( child: ElevatedButton( onPressed: () { context.go('/'); }, child: Text('Go back to Home'), ), ), ); } } |
we define two routes: one for the home page and another for the settings page. Each route is associated with a handler function that returns the corresponding page widget.
We also define navigation buttons on each page that use the context.go() method to navigate to the other page. This method is provided by the GoRouter library and can be used to navigate to any defined route by specifying its path.
Easy Parameter Passing
go_router makes it easy to pass parameters between routes. Developers can define parameters as part of the route definition and easily access them within the destination route.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 |
import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { final router = GoRouter( routes: [ GoRoute( name: '/', pageBuilder: (context, state) => HomePage(), ), GoRoute( name: '/details', pageBuilder: (context, state) => DetailsPage(id: state.query['id']!), ), ], ); @override Widget build(BuildContext context) { return MaterialApp( title: 'My App', theme: ThemeData(primarySwatch: Colors.blue), routerDelegate: router.delegate(), routeInformationParser: router.defaultRouteParser(), ); } } class HomePage extends StatelessWidget { final items = ['Item 1', 'Item 2', 'Item 3']; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home Page'), ), body: ListView.builder( itemCount: items.length, itemBuilder: (context, index) => ListTile( title: Text(items[index]), onTap: () => context.go('/details?id=$index'), ), ), ); } } class DetailsPage extends StatelessWidget { final String id; DetailsPage({required this.id}); @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Details Page'), ), body: Center( child: Text('Details for Item $id'), ), ); } } |
we define two routes: the home route '/' and the details route '/details'. The details route takes a query parameter called id which represents the index of the item that we want to display details for. When a user taps on an item in the home page list, we use context.go() to navigate to the details page and pass the item’s index as a query parameter.
In the DetailsPage widget, we retrieve the value of the id query parameter using state.query['id']! and use it to display the details for the selected item.
Here’s a basic example of how to use go_router for navigation in a Flutter app:
Add GoRouter package in pubspec.yaml file
Note: MinDart SDK- 2.18
|
1 2 |
dependencies: go_router: ^6.5.2 |
Now in your Dart code, you can use:
|
1 |
import 'package:go_router/go_router.dart'; |
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
import 'package:flutter/material.dart'; import 'package:go_router/go_router.dart'; void main() { runApp(MyApp()); } class MyApp extends StatelessWidget { final router = GoRouter( routes: [ GoRoute( name: '/', pageBuilder: (context, state) => HomePage(), ), GoRoute( name: '/details', pageBuilder: (context, state) => DetailsPage(), ), ], ); @override Widget build(BuildContext context) { return MaterialApp( title: 'My App', theme: ThemeData(primarySwatch: Colors.blue), routerDelegate: router.delegate(), routeInformationParser: router.defaultRouteParser(), ); } } class HomePage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Home Page'), ), body: Center( child: ElevatedButton( onPressed: () => context.go('/details'), child: Text('Go to Details'), ), ), ); } } class DetailsPage extends StatelessWidget { @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Details Page'), ), body: Center( child: Text('Details'), ), ); } } |
In this example, we define two routes: the home route '/' and the details route '/details'. When the user taps the button on the home page, we use context.go('/details') to navigate to the details page.
Note that we define the routes and their associated page builder functions in the MyApp widget’s constructor. We also define routerDelegate and routeInformationParser properties of the MaterialApp widget to use the go_router package for navigation.
In each page, we build a simple Scaffold widget with an AppBar and a Center widget that contains either a button or text.
That’s it! This basic example shows how easy it is to use GoRouter In Flutter for navigation in a Flutter app.
Conclusion
go_router is a powerful and flexible routing library for Flutter mobile applications. GoRouter In Flutter is definitely worth considering as a routing solution if you’re building complex and large Applications.
We learned about the GoRouter in Flutter in this blog.
Visit the link to get the package of GoRouter in Flutter.
Thanks for reading this blog. You can also check other blogs from here for more knowledge.