How can a named route have URL parameters in flutter web?

Question

I'm building a web-app which needs to have a route that gets a post ID and then it will fetch the post using the ID.

How can I have URL arguments let's say /post/:id so id is the argument

My app looks like that currently:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      // title: "Paste",
      initialRoute: "/",
      theme: ThemeData(
          primarySwatch: Colors.green,
          primaryColor: Colors.blue
      ),
      routes: {
        "/": (context) => HomePage(),
        "/post": (context) => PastieRoute()
      },
      debugShowCheckedModeBanner: false
    );
  }
}

EDIT: This is what I tried according to @BloodLoss and for some reason I don't get anything to the console when accessing localhost:8080/post?id=123

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      initialRoute: "/",
      routes: {
        "/": (context) => HomePage(),
        "/post": (context) => PastieRoute()
      },
      onGenerateRoute: (settings) {
        if (settings.name == "/post") {
          print(settings.arguments); // Doesn't fire :(

          return MaterialPageRoute(
            builder: (context) {
              // TODO
            }
          );
        }
      },
      debugShowCheckedModeBanner: false
    );
  }
}

see https://flutteragency.com/pass-parameters-to-web-app/ – M Karimi Nov 28 '21 at 11:33 — M Karimi, Nov 28 '21 at 11:33

score 19 · Answer 1 · answered Jun 05 '20 at 18:08

tl;dr

//in your example: settings.name = "/post?id=123"
final settingsUri = Uri.parse(settings.name);
//settingsUri.queryParameters is a map of all the query keys and values
final postID = settingsUri.queryParameters['id'];
print(postID); //will print "123"

Drilldown

In a perfect world you would access queryParameters with Uri.base.queryParameters because:

Uri.base

Returns the natural base URI for the current platform. When running in a browser this is the current URL of the current page (from window.location.href). When not running in a browser this is the file URI referencing the current working directory.

But currently there is an issue in flutter where you have #/ in your path which messes the Uri.base interpretation of the Uri.
Follow the issue #33245 until this matter is addressed and you will be able to use Uri.base.queryParameters

"Get.rootDelegate.parameters" gor nav2 or navigation 2.0 with Getx — Jefriiyer S, Jul 24 '21 at 03:24
You can use https://pub.dev/packages/url_strategy to get rid of the # — Ryan Remer, Aug 13 '22 at 00:05
I am trying your answer out but myURL/anything just goes to a 404.... only the root myURL works. How do i get to execute the onGenerateROute code? — Ten Digit Grid, Nov 15 '22 at 03:07

BIS Tech · Answer 2 · 2019-08-19T09:52:12.783

3

please follow this link further information https://flutter.dev/docs/cookbook/navigation/navigate-with-arguments

on your MaterialApp

  onGenerateRoute: (settings) {
    // If you push the PassArguments route
    if (settings.name == PassArgumentsScreen.routeName) {
      // Cast the arguments to the correct type: ScreenArguments.
      final ScreenArguments args = settings.arguments;

      // Then, extract the required data from the arguments and
      // pass the data to the correct screen.
      return MaterialPageRoute(
        builder: (context) {
          return PassArgumentsScreen(
            title: args.title,
            message: args.message,
          );
        },

or you can nativate like web using this plugin fluro

edited Aug 19 '19 at 09:52

answered Aug 19 '19 at 08:35

BIS Tech

17,000
12
99
148

1

This looks more like query arguments type of things, which is not what I would expect from something like `/post/:id` since id is just a value and not `key-value` – TheOnlyArtz Aug 19 '19 at 08:41
according to my flutter knowledge, you can't do it like this – BIS Tech Aug 19 '19 at 09:04
Oh alright, I hope it will become a thing for flutter_web. – TheOnlyArtz Aug 19 '19 at 09:33
Can you please check my question edit? and about Fluro. I don't think it's supported for Flutter web? as there's no mentioning about it – TheOnlyArtz Aug 19 '19 at 10:03
@TheOnlyArtz does Fluro support Flutter web? If not any other options available? – user983327 Oct 30 '19 at 07:00

score 3 · Answer 3 · answered Apr 29 '20 at 08:35

I'm new to Flutter, and I found a quirky workaround,...

import 'dart:html';

String itemID;

//My url looks like this,... http://localhost:57887/#item_screen/12345
//Counted 13 characters for '#item_screen/' then got the substring as below 

 itemID = window.location.hash.substring(13);
 print(itemID) //12345

Not very sophisticated, but worked :-D

score 2 · Answer 4 · answered Dec 24 '19 at 04:13

This is how I did it. You can edit it as per your requirements. If you want to use ?q= then use the split by or regex accordingly

Here is the example of both passing in argument as well as passing in url as /topic/:id

  Route<dynamic> generateRoute(RouteSettings settings) {
  List<String> pathComponents = settings.name.split('/');
  final Map<String, dynamic> arguments = settings.arguments;
  switch ("/"+pathComponents[1]) {
    case shareTopicView:
      return MaterialPageRoute(
          builder: (context) => TopicPageLayout(topicID: pathComponents[2]));
    case internalTopicView:
      return MaterialPageRoute(
          builder: (context) => TopicPageLayout(topicID: arguments['topicID']));
    default:
      return MaterialPageRoute(builder: (context) => LandingPage());
  }
}

Dansp · Answer 5 · 2021-04-27T18:07:07.520

Add flutter_modular to your flutter web project.

current version: flutter_modular: ^3.1.1

Read dynamic routes section in: https://pub.dev/packages/flutter_modular#dynamic-routes

Example for the URL /post?id=123

Create your main widget with a MaterialApp and call the ´´´MaterialApp().modular()´´´ method.

 //  app_widget.dart
 import 'package:flutter/material.dart';
 import 'package:flutter_modular/flutter_modular.dart';

 class AppWidget extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return MaterialApp(
       initialRoute: "/",
     ).modular();
   }
 }

Create your project module file extending Module:

 // app_module.dart
 class AppModule extends Module {
   @override
   final List<Bind> binds = [];

   @override
   final List<ModularRoute> routes = [
       ChildRoute('/', child: (_, __) => HomePage()),
       ChildRoute('/post', child: (_, args) => PostPage(id: args.queryParams['id'])),
  ];
 }

3.In main.dart file, wrap the main module in ModularApp to initialize it with Modular:

// main.dart
import 'package:flutter/material.dart';
import 'package:flutter_modular/flutter_modular.dart';

import 'app/app_module.dart';

void main() => runApp(ModularApp(module: AppModule(), child: AppWidget()));

flutter_modular works badly with things like drawers, and swipe back navigation and doesn't actually solve the issue. — Oliver Dixon, Oct 10 '22 at 11:02

score 1 · Answer 6 · edited Jun 12 '22 at 10:43

Here's a workaround that uses the 'default' route as my main route.

I did this because it seems to be the only way that Flutter will allow me to open a URL with an ID in it, that doesn't return a 404.

E.g. Flutter does not seem to respect the '?' separator. So a URL with an ID in it, is read by flutter as an unknown URL. E.g. site.com/invoice?id=999 will return a 404, even in /invoice is set up as route.

My goal: I have a 1-page web app that simply displays a single invoice at a time, which corresponds to the ID in the URL.

My URL

app.com/#/xLZppqzSiSxaFu4PB7Ui

The number at the end of the URL is a FireStore Doc ID.

Here's the code in MyApp:

onGenerateRoute: (settings) {
          List<String> pathComponents = settings.name.split('/');
          switch (settings.name) {
            case '/':
              return MaterialPageRoute(
                builder: (context) => Invoice(),
              );
              break;
            default:
              return MaterialPageRoute(
                builder: (context) => Invoice(
                  arguments: pathComponents.last,
                ),
              );
          }
        },

This sends 'xLZppqzSiSxaFu4PB7Ui' to the 'Invoice' widget.

score 1 · Answer 7 · edited Jun 08 '22 at 18:36

And here is another way to do it:

My url pattern: www.app.com/#/xLZppqzSiSxaFu4PB7Ui

onGenerateRoute: (settings) {
          List<String> pathComponents = settings.name.split('/');
          if (pathComponents[1] == 'invoice') {
            return MaterialPageRoute(
              builder: (context) {
                return Invoice(arguments: pathComponents.last);
              },
            );
          } else
            return MaterialPageRoute(
              builder: (context) {
                return LandingPage();
              },
            );
          ;
        },

score 1 · Answer 8 · answered Nov 13 '21 at 00:27

Try onGenerateRoute with below sample

  final info = settings.arguments as Mediainfo?;

    settings = settings.copyWith(
        name: settings.name! + "?info=" + info!.name, arguments: info);
    return MaterialPageRoute(
        builder: (_) => MediaDetails(info: info), settings: settings);

Regular Jo · Answer 9 · 2022-05-03T21:18:43.277

This was my solution:

First, kind of seperate, I have an abstract class, AppRoutes, which is just a collection of string-routes, that way they're easily maintainable and switchable.

abstract class AppRoutes {    
  static const String guestGetMember = "/guest_getMember";
  ...

  static render(String url, {Map<String, dynamic>? params}) {
    return Uri(path: url, queryParameters: params ?? {}).toString();
  }
}

Now for the code:

Route<dynamic> generateRoute(RouteSettings settings) {
  Uri uri = Uri.parse(settings.name ?? "");
  Map<String, dynamic> params = {};
  // Convert numeric values to numbers. This is optional.
  // You can instead `int.parse` where needed.
  uri.queryParameters.forEach((key, value) {
    params[key] = int.tryParse(value) ?? value;
  });
  final Map<dynamic, dynamic> arguments = (settings.arguments ?? {}) as Map<dynamic, dynamic>;

  return MaterialPageRoute(builder: (context) {
    switch (uri.path) {
      case AppRoutes.guestGetMember:
        return CardGuestViewProfile(memberID: params['memberID']!);
      case AppRoutes...:
        return...;
      default:
        return AppScreen();
    }

    // Navigator routes update web URLs by default,
    // while `onGeneratedRoute` does not. That last
    // line forces it to. The whole of using url
    // variables for me was so that certainly URLs
    // were easily copiable for sharing.
  }, settings: (RouteSettings(name: settings.name)));
}

And then I call it with

Navigator.pushNamed(context,
  AppRoutes.render(AppRoutes.guestGetMember,
    params: {'memberID': memberID.toString()}),
  arguments: {}));

params will be easily visible to web-users because it's a URL variable, while arguments will not be. This of course doesn't mean that arguments is by any means secure, it just means that non-essential information can be passed through this.

How can a named route have URL parameters in flutter web?

9 Answers9

tl;dr

Drilldown

Linked