Flutter web URL navigation like http://localhost:60117/ItemDetails?pId=1 not working

Question

In my flutter project, i have to share a URL which is directly redirect to a particular product details page through social media . so i have added routing-information using velocity_x, my main.dart page is as follows

 @override
Widget build(BuildContext context) {
return MaterialApp.router(
  
  debugShowCheckedModeBanner: false,
  title: 'AppName',
  theme: ThemeData(
      primaryColor: MyAppTheme.primaryColor,
      accentColor:MyAppTheme.accentColor
  ),
routeInformationParser: VxInformationParser(),
routerDelegate: VxNavigator(routes: {

  "/": (_,__)=> MaterialPage(child:SplashScreen()),
  "/login": (_,__)=> MaterialPage(child:SignUp()),
  "/home": (_,__)=> MaterialPage(child:Home(selectedIndex: 0)),
  "/ItemDetails": (uri, _){
    final pId=int.parse(uri.queryParameters["pId"]);     
    return MaterialPage(
      child:ItemDetailsFromAdd(
        pId:pId.toString() ,
      
    ));
  },
  
}),
)

My Initial route is splash screen and after checking authentication it redirects to login page or home page. when i click on a particular item, creates a url "http://localhost:60117/ItemDetails?pId=1" this. But when i try to launch this url from another tab, first it load product detail page and suddenly redirects to my initial page splashscreen.

I tried to change "/" initial route from "/" to "/splash" and changed my "<base href="/splash/">" but it gives a page not found error initially.

How can i access my product detail page directly using this "http://localhost:60117/ItemDetails?pId=1" URL in correct way.

Answer 1

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();
          },
        );
      ;
    },

Try this way

Answer 2

Try adding a hashtag # to the URL:

http://localhost:60117/#/ItemDetails?pId=1

It's the only way to share it if you are running a progressive web app. What's the left of the /#/ tells the browser from where to get the app, and what's after it is the router logic. If you try to remove the /#/, the app doesn't behave normally and reverts back to the default route.

Answer 3

After long testing i found the answer, here my initial route ('/') redirect to the'SplashScreen'. so when i try to access particular item using URL first it comes to SplashScreen and there i coded to redirect to home or Login based on the user authentication. so when i access to a particular item using url it redirect to my login/home. the solution is i changed my initial route to Home page.