A 6 Tips for Beginner’s Guide to Go Router in Flutter

The Go Router is a package used to navigate between screens. You can handle a Url Pattern, Navigate using URLs, handle deep links, and many other navigation scenarios.

Feature: 

1. Navigation
2. Parsing and Query Parameter
3. Route Guards Support
4. Transition Animation
5. 404 Page Handle Support
6. Multiple and Sub Routes

Get Started: 

  First, we add the package in pub.yaml like this 

dependencies:
  go_router: ^7.1.1

Route Configuration in Go Router: 

Next, we add the route configuration for navigation

Then we add the MaterialApp.router in main.dart and set the route config parameter to the RouteConfiguration object.

import 'package:go_router/go_router.dart';

// GoRouter configuration
final _router = GoRouter(
  initialLocation: '/',
  routes: [
    GoRoute(
      name: 'home', // Optional, add name to your routes. Allows you navigate by name instead of path
      path: '/',
      builder: (context, state) => HomeScreen(),
    ),
    GoRoute(
      name: 'page1',
      path: '/page1',
      builder: (context, state) => Page1Screen(),
    ),
  ],
)

That’s it, You’re ready.

Parameter

To Spicy the parameter in the path like “:”  before the unique name. For example, if you pass like :studentId. We access parameters using the Go Router state object. 

GoRoute(
  path: '/student/:studentId',
  builder: (context, state) {
     final studentId = state.params['studentId'] // Get "id" param from URL
     return FruitsPage(studentId: studentId);
  },
),

And also, access the query string parameter value using Go Router State. For example, /student?id=peter can read the id parameter.

GoRoute(
  path: '/studentId',
  builder: (context, state) {
    final search = state.queryParams['studentId'];
    return FruitsPage(studentId: studentId);
  },
),

Go Router Guards

In this router, Guards specify redirect without authentication. For example, if the user is not authenticated navigate will be turned, and set up the redirect that guards are allowed any route that is not login will be redirect /login.

A redirect is a callback you can handle the incoming location-based state. For example, using (if condition) you can redirect or not.

GoRouter(
  redirect: (BuildContext context, GoRouterState state) {
    final isAuthenticated = // your logic to check if user is authenticated
    if (!isAuthenticated) {
      return '/login';
    } else {
      return null; // return "null" to display the intended route without redirecting
     }
   },
  ...

Transition Animation

Go Router allows customizing the routing transition animation between two different screens. You handle configuring the transition animation and provide a PageBuilder Parameter to the GoRouter.

GoRoute(
  path: '/student-details',
  pageBuilder: (context, state) {
    return CustomTransitionPage(
      key: state.pageKey,
      child: StudentDetailsScreen(),
      transitionsBuilder: (context, animation, secondaryAnimation, child) {
        // Change the opacity of the screen using a Curve based on the the animation's value
        return FadeTransition(
          opacity: CurveTween(curve: Curves.easeInOutCirc).animate(animation),
          child: child,
        );
      },
    );
  },
),

Error handling (404 page)

In error handling, Go Router has an error screen for MaterialApp and CupertinoApp. You can also replace the default error screen using the errorBuilder Parameter.

GoRouter(
  /* ... */
  errorBuilder: (context, state) => ErrorPage(state.error),
);

Go Router SubRoute

GoRoutes handle the subRoute in the route parameter. For example, one product screen navigates to the details product screen. It’s used to subroutes.

GoRoute(
  path: '/product',
  builder: (context, state) {
    return ProductPage();
  },
  routes: <RouteBase>[ // Add child routes
    GoRoute(
      path: 'product-details', // NOTE: Don't need to specify "/"character for router’sparents
      builder: (context, state) {
        return ProductDetailsPage();
      },
    ),
  ],
)

and if you need to prevent the screenshot or screen recording. Yeah, it’s available on website check it now.