Parameter routes using go_router

In this article, we will see how to pass parameters from one screen to another screen using go_router🙌

I will recommend you to read my Navigation in Flutter using go_router article for the implementation of go_router in your flutter app👇

Navigation in Flutter using go_router

Let’s start by defining the path in our route👇

 GoRoute(
      path: '/',
      builder: (BuildContext context, GoRouterState state) {
        return const HomeScreen();
      },
      routes: <RouteBase>[
        GoRoute(
          path: 'details/:name',
          builder: (BuildContext context, GoRouterState state) {
            final name = state.params['name']!;
            return DetailScreen(
              name: name,
            );
          },
        ),
      ],
    ),

In the path, the details is for defining the path, and the:name is used for receiving the parameter. You can access the matched parameters in the state object using the params property.☝️

 ElevatedButton(
    onPressed: () => context.go('/details/Osama'),
    child: const Text('Go to the Details screen'),
  ),

You can pass the parameter using context.go('/your route name/and parameter here')👍

Query Parameters

The other way to pass data as part of a location is to use query parameters, which is a set of name-value pairs passed at the end of a URI after a ? character, e.g.

 ElevatedButton(
    onPressed: () => context.go('/detailsQueryParam?name=Osama'),
    child: const Text('Go to the Details screen'),
  )

These parameters are optional and, if passed, will be provided in the state.queryParams property for every page matched in a stack of routes:

GoRoute(
  path: 'detailsQueryParam',
  builder: (BuildContext context, GoRouterState state) {
    final name = state.queryParams['name']!;
    return DetailScreen(
      name: name,
    );
  },
)

Since query parameters are optional, they will be null if they're not passed.

Extra Parameter

The extra parameter is useful for passing a single object to the builder function w/o passing an object identifier via a URI and looking up the object from a store.

However, the extra object cannot be used to create a dynamic link nor can it be used in deep linking. Furthermore, since a press of the brower's Back button is treated like a deep link for purposes of navigation, the extra object will be lost when the user navigates back via the browser. For these reasons, the use of the extra object is not recommended for use in targeting Flutter web apps.

   ElevatedButton(
      onPressed: () => context.go('/detailsWithExtraParam', extra: "Osama"),
      child: const Text('Go to the Details screen with extra params'),
    ),

 GoRoute(
    path: 'detailsWithExtraParam',
    builder: (BuildContext context, GoRouterState state) {
      final name = state.extra! as String;
      return DetailScreen(
        name: name,
      );
    },
  ),

DEMO

In the above demo also take a look at URI☝️

GitHub - osamaasifoak/go_router_sample_app

GitHub repo link ☝️

Hurray…!!!🥳🥳🥳

So these are the basic steps for implementing parameter routes using go_router in your flutter application. If you like it so, support me by giving claps and follow me to show some love😉