passing url parameters to flutter web

Question

I'm working on a flutter project that covers multiple platforms. My app has a payment api, which also has a callback url that sends some url parameters to my result screen. The url for my payment result screen is https://myapp.com/payment-result. I'd like to read the parameters of my call back url, which are: https://myapp.com/payment-result/?status=20&amount=2 This url, on the other hand, always restarts my web application and takes me to the first page of the app.

this is my payment result screen :


class PaymentResult extends StatelessWidget {
  static const routeName = '/payment-result';

  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)!.settings.arguments as Map;
    bool shouldPop = true;
    return WillPopScope(
      onWillPop: () async {
        Navigator.of(context).popAndPushNamed('tab-screen');
        return shouldPop;
      },
      child: Scaffold(
        body:  kIsWeb ? WebWidget(args:args): MobileWidget(args: args),
      ),
    );
  }
}

and I managing my routs on main widget like this :


   routes: {
                    SelectPlan.routName: (ctx) => SelectPlan(),
                    MealDetails.routeName: (ctx) => MealDetails(),
                    AuthScreen.routeName: (ctx) => AuthScreen(),
                    PaymentResult.routeName: (ctx) => DailyDetails(),
                    SelectSub.routeName: (ctx) => SelectSub(),
                    OrderScreen.routName: (ctx) => OrderScreen(),

user_15225566 · Answer

You can use go_router package from https://pub.dev.

it is made by flutter team for this kind of routing.

Basic set up

class App extends StatelessWidget {
  App({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) => MaterialApp.router(
        routeInformationParser: _router.routeInformationParser,
        routerDelegate: _router.routerDelegate,
        title: 'GoRouter Example',
      );

  final GoRouter _router = GoRouter(
    routes: [
      GoRoute(
        path: '/',
        builder: (BuildContext context, GoRouterState state) => const Page1Screen(),
      ),
      GoRoute(
        path: '/page2',
        builder: (BuildContext context, GoRouterState state) => const Page2Screen(),
      ),
    ],
  );
}

class Page1Screen extends StatelessWidget {...}

class Page2Screen extends StatelessWidget {...}

For Parameter pass : https://gorouter.dev/parameters

official docs: https://gorouter.dev/

user_14329886 · Answer

Use onGenerateRoute in the MaterialApp widget.

onGenerateRoute is fired whenever the url doesn't match one of the defined named routes.

This lets you create a switch / if statement to define where it should navigate. Pass in the "settings" to the callback, there you can access settings.name to get the unformatted query parameters.

Here's an example from a web app that i've built.

onGenerateRoute: (settings) {
          var startParamIndex = settings.name?.indexOf('=');
          var fragmentEndIndex = settings.name?.indexOf('?');
          if (settings.name != null &&
              startParamIndex != -1 &&
              startParamIndex != null &&
              settings.name?.substring(0, fragmentEndIndex) == '/submitted') {
            var name = settings.name!;
            var queryParameter =
                name.substring(startParamIndex).replaceFirst('=', '');
            return MaterialPageRoute(
              builder: (_) =>
                  OrderSubmittedScreen(orderDocRefEnc: queryParameter),
            );
          } else {
            return MaterialPageRoute(
                builder: (_) => MenuScreen(restaurant: 'bennys'));
          }
        },

It's a messy work around... but it works.

passing url parameters to flutter web

2 Answers