GoRouter and Flutter Navigation 2 Support

In this essay I am going to talk about modern navigation in Flutter with Navigation 2 over previous navigation in flutter.
In previous navigation you need to call push, pushReplacement or pushReplacementUntil, but now in goRouter from Flutter you need only go or push on routing of your stack app.

Stack illustration (1)
In navigation or routing between your screens in app you need to care about it especially if there are a lot of it such as e-commerce app. So, you need to system stack of routing which is still and wether you need to delete if move from it.
GoRouter and Flutter Declarative routing:
The purpose of the go_router package is to use declarative routes to reduce complexity, regardless of the platform you’re targeting (mobile, web, desktop), handle deep and dynamic linking from Android, iOS and the web, along with a number of other navigation-related scenarios, while still (hopefully) providing an easy-to-use developer experience. (2)
First you need to add dependency in pubspec.yaml:
dependencies:
go_router: ^3.0.6 # or the latest version from pub.dev
Then add the import in main.dart:
import 'package:go_router/go_router.dart';
We need to modify MaterialApp.router in class App as this:
@override
Widget build(BuildContext context) => MaterialApp.router(
routeInformationParser: _router.routeInformationParser,
routerDelegate: _router.routerDelegate,
);
And we need to declare routes in our app as this:
final GoRouter _router = GoRouter(
routes: <GoRoute>[
GoRoute(
path: '/',
builder: (BuildContext context, GoRouterState state) =>
const HomeScreen(),
),
GoRoute(
path: '/productDetail',
builder: (BuildContext context, GoRouterState state) =>
const ProductDetailScreen(),
),
],
);
After that we can use GoRouter anywhere we want. but what the difference between go and push?
In this code we use go that means the current screen is deleted from stack before we route to another screen by only write context.go('/') method.
`/// The screen of the product detail screen.
class ProductDetailScreen extends StatelessWidget {
/// Creates a [Page1Screen].
const Page1Screen({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(title: const Text(App.title)),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () => context.go('/'),
child: const Text('Go to home page'),
),
],
),
),
);
}
Or if we need to save old screen in the stack we can use push way only by type context.push('productDetail') such as:
/// The screen of the home page.
class HomeScreen extends StatelessWidget {
/// Creates a [Page1Screen].
const Page1Screen({Key? key}) : super(key: key);

@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(title: const Text(App.title)),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
onPressed: () => context.go('/productDetail'),
child: const Text('Go to product detail page'),
),
],
),
),
);
}`
To summarize:
If you want to save the current screen in the app in the stack you can use context.push with name of new route. Or if you want to delete it before route you can use context.go with the name of new route.
References:
1- https://upload.wikimedia.org/wikipedia/commons/thumb/2/29/Data_stack.svg/1200px-Data_stack.svg.png
2- https://pub.dev/packages/go_router