Flutter 在屏幕之间传递数据

Question

我正在开发一个显示订单列表的 flutter 应用程序，它将显示相应的订单详细信息 onTap，因为我已经看到了很多关于如何将数据从列表屏幕传递到屏幕的示例这显示了传入的对象的详细信息，我们可以通过 widget.obj.name 读取数据。但是，在我的例子中，我想传递其中一个订单的 ID，在这里我可以使用 widget.orderId 从上一个屏幕获取订单 ID，但我无法通过调用 get 来检索详细信息订单详情 API.

为了进一步解释，我将在此处显示我的代码：

在orderlist.dart,

        onTap: () {
          Navigator.push(
            context,
            MaterialPageRoute(
                builder: (context) => OrderDetail(
                      orderId: order.id,
                      onRefresh: onRefresh,
                    )),
          );
      },

在 order_detail.dart 中，我尝试构建 UI，但 model.orderItem.toString() 为 null。当我直接尝试运行 Services().getOrderDetails() API 时，它工作得很好，但是因为我有 OrderItem 模型，我将与提供者一起使用它。

 @override
  Widget build(BuildContext context) {
       return ListenableProvider<OrderItemModel>(
          create: (_) => OrderItemModel(),
          child: Consumer<OrderItemModel>(
          builder: (context, model, child) {
              print("orderItem: " + model.orderItem.toString());
          },
      ));
  }

我收到以下错误：未处理的异常：错误：在此 OrderDetail 小部件上方找不到正确的提供者。这可能是因为您使用的 BuildContext 不包含您选择的提供商。有几个常见的场景：

您尝试阅读的提供商在不同的路线上。提供者是“范围内的”。因此，如果您在路由中插入提供者，则其他路由将无法访问该提供者。
您使用的 BuildContext 是您尝试读取的提供商的祖先。确保 OrderDetail 在您的 MultiProvider/Provider 下。这通常发生在您创建提供者并尝试立即读取它时。

我试过Flutter提供的方案，还是报同样的错误。为了在 orderdetails.dart 中调用 OrderItemModel 提供程序，是否需要在 orderlist.dart 部分中执行任何操作？我错过了什么吗？

Answer 1

总结：将 ListeableProvider 移动到更高的级别（在 orderlist.dart 中），路由被推送到那里（OrderDetail 应该是它的子级）。

我认为这可能是因为 OrderDetail 不是 OrderList 的子项或任何具有 onTap 操作的小部件。发生这种情况是因为您指定了一个路由，其中 OrderDetail 是根并且它不知道其他小部件的提供者。您需要将其包装成 ChangeNotifierProvider（https://flutter.dev/docs/development/data-and-backend/state-mgmt/simple#changenotifierprovider 或您正在使用的 ListeneableProvider）并在那里构建 Order Detail。它看起来类似于：

    ....
    builder: (_) => ChangeNotifierProvider.value(value: model, child: OrderDetail(...));

模型将来自 OrderList，我假设它是提供商。

而在 OrderDetail 中，您将需要 Consumer<OrderItemModel> 而不是 ListeneableProvider。

Flutter 在屏幕之间传递数据

Flutter Passing Data Between Screens

api

flutter

flutter-provider