Apptimus Blog arrow

Navigating flutter with GoRouter: Simplifying app routing

 

 

https://pub.dev/packages/go_router

 

Introduction

Flutter apps often require efficient navigation strategies to handle multiple routes and dynamic content. Traditionally, Flutter developers have used `Navigator` and `Route` for this. However, with the introduction of  GoRouter, managing app navigation becomes more intuitive and flexible.

In this blog post, we’ll explore what GoRouter is, why it’s needed, and how it simplifies navigation in Flutter applications.

 

Why Use GoRouter?

Before GoRouter, developers used the `Navigator` API, which works but can get complicated, especially for larger apps. Some common challenges include:
- Managing deep linking and URL navigation.
- Keeping track of named routes or path parameters.
- Building scalable and maintainable navigation structures.
 
GoRouter solves many of these problems by providing a declarative and URL-based routing system. It also supports:
- Deep linking: Easily handle dynamic URL paths.
- Declarative navigation: Define routes in a clear, readable way.
- Redirection: Automate user flow based on app states.
- State management: Works well with state management libraries like Riverpod or Provider.
 
 

Getting Started with GoRouter

First, add GoRouter to your `pubspec.yaml` file:
 
dependencies:
  go_router: ^6.0.0
 
Next, import the package into your Flutter app:
 
import 'package:go_router/go_router.dart';
Setting Up GoRouter
 
The first step in using GoRouter is defining your routes:
 
final GoRouter _router = GoRouter(
  routes: [
    GoRoute(
      path: '/',
      builder: (context, state) => HomeScreen(),
    ),
    GoRoute(
      path: '/details/:id',
      builder: (context, state) {
        final id = state.params['id'];
        return DetailsScreen(id: id);
      },
    ),
  ],
);

In this example, we defined two routes: the home screen and a details page that accepts an `id` as a path parameter.

 

 Using GoRouter in Your App

To start using the router in your app, you’ll need to wrap your `MaterialApp` with the GoRouter widget:

Main.dart

MaterialApp.router(

  routerConfig: _router,

)

This change ensures GoRouter takes control of your app’s routing, managing both deep links and internal navigation.

 

Handling Deep Linking

One of GoRouter’s standout features is its built-in support for deep linking. You can link directly to a specific route, like `/details/42`, and GoRouter will navigate to the appropriate screen.
 
This is particularly useful for:
- Web applications
- Re-engaging users from push notifications or emails
- Redirecting users based on the app state (like login status)
 
 

Redirects and Guards

You can also use GoRouter to redirect users based on conditions, such as authentication status. For example, if a user is not logged in, redirect them to the login page:

 

GoRouter(
  redirect: (state) {
    final loggedIn = /* Check if user is logged in */;
    final loggingIn = state.location == '/login';
 
    if (!loggedIn && !loggingIn) return '/login';
    return null;
  },
)

This flexibility makes GoRouter perfect for apps that require complex flow management, like multi-step forms or user authentication systems.

 

Conclusion

GoRouter provides a powerful, declarative approach to managing routes in Flutter apps. Its ability to handle deep linking, path parameters, and redirects makes it a valuable tool, especially for larger, more complex applications. By using GoRouter, you can keep your app’s navigation clean, simple, and scalable.

author
Vithushan

Software Engineer, Apptimus