如何为Flutter DropdownMenu添加表单验证？

DropdownMenu本身并没有像DropdownButtonFormField那样的封装组件，但可以通过FormField手动实现表单验证逻辑，具体步骤如下：

• 用FormField包裹DropdownMenu，将选中值作为FormField的初始值
• 在FormField的validator回调中定义验证规则（比如未选中时返回错误提示）
• 管理DropdownMenu的选中状态，在选中项变化时更新FormField的值

以下是完整的示例代码：

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(useMaterial3: true),
      home: const Scaffold(
        body: Padding(
          padding: EdgeInsets.all(16.0),
          child: DropdownMenuFormExample(),
        ),
      ),
    );
  }
}

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

  @override
  State<DropdownMenuFormExample> createState() => _DropdownMenuFormExampleState();
}

class _DropdownMenuFormExampleState extends State<DropdownMenuFormExample> {
  final _formKey = GlobalKey<FormState>();
  String? _selectedValue;
  final List<String> _options = ['选项1', '选项2', '选项3'];

  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      // 验证通过，执行提交逻辑
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(content: Text('表单验证通过')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Form(
      key: _formKey,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          FormField<String>(
            validator: (value) {
              if (value == null || value.isEmpty) {
                return '请选择一个选项';
              }
              return null;
            },
            builder: (FormFieldState<String> state) {
              return Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: [
                  DropdownMenu<String>(
                    initialSelection: _selectedValue,
                    onSelected: (String? value) {
                      setState(() {
                        _selectedValue = value;
                      });
                      state.didChange(value);
                    },
                    dropdownMenuEntries: _options.map((String option) {
                      return DropdownMenuEntry<String>(
                        value: option,
                        label: option,
                      );
                    }).toList(),
                  ),
                  if (state.hasError)
                    Padding(
                      padding: const EdgeInsets.only(top: 8.0),
                      child: Text(
                        state.errorText!,
                        style: TextStyle(color: Theme.of(context).colorScheme.error),
                      ),
                    ),
                ],
              );
            },
          ),
          const SizedBox(height: 24),
          ElevatedButton(
            onPressed: _submitForm,
            child: const Text('提交'),
          ),
        ],
      ),
    );
  }
}

关键说明：

• FormField的builder回调会提供一个state对象，调用state.didChange(value)可以通知Form字段值发生变化，触发验证
• 错误提示可以通过state.hasError和state.errorText获取，手动渲染在DropdownMenu下方
• 点击提交按钮时调用_formKey.currentState!.validate()触发整个表单的验证

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