如何在Flutter中发起带URL编码请求体的HTTP POST请求？

我太懂你现在的困扰了：想发一个application/x-www-form-urlencoded类型的POST请求，但嵌套的Map数据怎么处理都不对——直接传Map报错，用json.encode又变成纯文本JSON，完全不符合要求。这其实是因为Flutter的http.post方法对嵌套Map的处理有限制，咱们一步步来搞定它。

问题根源 #

当你直接把嵌套的_InternalLinkedHashMap传给body参数时，Flutter的http包默认会尝试把它转换成URL编码的键值对，但它只支持扁平的键值对，嵌套的Map无法直接转换，所以才会抛出类型转换错误。而用json.encode的话，生成的是JSON字符串，此时请求的Content-Type其实是text/plain（除非你手动设置成application/json），这和你要的URL编码格式完全不是一回事。

解决方案：把嵌套Map转成扁平的URL编码格式 #

URL编码的请求体支持用parentKey[childKey]这种格式来表示嵌套结构，咱们可以手动把嵌套Map展开成这种扁平格式，再生成符合要求的编码字符串。

方法1：手动扁平化简单结构

如果你的数据结构不复杂，直接手动写成扁平键值对就行：

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

void sendMatchRequest() async {
  final url = "你的API地址";
  
  // 把嵌套结构转成URL编码支持的扁平格式
  final formData = {
    "homeTeam[team]": "Team A",
    "awayTeam[team]": "Team B"
  };
  
  // 生成URL编码的字符串（自动处理特殊字符）
  final encodedBody = Uri(queryParameters: formData).query;
  
  final response = await http.post(
    Uri.parse(url),
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/x-www-form-urlencoded"
    },
    body: encodedBody,
  );
  
  print("响应状态码：${response.statusCode}");
  print("响应内容：${response.body}");
}

方法2：递归处理复杂嵌套结构

如果你的数据有多层嵌套，写个递归函数自动展开会更高效：

// 递归展开嵌套Map为扁平的URL编码键值对
Map<String, String> flattenNestedMap(Map<String, dynamic> map, [String parentKey = '']) {
  final result = <String, String>{};
  
  map.forEach((key, value) {
    // 拼接父键和子键，比如homeTeam + team → homeTeam[team]
    final currentKey = parentKey.isEmpty ? key : '$parentKey[$key]';
    
    if (value is Map) {
      // 如果值还是Map，继续递归展开
      result.addAll(flattenNestedMap(value as Map<String, dynamic>, currentKey));
    } else {
      // 普通值直接转成字符串存入
      result[currentKey] = value.toString();
    }
  });
  
  return result;
}

// 使用示例
void sendComplexRequest() async {
  final url = "你的API地址";
  
  // 原始嵌套数据
  final match = { 
    "homeTeam": {"team": "Team A", "score": 2}, 
    "awayTeam": {"team": "Team B", "score": 1} 
  };
  
  // 自动展开成扁平结构
  final flatData = flattenNestedMap(match);
  // 生成URL编码字符串
  final encodedBody = Uri(queryParameters: flatData).query;
  
  final response = await http.post(
    Uri.parse(url),
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/x-www-form-urlencoded"
    },
    body: encodedBody,
  );
}

关键说明 #

• Uri(queryParameters: formData).query会自动对所有键和值进行URL编码（比如把[转成%5B，空格转成+），避免因为特殊字符导致请求解析失败。
• 一定要在headers里明确设置Content-Type: application/x-www-form-urlencoded，这样服务器才会按照URL编码的规则解析请求体。

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