将url参数传递给flutter web答案

【问题标题】：passing url parameters to flutter web将url参数传递给flutter web
【发布时间】：2022-07-25 02:45:02
【问题描述】：

我正在开发一个涵盖多个平台的颤振项目。我的应用程序有一个支付 api，它还有一个回调 url，可以将一些 url 参数发送到我的结果屏幕。我的付款结果屏幕的网址是https://myapp.com/payment-result。我想阅读我的回调 url 的参数，它们是：https://myapp.com/payment-result/?status=20&amount=2 另一方面，这个 url 总是重新启动我的 web 应用程序并将我带到应用程序的第一页。

这是我的付款结果屏幕：


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

我在主小部件上管理我的溃败，如下所示：


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

【问题讨论】：

标签： flutter web url-parameters

【解决方案1】：

您可以使用来自https://pub.dev 的go_router 包。

它是由flutter团队为这种路由制作的。

基本设置

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>[
      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 {...}

对于参数传递：https://gorouter.dev/parameters

官方文档：https://gorouter.dev/

【讨论】：

【解决方案2】：

在 MaterialApp 小部件中使用 onGenerateRoute。

只要 url 与定义的命名路由之一不匹配，就会触发 onGenerateRoute。

这使您可以创建一个 switch / if 语句来定义它应该导航的位置。将“设置”传递给回调，在那里您可以访问 settings.name 以获取未格式化的查询参数。

这是我构建的网络应用程序的示例。

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

这是一个混乱的工作......但它有效。

【讨论】：