Flutter DropdownButtonFormField2：自定义选中值的显示文本

当然可以实现这个需求，核心是利用DropdownButtonFormField2提供的selectedItemBuilder属性，自定义选中状态下输入框内的显示内容，下拉选项的显示逻辑保持不变即可。

修改后的完整代码示例 #

假设你在State类中维护选中项的状态：

class _YourWidgetState extends State<YourWidget> {
  MyItem? _selectedItem;

  List<DropdownMenuItem<MyItem>> _getItems() {
    return widget.items
        .map((e) => DropdownMenuItem(
              value: e,
              child: Container(
                color: AppColors.inputBackgroundColor,
                alignment: Alignment.centerLeft,
                child: Text(
                  '${e.fullName} (${e.shortName})',
                  style: AppStyles.bodyText1,
                ),
              ),
            ))
        .toList();
  }

  @override
  Widget build(BuildContext context) {
    return DropdownButtonFormField2<MyItem>(
      value: _selectedItem,
      items: _getItems(),
      // 自定义选中后输入框内的显示内容
      selectedItemBuilder: (context) {
        return widget.items.map((item) {
          return Container(
            alignment: Alignment.centerLeft,
            child: Text(
              item.shortName,
              style: AppStyles.bodyText1,
            ),
          );
        }).toList();
      },
      onChanged: (value) {
        setState(() {
          _selectedItem = value;
        });
      },
      // 其他必要属性（比如decoration等）可以按需添加
    );
  }
}

关键说明 #

• selectedItemBuilder：这个回调会为每个选项生成选中状态下的显示Widget，这里我们直接返回只包含shortName的文本，实现选中后输入框仅显示简称的效果。
• 原有的_getItems方法不需要修改，下拉弹窗里的选项依然会显示fullName + (shortName)的完整内容。
• 需要维护一个_selectedItem变量来记录当前选中的项，确保value和onChanged正确关联，保证状态同步。

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