Flutter如何将DropdownButton选中项数据传递并POST提交至API接口

你原有代码的核心问题有两个：一是value硬编码为固定值，选中选项后UI不会同步更新；二是onChanged回调只做了打印操作，没有对接请求逻辑。按以下步骤修改即可：

• 第一步：将选中值改为可响应的状态变量
  如果你是在StatefulWidget中实现该组件，先在State类中定义状态变量存储当前选中值：

  // 初始默认选中第一项
  String selectedValue = 'Item 1';
  

• 第二步：实现POST提交的公共方法
  推荐用官方维护的http包发网络请求，先在pubspec.yaml的dependencies下添加依赖：

  http: ^1.2.0
  

  配置完成后执行flutter pub get拉取依赖，随后写提交方法，记得处理异常避免崩溃：

  import 'dart:convert';
  import 'package:http/http.dart' as http;
  
  Future<void> postSelectedItem(String item) async {
    // 替换为你实际的API接口地址
    final requestUrl = Uri.parse('https://your-domain.com/api/submit-option');
    try {
      final res = await http.post(
        requestUrl,
        headers: {
          'Content-Type': 'application/json',
          // 接口需要鉴权的话在这里加对应请求头，比如：
          // 'Authorization': 'Bearer your_access_token'
        },
        // 按接口要求的字段结构传参，示例用selected_item作为字段名
        body: jsonEncode({'selected_item': item}),
      );
      // 按需处理返回结果，比如200状态码为提交成功
      if (res.statusCode == 200) {
        // 提交成功后的逻辑，比如弹成功提示、刷新关联数据都写在这里
        print('提交成功');
      } else {
        print('提交失败，错误码：${res.statusCode}');
      }
    } catch (err) {
      // 捕获断网、超时等网络异常
      print('请求出错：$err');
    }
  }
  

  提示：如果接口要求表单格式提交而非JSON，把Content-Type改为application/x-www-form-urlencoded，body不需要jsonEncode，直接传入{'selected_item': item}即可。

• 第三步：改造原有DropdownButton组件
  把硬编码的value替换为状态变量，在onChanged回调中先更新UI状态，再触发提交逻辑：

  DropdownButton(
    value: selectedValue,
    icon: const Icon(Icons.keyboard_arrow_down),
    items: [
      'Item 1',
      'Item 2',
      'Item 3',
      'Item 4',
      'Item 5',
    ].map((String item) {
      return DropdownMenuItem(
        value: item,
        child: Text(item),
      );
    }).toList(),
    onChanged: (String? newValue) {
      if (newValue == null) return;
      // 先刷新UI，同步显示选中的选项
      setState(() {
        selectedValue = newValue;
      });
      // 自动提交选中值到接口
      postSelectedItem(newValue);
    },
  )
  

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