Flutter DropdownMenu是否支持helper与error文本（如DropdownButtonFormField的decoration）？

Material3 的 DropdownMenu 本身没有直接提供设置 errorText 和 helperText 的参数——它是一个纯下拉菜单组件，不像旧版 DropdownButtonFormField 是集成了表单字段装饰的复合组件。要实现类似旧组件的 error/helper 文本效果，同时保留 DropdownMenu 的下移菜单、搜索特性，需要手动组合组件来实现。

实现方案：用 TextField + DropdownMenu 组合 #

通过 TextField（或 OutlinedTextField）作为交互容器，利用它的 InputDecoration 设置 label、errorText、helperText，再关联 DropdownMenu 实现下拉选择和搜索功能。

完整代码示例 #

import 'package:flutter/material.dart';

class MyItem {
  final String title;
  MyItem(this.title);
}

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

  @override
  State<DropdownMenuWithErrorHelper> createState() => _DropdownMenuWithErrorHelperState();
}

class _DropdownMenuWithErrorHelperState extends State<DropdownMenuWithErrorHelper> {
  bool _isMenuOpen = false;
  MyItem? _selectedItem;
  final FocusNode _focusNode = FocusNode();
  final List<MyItem> items = [MyItem('先生'), MyItem('女士'), MyItem('其他')];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: FormField<MyItem>(
          validator: (value) => value == null ? '请选择称谓' : null,
          builder: (field) {
            return Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                TextField(
                  focusNode: _focusNode,
                  readOnly: true,
                  decoration: InputDecoration(
                    labelText: 'Salutation',
                    errorText: field.errorText,
                    helperText: 'helperText',
                    border: const OutlineInputBorder(),
                    suffixIcon: IconButton(
                      icon: Icon(_isMenuOpen ? Icons.arrow_drop_up : Icons.arrow_drop_down),
                      onPressed: () => setState(() => _isMenuOpen = !_isMenuOpen),
                    ),
                  ),
                  controller: TextEditingController(
                    text: _selectedItem?.title ?? '',
                  ),
                  onTap: () => setState(() => _isMenuOpen = true),
                ),
                if (_isMenuOpen)
                  DropdownMenu<MyItem>(
                    focusNode: _focusNode,
                    initialSelection: _selectedItem,
                    onSelected: (value) {
                      setState(() {
                        _selectedItem = value;
                        _isMenuOpen = false;
                        field.didChange(value); // 同步表单字段状态
                      });
                    },
                    dropdownMenuEntries: items.map((item) => DropdownMenuEntry(
                      value: item,
                      label: item.title,
                    )).toList(),
                    // 启用搜索功能
                    enableSearch: true,
                    searchHintText: '搜索称谓',
                    requestFocusOnTap: true,
                  ),
              ],
            );
          },
        ),
      ),
    );
  }
}

关键说明 #

1. 表单验证与错误文本：用 FormField 包裹，通过 validator 返回错误信息，field.errorText 会自动同步到 InputDecoration 的 errorText，无需手动维护错误状态。
2. 交互逻辑：点击 TextField 或后缀图标切换菜单显示状态，选中选项后自动关闭菜单并更新输入框内容。
3. 保留核心特性：DropdownMenu 的 enableSearch 启用搜索功能，菜单会自动显示在输入框下方，符合 Material3 的下移布局特性。
4. 简化版（无需表单验证）：如果不需要表单校验，可以去掉 FormField，直接在 InputDecoration 中手动设置 errorText 值。

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