Flutter中如何将下拉菜单选项值发送至server/API？

1. 准备工作 #

先在pubspec.yaml里添加http依赖：

dependencies:
  flutter:
    sdk: flutter
  http: ^1.1.0

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

2. 实现下拉菜单与API发送逻辑 #

用StatefulWidget管理选中值的状态，完整示例代码如下：

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

class DropdownApiSender extends StatefulWidget {
  const DropdownApiSender({super.key});

  @override
  State<DropdownApiSender> createState() => _DropdownApiSenderState();
}

class _DropdownApiSenderState extends State<DropdownApiSender> {
  // 存储选中的下拉值
  String? _selectedValue;
  // 自定义下拉选项列表，可根据业务替换
  final List<String> _dropdownOptions = ['选项A', '选项B', '选项C', '选项D'];

  // 发送选中值到API的异步方法
  Future<void> _sendSelectedValue() async {
    if (_selectedValue == null) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('请先选择一个选项')),
      );
      return;
    }

    try {
      // 替换为你的实际API地址
      final url = Uri.parse('https://your-api-endpoint.com/submit');
      final response = await http.post(
        url,
        headers: {'Content-Type': 'application/json'},
        body: jsonEncode({'selected_item': _selectedValue}),
      );

      if (response.statusCode == 200) {
        ScaffoldMessenger.of(context).showSnackBar(
          const SnackBar(content: Text('数据发送成功')),
        );
      } else {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('发送失败，状态码: ${response.statusCode}')),
        );
      }
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('请求异常: $e')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('下拉菜单发API示例')),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            // 下拉菜单组件
            DropdownButton<String>(
              value: _selectedValue,
              hint: const Text('请选择选项'),
              items: _dropdownOptions.map((String option) {
                return DropdownMenuItem<String>(
                  value: option,
                  child: Text(option),
                );
              }).toList(),
              onChanged: (String? newValue) {
                setState(() {
                  _selectedValue = newValue;
                });
              },
            ),
            const SizedBox(height: 24),
            // 触发发送的按钮
            ElevatedButton(
              onPressed: _sendSelectedValue,
              child: const Text('发送选中值到API'),
            ),
          ],
        ),
      ),
    );
  }
}

3. 关键细节说明 #

• 状态同步：通过setState更新选中值，保证UI实时响应选择变化。
• 请求适配：如果你的API要求表单提交而非JSON，可替换为http.post的body参数为FormData格式。
• 异常处理：覆盖了空选择、HTTP状态错误、网络异常三种场景，给用户明确反馈。
• 扩展场景：如果下拉选项需要从API动态获取，可在initState里先发起请求填充_dropdownOptions。

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