如何在Flutter中配置含Model类与查询参数的POST请求

我有Java开发背景，在Java里用@Query注解就能轻松给POST请求加查询参数，现在想在Flutter里实现同样的效果——发起POST请求时，既传递模型类作为请求体，又带上email查询参数。

后端接口配置 #

@PostMapping("/account/create")
public ResponseEntity<SignUpResponse> createAccount(@RequestBody BankAccountDto bankAccountDto, @RequestParam("email") String email) throws DataNotFoundException, DataNotAcceptableException, DataAlreadyExistException {
    return bankAccountService.createAccount(bankAccountDto,email);
}

我尝试的Flutter代码 #

static Future<Response?> postData(String endpoint, dynamic body) async {
    var url = Uri.parse(baseUrl + endpoint);
    Map<String, String> header = <String, String>{
      'Authorization': 'Bearer',
      'content-type': 'application/json; charset=UTF-8',
      'Accept': 'application/json'
    };
    try {
      Response response =
          await post(url, body: json.encode(body), headers: header);
      print("The post response returns ${response.body}");
      return response;
    } catch (e) {
      print(e.toString());
      return null;
    }
  }

解决方案 #

要实现同时传递请求体和查询参数，只需在构建Uri时添加查询参数即可，请求体的传递逻辑保持不变。

针对单个email参数的实现 #

static Future<Response?> postDataWithEmail(String endpoint, dynamic body, String email) async {
    // 为Uri添加email查询参数
    var url = Uri.parse(baseUrl + endpoint).replace(queryParameters: {'email': email});
    Map<String, String> header = <String, String>{
      'Authorization': 'Bearer',
      'content-type': 'application/json; charset=UTF-8',
      'Accept': 'application/json'
    };
    try {
      Response response =
          await post(url, body: json.encode(body), headers: header);
      print("The post response returns ${response.body}");
      return response;
    } catch (e) {
      print(e.toString());
      return null;
    }
  }

通用多查询参数实现 #

如果需要支持多个查询参数，可以把方法改成更通用的版本：

static Future<Response?> postData(String endpoint, dynamic body, [Map<String, String>? queryParams]) async {
    Uri url = Uri.parse(baseUrl + endpoint);
    // 若存在查询参数，添加到Uri中
    if (queryParams != null) {
      url = url.replace(queryParameters: queryParams);
    }
    Map<String, String> header = <String, String>{
      'Authorization': 'Bearer',
      'content-type': 'application/json; charset=UTF-8',
      'Accept': 'application/json'
    };
    try {
      Response response =
          await post(url, body: json.encode(body), headers: header);
      print("The post response returns ${response.body}");
      return response;
    } catch (e) {
      print(e.toString());
      return null;
    }
  }

调用示例 #

// 传递email查询参数
postData('/account/create', bankAccountDto.toJson(), {'email': 'user@example.com'});

核心逻辑说明：

• Flutter的Uri对象通过replace方法的queryParameters参数，对应后端的@RequestParam，和Java里@Query的作用一致。
• 请求体依旧通过json.encode(body)序列化模型类，对应后端的@RequestBody，保持原有逻辑不变。

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