How to add subdirectory in flutter web?

user_13109018 0
Viewed 231

I want to create a shop web application with flutter. I need to add the subdirectory to the URL of the app. For example, if my app address is https://example.app/, then I want to add https://example.app/500 that 500 is one of my product IDs. How can I do that and how to detect that id?

flutter
3 Answers

Recently we developed one web app in Flutter. In that we were managing category with product id.

For that I have used auto_route: ^3.1.3 dependency.

Here is the sample, How you can create routes.

class UserRoute extends PageRouteInfo {        
   UserRoute({List<PagerouteInfo> children}) :        
    super(        
         name,         
         path: '/user/:id',        
         initialChildren: children);        
  static const String name = 'UserRoute';        
}

Check documentation for more info.

user_13189460

In this case, it is using navigator 2. You need to extend RouteInformationParser and check pathSegments.

On your main class, App will return MaterialApp.router and need to provide routerDelegate and routeInformationParser.

 return MaterialApp.router(
      routeInformationParser: _routeInformationParser,
      routerDelegate: _routerDelegate,
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
    );

_routeInformationParser will be extended from RouteInformationParser and _routerDelegate will extend RouterDelegate.

Based on https://example.app/500 it is having pathSegments.length == 2

If will be handled like

   if (uri.pathSegments.length == 2) {
      if (uri.pathSegments[0] != 'details') return AppRoutePath.unknown();// recheck

      final id = int.tryParse(uri.pathSegments[1]);
      if (id == null) return AppRoutePath.unknown();
      return AppRoutePath.details(id);
    }

You can find my practice demo here using navigator2. Also there are great packages for it like, auto_route as @Pratik Butani described , go_router etc.

user_101571270

As others said you can use some package like auto_route or etc. I use the Getx package for state manager and it also has navigation with named routes. You can use dynamic URLs links and do what you want easily.

user_112709340
Related