如何在Flutter中接收POST请求的响应并传递给预览模态框

1. 修正类型错误并声明状态变量 #

你当前_save方法中接收返回值的类型存在错误，接口返回的是Reservation?类型，不是Response，先在你的State类中声明保存响应数据的变量：

class YourPageState extends State<YourPage> {
  // 新增这个变量存储接口返回的预约数据
  Reservation? _fetchedReservation;
  // 其余原有代码...
}

2. 调整_save方法接收返回值并赋值 #

把你原来的_save方法里的变量类型改对，拿到返回值后赋值给上面声明的状态变量，之后触发模态框展示即可：

_save() async {
  if (_formKeyBooking.currentState!.validate()) {
    setState(() => _isLoading = true); // 建议添加请求中的加载状态
    Reservation reservationObject = Reservation(
      roomId: _roomController.text,
      email: _emailController.text,
      quantity: _quantityController.text.toString(),
      checkInDate: DateTime.parse(_checkInController.text),
      checkOutDate: DateTime.parse(_checkOutController.text),
    );
    // 这里修改接收类型为Reservation?
    Reservation? data = await Provider.of<BookingService>(context, listen: false)
        .priceReservation(reservationObject);
    setState(() {
      _isLoading = false;
      // 接口返回成功的话赋值给状态变量
      if (data != null) _fetchedReservation = data;
    });
    if (data != null) {
      toastMessage(ToasterService.successMsg);
      // 赋值完成后直接调起预览模态框
      _showPreviewModal();
    } else {
      toastMessage("请求失败，请重试");
    }
  } else {
    toastMessage(ToasterService.errorMsg);
  }
}

3. 实现预览模态框方法，直接读取状态变量展示数据 #

void _showPreviewModal() {
  if (_fetchedReservation == null) return;
  showDialog(
    context: context,
    builder: (context) => AlertDialog(
      title: const Text("预约价格预览"),
      content: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisSize: MainAxisSize.min,
          children: [
            Text("邮箱：${_fetchedReservation!.email}"),
            Text("入住天数：${_fetchedReservation!.nights}晚"),
            Text("房间类型：${_fetchedReservation!.room.name}"),
            Text("总价：¥${_fetchedReservation!.totalPrice.total.toStringAsFixed(2)}"),
            // 其余你需要展示的字段按需添加即可
          ],
        ),
      ),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context),
          child: const Text("关闭"),
        ),
        TextButton(
          onPressed: () {
            // 这里可以添加确认提交的业务逻辑
            Navigator.pop(context);
          },
          child: const Text("确认预约"),
        ),
      ],
    ),
  );
}

注意事项 #

请确认你的Reservation模型类的fromJson方法已经正确适配你给出的响应结构，你在接口请求中json.decode(response.body)之后需要调用Reservation.fromJson(data)转成对象再返回，不然会出现类型转换错误：

// 修正你的DbRequest层的返回逻辑
if (response.statusCode == 202) {
  print(data);
  // 这里要转成Reservation对象再返回，不能直接返回Map类型的data
  return Reservation.fromJson(data);
}

内容的提问来源于stack exchange，提问作者Emmon