Flutter：如何获取Firebase选项的文本值而非文档ID

1. 修复下拉选择后提示语与选中文本共存的问题 #

你需要维护一个变量存储当前选中的车牌文本（比如String? selectedPlateText），而非文档ID，同时做好组件间的值同步：

• 将DropdownMenuItem的value设为选项的车牌文本（而非文档ID）
• 在DropdownButton的onChanged回调里更新选中文本变量
• 让TextFormField的初始值绑定这个变量，并在选中后清空提示语

示例代码片段：

// 状态变量：存储选中的车牌文本
String? selectedPlateText;

// 构建下拉选项
DropdownMenuItem<String>(
  value: option.plateText, // 假设option对象里有plateText字段存储A1这类值
  child: Text(option.plateText),
)

// 下拉按钮配置
DropdownButton<String>(
  value: selectedPlateText,
  hint: const Text('选择车牌'), // 未选择时的提示语
  onChanged: (newValue) {
    setState(() {
      selectedPlateText = newValue;
    });
  },
  items: optionsList.map((option) => DropdownMenuItem(...)).toList(),
)

// 关联的文本输入框
TextFormField(
  initialValue: selectedPlateText,
  enabled: false, // 不需要手动输入可设为禁用
  decoration: InputDecoration(
    hintText: selectedPlateText == null ? '请选择车牌' : null, // 选中后清空提示语
  ),
)

这样设置后，选中选项时文本框会直接显示选中内容，不会和提示语共存。

2. 保存选中的文本值到Firebase集合 #

因为已经用selectedPlateText存储了目标文本（比如A1），直接将该变量的值写入目标集合即可，无需使用文档ID：

示例代码：

// 写入到目标集合（示例集合名为user_vehicles）
Future<void> savePlateNumber() async {
  if (selectedPlateText != null) {
    await FirebaseFirestore.instance.collection('user_vehicles').add({
      'plate_number': selectedPlateText,
      // 其他需要存储的字段...
    });
  }
}

如果你的vehicle_options集合中文档的车牌文本字段名为plate_text，获取选项列表时要正确取出该字段：

// 从vehicle_options拉取选项数据
Future<List<Map<String, dynamic>>> fetchVehicleOptions() async {
  QuerySnapshot snapshot = await FirebaseFirestore.instance.collection('vehicle_options').get();
  return snapshot.docs.map((doc) => {
    'id': doc.id,
    'plateText': doc['plate_text'], // 匹配集合中的字段名
  }).toList();
}

核心注意事项 #

• 不要把DropdownMenuItem的value设为文档ID，直接绑定需要显示和保存的车牌文本
• 保证TextFormField的提示语仅在未选中状态下显示
• 写入Firebase时直接使用selectedPlateText变量的值

内容的提问来源于stack exchange，提问作者I Can Done