Flutter: go_router how to pass multiple parameters to other screen?

Question

In a vanilla flutter I use to pass multiple parameters to other screen like this:

    Navigator.of(context).push(MaterialPageRoute(
                                    builder: (_) => CatalogFilterPage(
                                          list: list,
                                          bloc: bloc,
                                        )))

Pretty simple and easy. I can pass 2 needed parameters, list and bloc. After use it in CatalogFilterPage.

Now after switching to go_router and looking through documentation I can't seem to find how to pass multiple data. Even passing single object seems not that good:

    onTap: () =>
              context.pushNamed('SelectedCatalogItem', extra: list[index]),

And in router I have to use casting to set correct type:

    builder: (context, state) => SelectedCatalogItem(
                    item: state.extra as ListItemsModel,
                  ),

It was fine for single parameter. But now I don't have an idea how to pass multiple parameters. How can I do it? Is even passing parameters, like models, as an extra is right way?

P.S. I know that you can pass parameters as context.pushNamed('CatalogFilterPage', params: ___), but params has type of Map<String, String> witch not let me pass model's

you can refer to this doc - https://docs.flutter.dev/cookbook/navigation/navigate-with-arguments — Sparsh Jain, Jul 14 '22 at 06:31

krishnaacharyaa · Accepted Answer · 2023-07-09T01:56:16.970

Edit: Breaking changes in Go_router 7.0.0

In NutShell

Below Go Router 7 i.e < 7.0.0 use `params`, `queryParams`
Above Go Router 7 i.e >=7.0.0 use `pathParameters`, `queryParameters`

Summary:

There are three ways: pathParameters, queryParameters, extra

Using pathParameters
- When you know the number of parameters beforehand
- Usage : path = '/routeName/:id1/:id2'
Using queryParameters
- When you are not sure about the number of parameters
- Usage : path = '/routeName'
Using extra
- When you want to pass object

Explanation:

1. Using `pathParameters`

When you know number of params beforehand use pathParameters prop in context.goNamed()

Define it as:

GoRoute(
  path: '/sample/:id1/:id2',  //  Defination of params in the path is important
  name: 'sample',
  builder: (context, state) => SampleWidget(
    id1: state.pathParameters['id1'],
    id2: state.pathParameters['id2'],
  ),
),

Call it as:

ElevatedButton(
  onPressed: () {
    var param1 = "param1";
    var param2 = "param2";
    context.goNamed("sample", pathParameters: {'id1': param1, 'id2': param2});
  },
  child: const Text("Hello"),
),

Receive it as:

class SampleWidget extends StatelessWidget {
  String? id1;
  String? id2;
  SampleWidget({super.key, this.id1, this.id2});

  @override
  Widget build(BuildContext context) {
     ...
  }
}

2. Using `queryParameters`

You have access to queryParameters in the context.goNamed() function. The best thing about queryParameters is that you don't have to explicitly define them in your route path and can easily access them using the state.queryParameters method. You can add miscellaneous user-related data as a query parameter.

Define it as :

GoRoute(
  name: "sample",
  path: "/sample",          
  builder: (context, state) => SampleWidget(
      id1: state.queryParameters['id1'],
      id2: state.queryParameters['id2'],
  ),
)

Call it as:

ElevatedButton(
  onPressed: () {
    var param1 = "param1";
    var param2 = "param2";
    context.goNamed("sample", queryParameters: {'id1': param1, 'id2': param2});
  },
  child: const Text("Hello"),
),

Receive it as:

class SampleWidget extends StatelessWidget {
  String? id1;
  String? id2;
  SampleWidget({super.key, this.id1, this.id2});

  @override
  Widget build(BuildContext context) {
     ...
  }
}

3. Using `extra`

Use this when you want to pass a model/object between routes

GoRoute(
  path: '/sample',
  builder: (context, state) {
    Sample sample = state.extra as Sample; //  casting is important
    return GoToScreen(object: sample);
  },
),

Refer https://stackoverflow.com/a/74813017/13431819 for passing object between routes

if anyone having issues accessing the **extra** object in the **State** then you can do this by using **widget** getter like this **widget.object** — makki, Mar 17 '23 at 10:54
I'd add something to this answer, maybe it's a good design to parse/extract/cast the parameters in `GoRouterWidgetBuilder builder: (context, state) {}` but also could access the state inside the screen by calling `GoRouterState.of(context)` to get `params`, `queryParams` and `extra` — Tarek360, Apr 25 '23 at 11:53
Do I need to use `namedRoute` if I want to use `queryParams`? I was wondering why I can't simply pass it using standard route. — Tom Raganowicz, Apr 26 '23 at 10:58

score 5 · Answer 2 · edited May 08 '23 at 05:04

5

Here is a solution with my own code. In my case, i want to parse MenuModels from HomeScreen to another screen (ItemScreen):

context.push(
    '/item-screen',
    extra: widget.menuModels,
),

And in my route.dart

GoRoute(
    path: '/item-screen',
    builder: (context, state) {
        MenuModels models = state.extra as MenuModels;
        return ItemScreen(
            menuModels: models,
        );
    },
),

edited May 08 '23 at 05:04

Fah

199
9

answered Dec 03 '22 at 08:14

James Indra

51
1
2

what about If we have more than one extraItem? For example, think the itemscreen has both menu models and usermodels? so, how we can push? – alperefesahin Dec 12 '22 at 11:20
Use `List – Roslan Amir Jan 01 '23 at 04:10

score 5 · Answer 3 · answered Dec 12 '22 at 21:51

I am new to Flutter, but here is how I passed multiple parameters/arguments to a route with GoRouter using the extra property of context.push():

// navigate to /my-path, pass 2 arguments to context.state.extra
context.push("/my-path", extra: {"arg1": firstArg, "arg2": secondArg});

Then, inside my route:

// ...
// Use arguments in builder of the GoRoute
GoRoute(
  path: '/dashboard',
  builder: (context, state) {
    Map<String, MyCustomType> args =
      state.extra as Map<String, MyCustomType>;
    return MyWidget(arg1: args["arg1"]!, arg2: args["arg2"]!);
  }
),
// ...

Nazmu Masood · Answer 4 · 2022-08-21T10:56:02.973

From the go_router documentation we can see that:

The extra object is useful if you'd like to simply pass along a single object to the builder function w/o passing an object identifier via a URI and looking up the object from a store.

What you can do instead is pass in the id/name of the 'SelectedCatalogItem' as params and form the Object later on (if possible). The 'params' parameter lets us pass in more than one fields

onTap: () => context.pushNamed('SelectedCatalogItem',
                  params: {"id":list[index].id.toString(),"name":list[index].name}),

Then in the builder function of the GoRouter we can do:

GoRoute(
        path: 'selectedCatalogItem/view/:id/:name',
        name: 'SelectedCatalogItem',
        builder: (context, state){
          int id = int.parse(state.params['id']!);
          String name = state.params['name']!;
          // use id and name to your use...
        });

Hi, I am getting an error when using your code: `missing param "id" for /all/:name/:id` How to fix this error? — My Car, Nov 03 '22 at 12:58

score 0 · Answer 5 · answered Apr 09 '23 at 20:06

Completing the example above (by @Agni Gari)

3. Using extra context.goNamed()

Use this when you want to pass a model/object between routes

Define it as:

GoRoute(
    path: '/sample',
    name: 'sample',
    builder: (context, state) {
      Sample sample = state.extra as Sample; // -> casting is important
      return GoToScreen(object: sample);
    },
  ),

Call it as:

Sample sample = Sample(attributeA: "True",attributeB: "False",boolValue: false);
context.goNamed("sample",extra:sample );

Receive it as:

class SampleWidget extends StatelessWidget {
Sample? object;
SampleWidget({super.key, this.object});

  @override
  Widget build(BuildContext context) {
     ...
  }
}

Flutter: go_router how to pass multiple parameters to other screen?

5 Answers5

Edit: Breaking changes in Go_router 7.0.0

In NutShell

Summary:

Explanation:

1. Using `pathParameters`

Define it as:

Call it as:

Receive it as:

2. Using `queryParameters`

Define it as :

Call it as:

Receive it as:

3. Using `extra`

Linked

Flutter: go_router how to pass multiple parameters to other screen?

5 Answers5

Edit: Breaking changes in Go_router 7.0.0

In NutShell

Summary:

Explanation:

1. Using pathParameters

Define it as:

Call it as:

Receive it as:

2. Using queryParameters

Define it as :

Call it as:

Receive it as:

3. Using extra

Linked

1. Using `pathParameters`

2. Using `queryParameters`

3. Using `extra`