getting query parameter on initial route flutter

Question

I'm working on a flutter application mainly for the web, and I'm unable to add/get the query parameter from the URL, the query parameter will contain an id, and this id should be used inside the app

this my route setup on my app state:

  return MaterialApp(navigatorKey: key,  initialRoute: '/main',
        routes: {
          // When navigating to the "/" route, build the FirstScreen widget.
          '/main': (context) => Map_View(),
          // When navigating to the "/second" route, build the SecondScreen widget.
          '/second': (context) => TaskClosed(),
        },onGenerateRoute: RouteGenerator.generateRoute,);
  }


  class RouteGenerator{
    
      static Route<dynamic> generateRoute(RouteSettings settings){
        final args = settings.arguments;
        print(args);
        var routingData = settings.name;
      }}

the settings.arguments are always null

so what should I pass to initialRoute to make it accept arguments on the first screen for example, the calling URL should be like this:

https:example.com/main?123

so how to get this parameter from the URL

Use something like this Navigator.pushNamed(context, '/second', arguments: 'https:example.com/main?123') — iDecode
– iDecode, Commented Apr 1, 2021 at 9:48
the parameter should be received from the url on the initial route generator and not within the app — AGV
– AGV, Commented Apr 1, 2021 at 10:14
check this out: sellsbrothers.com/understanding-flutter-deep-links-on-the-web — eeqk
– eeqk, Commented Apr 1, 2021 at 11:12
See qlevar_router, form the example go to params/:id you will get the id — Schaban
– Schaban, Commented Apr 1, 2021 at 13:11

Patrick O'Hara · Accepted Answer · 2021-04-01 13:15:47Z

I tried this code:

class RouteGenerator {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    String? route;
    Map? queryParameters;
    if (settings.name != null) {
      var uriData = Uri.parse(settings.name!);
      route = uriData.path;
      queryParameters = uriData.queryParameters;
    }
    var message =
        'generateRoute: Route $route, QueryParameters $queryParameters';
    print(message);
    return MaterialPageRoute(
      builder: (context) {
        return MyHomePage(title: message);
      },
      settings: settings,
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Test App',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      initialRoute: '/main',
      routes: {
        // '/': (context) {
        //   print('route: /');
        //   return MyHomePage(title: 'Home');
        // },
        '/main': (context) {
          print('route: /main');
          return MyHomePage(title: 'route: Main');
        },
        '/second': (context) {
          print('route: /second');
          return MyHomePage(title: 'route: Second');
        },
      },
      onGenerateRoute: RouteGenerator.generateRoute,
    );
  }
}

When I run the app with the URL http://localhost:55260/#/main?123, I get this output:

generateRoute: Route /, QueryParameters {}
generateRoute: Route /main, QueryParameters {123: }

The screen is displayed for /main and the URL is displayed correctly.

Sam Chan · Accepted Answer · 2021-04-01 17:45:27Z

Sorry, I misunderstand the scenario. Here is my suggest

remove routes

  return MaterialApp(navigatorKey: key,  initialRoute: '/main',
        //routes: {
          // When navigating to the "/" route, build the FirstScreen widget.
          //'/main': (context) => Map_View(),
          // When navigating to the "/second" route, build the SecondScreen widget.
          //'/second': (context) => TaskClosed(),
          // },
       onGenerateRoute: RouteGenerator.generateRoute,);
  }

And change like

class RouteGenerator {
  static Route<dynamic> generateRoute(RouteSettings settings) {
    final args = settings.arguments;
    print(args);
    var routingData = settings.name;
    switch (routingData) {
      case "/main":
        return MaterialPageRoute(
          builder: (context) {
            return Map_View();
          },
          settings: settings,
        );
        break;
      case "/second":
        return MaterialPageRoute(
          builder: (context) {
            return TaskClosed();
          },
          settings: settings,
        );
        break;
      default:
        return MaterialPageRoute(
          builder: (context) {
            return YouUnKnowPage();
          },
          settings: settings,
        );
    }
  }
}

when you call Navigator.of(context).pushNamed("/main",arguments:"123"); It will move to TaskClosed and print 123 in the console

Furthermore, if you directly type the link like https:example.com/main?123 It will lead to YouUnKnowPage instead of Map_View and the arguments will be null. Try to use Navigator.of(context).pushNamed("/main",arguments:"123");

If you insist on directly type the link, you can try this

class RouteGenerator {
  static Route<dynamic> generateRoute(RouteSettings settings) {
      String routingData;
      var arguments;
      if (settings.name != null) {
          routingData = settings.name;
      }
      final args = settings.arguments;

      if (args != null) {
          arguments = args;
      } else {
          Uri settingsUri = Uri.parse(settings.name);
          if (settingsUri.hasQuery) {
            arguments = "${settingsUri.queryParameters}";
          }
          if (settingsUri.pathSegments.length > 1) {
          routingData =
             "/" + settingsUri.pathSegments[settingsUri.pathSegments.length - 1];
          }
      }
    if (arguments != null) {
      print(arguments);
    }
     switch (routingData) {
      case "/main":
        return MaterialPageRoute(
          builder: (context) {
            return Map_View();
          },
          settings: settings,
        );
        break;
      case "/second":
        return MaterialPageRoute(
          builder: (context) {
            return TaskClosed();
          },
          settings: settings,
        );
        break;
      default:
        return MaterialPageRoute(
          builder: (context) {
            return YouUnKnowPage();
          },
          settings: settings,
        );
    }
  }
}

Now it will move to TaskClosed and print {123:} in the console

yes I tried this way and I can get the URL and the query parameter but it will not be shown on the URL and it will not be received after reloading the page, I think there should be a way to receive it from the RouteGenerator on initialroute

Collectives™ on Stack Overflow

getting query parameter on initial route flutter

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related