feat: Query parameters #5

Activity

1. jtdLab commented on Apr 6, 2026

   

   jtdLab

   on Apr 6, 2026

   Last edited by jtdLab

   ContributorAuthor

   More actions

   @shovelmn12 Currently i do the following stuff to make it work:

   1. Give RouteInformationParser its custom parse which returns the full uri including query parameters.
   2. Give WouterRouterDelegate a custom matcher that just matches based on path and with prefix = false + listening to currentConfguration and add it to a BehaviorSubject.
   3. Using flutter_hooks to subscribe and rebuild UI on BehaviorSubject-Change via useQueryParameters.

   import 'package:rxdart/rxdart.dart';
   import 'package:flutter_hooks/flutter_hooks.dart';
   import 'package:wouter/wouter.dart' as w;
   
   class WouterRouterDelegate extends w.WouterRouterDelegate {
     WouterRouterDelegate({
       required super.initial,
       required super.builder,
     }) : super(matcher: _routerDelegateMatcher) {
       addListener(() {
         final uri = Uri.parse(currentConfiguration);
         _queryParametersSubject.add(uri.queryParameters);
         print({
           'path': currentConfiguration,
           'queryParameters': uri.queryParameters,
         });
       });
     }
   }
   
   // Override the default cached Regexp matcher to handle query parameters.
   w.PathMatcher _routerDelegateMatcher() {
     // Create a RegExp builder that caches compiled regular expressions.
     final regexpBuilder = w.cacheRegexpBuilder(w.pathToRegexp);
   
     // Return a PathMatcher that caches (path, pattern, prefix) lookups.
     return w.cache(
       (String path, String pattern, {bool prefix = true}) => w.regexpPathMatcher(
         Uri.parse(path).path,
         pattern,
         regexpBuilder: regexpBuilder, // Uses the cached RegExp builder
         prefix: false,
       ),
     );
   }
   
   final routeInformationParser = w.WouterRouteInformationParser(
     parse: (context, routeInformation) => routeInformation.uri.toString(),
   );
   
   final _queryParametersSubject = BehaviorSubject<Map<String, String>>.seeded({});
   
   Map<String, String> useQueryParameters() {
     final snapshot = useStream(_queryParametersSubject.stream);
     return snapshot.data ?? {};
   }
   
2. shovelmn12 commented on Apr 7, 2026

   

   shovelmn12

   on Apr 7, 2026

   Owner

   More actions

   @jtdLab can you elaborate on what's exactly not working and provide an example? last I checked it worked ...
3. jtdLab commented on Apr 7, 2026

   

   jtdLab

   on Apr 7, 2026

   ContributorAuthor

   More actions

   @shovelmn12

   1. When pushing path like foo?number=1 path matcher does not match the path with query params
   2. When getting that path from browser url bar it cuts the query parameters (

      wouter/packages/wouter/lib/src/route_information.dart

      Lines 67 to 84 in 5360e52

      	/// Parses the given [RouteInformation] from the platform into a route path string.
      	///
      	/// By default, this method extracts the `path` component from the
      	/// `routeInformation.uri`. For example, if `routeInformation.uri` is
      	/// `Uri.parse("https://example.com/users/123?tab=profile#details")`,
      	/// this method will return `"/users/123"`.
      	///
      	/// This method is typically called by the Flutter framework if
      	/// [parseRouteInformationWithDependencies] is not overridden or if
      	/// the custom [parse] callback is not provided when using
      	/// [parseRouteInformationWithDependencies].
      	///
      	/// It returns a [SynchronousFuture] as the parsing is immediate.
      	@override
      	Future<String> parseRouteInformation(
      	RouteInformation routeInformation,
      	) =>
      	SynchronousFuture(routeInformation.uri.path);

      )
4. jtdLab commented on Apr 7, 2026

   

   jtdLab

   on Apr 7, 2026

   ContributorAuthor

   More actions

   @shovelmn12 Maybe i am missing how its intended to get query params with wouter. Could u give me the intended way?
5. shovelmn12 commented on Apr 7, 2026

   

   shovelmn12

   on Apr 7, 2026

   Owner

   More actions

   I think we can actually just pass the full uri ... so it will return "users/123?tab=profile#details" from the example and just "/users/123"....
6. jtdLab commented on Apr 7, 2026

   

   jtdLab

   on Apr 7, 2026

   Last edited by jtdLab

   ContributorAuthor

   More actions

   @shovelmn12 Okay and then just matching via regex. E.g /a:query(|\?.*) should match both /a and /a?foo=1&bar=cool&.... And inside widget i could just parse the uri and get the query params. Is that how its intended?
7. shovelmn12 commented on Apr 7, 2026

   

   shovelmn12

   on Apr 7, 2026

   Owner

   More actions

   I need to check the matcher library I think it works for query params as well ... So that should solve it

   👍React with 👍1Reacted by Jonas Schlauch