如何在Flutter中为Dropdown下拉菜单添加必填项验证？

要给这个下拉框添加必填项验证，直接按以下步骤修改代码即可：

1. 在State类中新增变量跟踪错误状态：

bool _isDropdownError = false;

2. 修改InputDecorator的装饰配置，添加错误提示文本并修正错误文本的字体大小：
   把原来的errorStyle: const TextStyle(fontSize: 0.05),替换为：

errorStyle: const TextStyle(fontSize: 10),
errorText: _isDropdownError ? "请选择文档状态" : null,

3. 在下拉框选择选项时自动清除错误状态：
   在DropdownButton2的onChanged回调里补充一行代码：

onChanged: (value) {
  setState(() {
    selectedItem = value as String;
    _isDropdownError = false; // 选择选项后清除错误提示
  });
},

4. 在提交操作时添加验证逻辑（比如点击提交按钮时）：

void _submitForm() {
  setState(() {
    if (selectedItem == null) {
      _isDropdownError = true;
    } else {
      // 验证通过，执行后续提交逻辑
    }
  });
}

修改后的完整代码片段 #

bool _isDropdownError = false; // 新增错误状态变量

// ... 其他代码 ...

Container(
  height: MediaQuery.of(context).size.height * 0.07,
  width: MediaQuery.of(context).size.width * 0.4,
  child: InputDecorator(
    decoration: InputDecoration(
      errorStyle: const TextStyle(fontSize: 10), // 修正错误文本字体大小
      errorText: _isDropdownError ? "请选择文档状态" : null, // 动态显示错误提示
      border: const OutlineInputBorder(
        borderSide: BorderSide(
          color: Colors.black,
        ),
      ),
    ),
    child: DropdownButtonHideUnderline(
      child: DropdownButton2(
        hint: const Text(
          'Select Document Status',
          style: TextStyle(
            fontSize: 8,
          ),
        ),
        items: items1
            .map((item) => DropdownMenuItem<String>(
                  value: item,
                  child: Text(
                    item,
                    style: const TextStyle(
                      fontSize: 10,
                    ),
                  ),
                ))
            .toList(),
        value: selectedItem,
        onChanged: (value) {
          setState(() {
            selectedItem = value as String;
            _isDropdownError = false; // 选择选项后清除错误状态
          });
        },
        buttonHeight: 20,
        buttonWidth: 150,
        itemHeight: 40,
        dropdownWidth: 200,
      ),
    ),
  ),
)

// 提交按钮示例
ElevatedButton(
  onPressed: _submitForm,
  child: const Text("提交"),
)

修改完成后，用户未选择下拉框就点击提交时，InputDecorator会显示红色错误提示；选择选项后，错误提示会自动消失。

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