Flutter中如何将带material索引结构的参数通过HTTP传递给服务端

选型说明 #

• 你现在循环生成零散的单个Map是调试用途的，实际传参必须先把所有参数整合到统一结构，不能直接拿打印的零散Map发请求
• 选List还是HashMap完全匹配后端的接口约定即可：
  • 如果后端要求接收你当前生成的material[0][name]这类带方括号的表单参数：直接用单层HashMap把所有键值对存进去就行，不需要额外嵌套结构
  • 如果后端是标准JSON接口，要接收结构化的物料数组：用List嵌套HashMap的结构，匹配多物料的列表语义，不需要手写拼接方括号格式的键名

具体代码实现 #

方案1：适配当前方括号格式的表单传参 #

这类传参兼容绝大多数传统Web框架的参数解析规则，不需要调整你现有的键名生成逻辑

IconButton(
  onPressed: () {
    // 初始化顶层参数Map，存放所有待传递的键值对
    final Map<String, String> requestParams = {};
    for (var i = 0; i < _controllers.length; i++) {
      if (_controllers[i].text.trim().isEmpty) continue;
      // 所有参数合并到同一个顶层Map，不再拆分生成独立小Map
      requestParams["material[$i][name]"] = nameLabel[i];
      requestParams["material[$i][quantity]"] = _controllers[i].text.trim();
      requestParams["material[$i][type]"] = quantityLabel[i];
    }

    // 发起HTTP请求（以http插件为例）
    import 'package:http/http.dart' as http;
    final requestUri = Uri.parse("你的后端接口地址");
    http.post(
      requestUri,
      // 表单编码会自动处理带方括号的参数，后端可直接解析为material数组结构
      body: requestParams,
    ).then((response) {
      // 处理响应逻辑
      debugPrint("请求返回状态码：${response.statusCode}");
    });
  },
  icon: const Icon(Icons.done)
)

方案2：适配标准JSON接口的结构化传参 #

这类传参是前后端分离项目的主流实现方式，参数语义更清晰

IconButton(
  onPressed: () {
    // 初始化物料数组List
    final List<Map<String, dynamic>> materialList = [];
    for (var i = 0; i < _controllers.length; i++) {
      if (_controllers[i].text.trim().isEmpty) continue;
      // 每个物料对应一个独立Map，存入数组
      materialList.add({
        "name": nameLabel[i],
        "quantity": _controllers[i].text.trim(),
        "type": quantityLabel[i]
      });
    }

    // 发起JSON格式请求
    import 'dart:convert';
    import 'package:http/http.dart' as http;
    http.post(
      Uri.parse("你的后端接口地址"),
      headers: {
        "Content-Type": "application/json"
      },
      body: jsonEncode({
        "material": materialList
      }),
    ).then((response) {
      // 处理响应逻辑
    });
  },
  icon: const Icon(Icons.done)
)

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