Dart/Flutter中如何从接口JSON响应提取total_amount值存为字符串

需求背景 #

在Flutter项目中使用Bloc模式实现XpayCubit支付逻辑时，原有代码会存储、打印接口返回的全量响应数据，现需要调整逻辑，仅提取响应中的total_amount字段值，存储为字符串类型。

原有代码问题 #

• 未按照接口返回的JSON结构解析数据，直接将全量响应转字符串赋值
• 缺少接口返回状态校验，异常场景下会错误触发成功状态
• 目标字段取值路径错误，无法拿到正确的总金额数值

接口返回结构说明 #

接口返回的JSON层级如下，目标字段路径为：根节点 -> Total Amount -> data -> total_amount

{
  "Total Amount": {
    "status": { "code": 200, "message": "success", "errors": [] },
    "data": {
      "total_amount": 500.0,
      "total_amount_currency": "EGP",
      "KIOSK": { "total_amount": 500.0, "total_amount_currency": "EGP" }
    },
    "count": null,
    "next": null,
    "previous": null
  }
}

修改后完整代码 #

import 'package:tagyourtaxi_driver/models/first_token.dart';
import 'package:tagyourtaxi_driver/modules/payment/cubit/states.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:tagyourtaxi_driver/pages/NavigatorPages/walletpage.dart';
import 'package:tagyourtaxi_driver/pages/login/get_started.dart';
import 'package:tagyourtaxi_driver/shared/components/constants.dart';
import 'package:tagyourtaxi_driver/xpay/xpaymodels/prepare_amount.dart';
import 'package:tagyourtaxi_driver/xpay/xpayshared/xpayconstants.dart';
import 'package:tagyourtaxi_driver/xpay/xpaycubit/xpaystates.dart';
import 'package:tagyourtaxi_driver/xpay/xpaymodels/xpay_payment.dart';

import '../../../functions/functions.dart';
import '../../shared/network/dio.dart';

class XpayCubit extends Cubit<XpayStates>{
  XpayCubit(): super(XpayPaymentInitialState());

  static XpayCubit get(context)=> BlocProvider.of(context);

  PrepareAmount? prepareAmount;

  Future getPrepareAmount(String addMoney,String CommunityId) async {
    DioHelperPayment.postData(
        url: 'payments/prepare-amount/',
        data: {
          'community_id': CommunityId,
          'amount': addMoney.toString()
        }).then((value) {
      // 逐层解析响应结构
      final response = value.data as Map<String, dynamic>;
      final totalAmountModule = response['Total Amount'] as Map<String, dynamic>;
      final respStatus = totalAmountModule['status'] as Map<String, dynamic>;
      
      // 校验接口返回状态
      if (respStatus['code'] == 200) {
        final respData = totalAmountModule['data'] as Map<String, dynamic>;
        // 提取total_amount转字符串存储
        TotalAmount = respData['total_amount'].toString();
        print('Total Amount: ${TotalAmount}');
        emit(XpayPaymentSuccessState());
      } else {
        emit(XpayPaymentErrorState(respStatus['message'].toString()));
      }
    }).catchError((error){
      emit(XpayPaymentErrorState(error));
    });
  }
}

关键修改点说明 #

• 按照JSON层级逐层解析，不再直接操作全量响应数据
• 新增接口返回状态码校验，只有状态码为200（请求成功）时才提取金额、触发成功状态
• 精准定位到data节点下的total_amount字段，调用toString()转为字符串类型后赋值
• 异常场景下返回接口自带的错误信息，方便后续定位问题

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