Flutter集成添加入库功能时如何按指定JSON格式传数据给http包

前置准备 #

首先确认你已经在项目中引入http和dart:convert依赖，pubspec.yaml配置参考：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0

配置完成后执行flutter pub get安装依赖。

实现步骤 #

1. 收集前端表单数据
   你已经完成视图层开发，直接从对应的控制器/状态变量中获取如下字段：

• 商品ID：编辑场景下传实际ID值，新增场景传空字符串
• 站点ID：根据业务逻辑赋值，示例中为固定值2
• 商品名称：对应名称输入框的输入值
• 单位：对应下拉菜单选中的value值
• 分支库存列表：遍历所有分支对应的库存输入项，组装为Map数组

2. 构造符合要求的请求参数Map
   示例代码如下：

// 假设你已经从视图层拿到了对应变量值
String? goodsId = ''; // 编辑场景替换为实际ID
int stationId = 2;
String goodsName = 'Test Stocks';
String selectedUnit = '1'; // 下拉框选中值
List<Map<String, dynamic>> branchStockList = [
  {
    "branch_id": 87, 
    "kg": 10,
    "gm": 5,
    "ltr": 0,
    "ml": 0,
    "counter": 0
  },
  {
    "branch_id": 88, 
    "kg": 10,
    "gm": 8,
    "ltr": 0,
    "ml": 0,
    "counter": 0
  }
];

// 组装请求参数
Map<String, dynamic> requestParams = {
  "id": goodsId,
  "station_id": stationId,
  "name": goodsName,
  "unit": selectedUnit,
  "branches": branchStockList
};

3. 发起HTTP请求
   将构造好的Map转为JSON字符串，设置正确的请求头后调用http包发送请求：

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<void> submitStockData() async {
  var url = Uri.parse('你的接口请求地址');
  var response = await http.post(
    url,
    headers: {
      'Content-Type': 'application/json',
      // 有鉴权需求的话在这里加token等请求头
    },
    body: jsonEncode(requestParams),
  );
  
  if (response.statusCode == 200) {
    // 请求成功处理逻辑
    var respData = jsonDecode(response.body);
  } else {
    // 请求失败处理逻辑
  }
}

注意事项 #

• 如果是编辑场景，直接将goodsId赋值为当前编辑商品的实际ID即可，无需改动其他结构
• 分支库存列表需要和你视图层的分支输入项一一对应，确保每个分支的数值都正确收集后再组装
• 接口如果要求表单格式提交而非JSON格式，可直接将requestParams传给body参数，不需要调用jsonEncode，同时调整请求头为application/x-www-form-urlencoded即可

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