CODEWITHSUNDEEP
flutterdartroutesflutter-go-routergorouter
Purus
Purus

Reputation: 5799

Equivalent of Navigator Arguments in Flutter Go Router

What will be equivalent of the below Flutter Navigator in terms of Go Router?

    Navigator.pushNamed(
       context,
       Routes.CHANNEL_PAGE,
       arguments:ChannelPageArgs(
         channel:channel,
          initialMessage:message,
        ),
    );

Usually Go Router is based on parameters from the path. But the above example is based on a object instead of primitive parameters.

        GoRoute(
          path: '/profile/:id',
          builder: (context, state) => ProfilePage(id: state.params['id']!),
        ),

Upvotes: 3

Views: 5259

Answers (2)

krishnaacharyaa
krishnaacharyaa

Reputation: 24910

Summary:

There are three ways params,queryParams,extra

  1. Using params
    • When you know the number of parameters beforehand
    • Usage : path = '/routeName/:id1/:id2'
  2. Using queryParams
    • When you are not sure about the number of parameters
    • Usage : path = '/routeName'
  3. Using extra
    • When you want to pass object

Explanation:

1. Using Params

If you want to add a name parameter in the settings route, the path argument should be /settings:name. You can access the route parameter with the state.params["name"] variable.

Define it as:
 GoRoute(
    path: "/settings/:name",
    builder: (context, state) => SettingsPage(
      name: state.params["name"]!,
    ),
 );
Receive it as:
 class SettingsPage extends StatelessWidget {
  final String name;

  const SettingsPage({super.key, required this.name});

  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

2. Using queryParams

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

Add Parameters like so

child: ElevatedButton(
  onPressed: () => context.goNamed("settings", 
  queryParams: {
    "email": "[email protected]",
    "age": "25",
    "place": "India"
    }),
    child: const Text("Go to Settings page"),
),

Receive it as :

GoRoute(
  name: "settings",
  path: "settings",
  builder: (context, state) {
    state.queryParams.forEach(
      (key, value) {
        print("$key:$value");
       },
     );
   return SettingsPage();
 },
)

3. Using extra

 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.

Upvotes: 5

john
john

Reputation: 1998

you can pass object as an extra like this:

final args = ChannelPageArgs(
     channel:channel,
      initialMessage:message,
    )
context.pushNamed('profile', extra: args)

in your goRouter:

      GoRoute(
              path: 'profile',
              name: 'profile',
              pageBuilder: (context, state) {
                final args = state.extra as ChannelPageArgs;
                return MaterialPage(
                  key: state.pageKey,
                  child: ProfilePage(
                    args: args,
                  ),

Upvotes: 4

Related Questions