Flutter on web, using query params in url redirects to inital route

Question

I'm having a pretty weird issue with Flutter when using it for a web page. I need to process a query param from an external source, which hits my website with e.g /page?param=1

I have a super simple flutter project setup:

import 'package:client/screens/screens.dart';
import 'package:flutter/material.dart';
import 'package:url_strategy/url_strategy.dart';

void main() {
  setPathUrlStrategy();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      routes: {
        "/": (context) => HomeScreen(),
        "/page": (context) => PageScreen(),
      },
    );
  }
}

When going to "/" or "/page" it works fine. But as soon as I go to "/page?param=1". I get the following error:

The following message was thrown:
Could not navigate to initial route.
The requested route name was: "/page?param=1"
There was no corresponding route in the app, and therefore the initial route specified will be
ignored and "/" will be used instead.

Is Flutter not able to see what a query param is? It's web 101 doing something like this, I must be doing something wrong, I just can't find the answer.

Solution

Try using onGenerateRoute callback in MaterialApp, for eg:

   onGenerateRoute: (RouteSettings settings) {
    Widget? pageView;
    if (settings.name != null) {
      var uriData = Uri.parse(settings.name!);
      //uriData.path will be your path and uriData.queryParameters will hold query-params values
 
      switch (uriData.path) {
        case '/page':
          pageView = PageScreen();
          break;
        //....
      }
    }
    if (pageView != null) {
      return MaterialPageRoute(
          builder: (BuildContext context) => pageView!);
    }
  },