Flutter中dropdown_search多选模式弹窗OK按钮文本修改方法

在使用dropdown_search包的多选模式时，默认弹窗的「OK」按钮文本无法通过官方文档直接找到配置项修改，原使用代码如下：

DropdownSearch<String>.multiSelection(
    popupProps: PopupPropsMultiSelection.menu(
        showSearchBox: false,
        showSelectedItems: false,
        fit: FlexFit.loose,
    ),
)

可以通过以下方式自定义按钮文本：

实现步骤 #

1. 定义GlobalKey用于获取DropdownSearch的状态，实现选中项的同步更新
2. 在PopupPropsMultiSelection.menu中配置validationWidgetBuilder，完全自定义弹窗底部的确认按钮区域

完整代码示例 #

final _popupCustomValidationKey = GlobalKey<DropdownSearchState<String>>();

DropdownSearch<String>.multiSelection(
    key: _popupCustomValidationKey,
    popupProps: PopupPropsMultiSelection.menu(
        showSearchBox: false,
        showSelectedItems: false,
        fit: FlexFit.loose,
        validationWidgetBuilder: (context, items) => Padding(
          padding: const EdgeInsets.all(8),
          child: Align(
            alignment: Alignment.centerRight,
            child: ElevatedButton(
              onPressed: () {
                // 将弹窗内选中的条目同步到组件
                _popupCustomValidationKey.currentState?.changeSelectedItems(items);
                // 关闭弹窗
                Navigator.pop(context);
              }, 
              child: Text("自定义文本"), // 替换为你需要的按钮文本
            ),
          ),
        ),
    ),
)

代码说明 #

• validationWidgetBuilder会替换弹窗底部默认的确认区域，支持完全自定义按钮的样式、文本和点击逻辑
• 通过GlobalKey调用changeSelectedItems(items)，可以将弹窗内当前选中的条目同步到DropdownSearch组件
• 点击自定义按钮后，手动调用Navigator.pop(context)完成弹窗关闭操作

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