Flutter中如何将DropdownSearch组件移至屏幕顶部、键盘上方？

方案一：改用Dialog类型弹窗 #

将弹窗类型从modalBottomSheet替换为dialog，弹窗会默认显示在屏幕上方，键盘弹出时自动调整位置，确保Ok按钮不会被遮挡。修改后的_buildDropdownSearch方法如下：

Widget _buildDropdownSearch(
    BuildContext context,
    RxList<String> selectedChoice,
    {Widget Function(BuildContext, List<String>)? dropdownCustomBuilder}) {
  return DropdownSearch<String>.multiSelection(
    selectedItems: selectedChoice,
    items: ["choice1", "choice2", "choice3", "choice4", "choice5", "choice6", "choice7", "choice8", "choice9", "choice10", "choice11"],
    dropdownDecoratorProps: DropDownDecoratorProps(
        dropdownSearchDecoration: InputDecoration(
          hintText: 'pickChoice',
          hintStyle: TextStyle(color: Colors.black),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8.0),
            borderSide: BorderSide(
              color: Colors.grey,
            ),
          ),
        )),
    dropdownBuilder: dropdownCustomBuilder,
    popupProps: PopupPropsMultiSelection.dialog(
      dialogProps: DialogProps(
        // 可自定义对话框的边距，适配屏幕
        insetPadding: EdgeInsets.symmetric(horizontal: 16, vertical: 40),
      ),
      searchFieldProps: TextFieldProps(
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
        decoration: InputDecoration(
          hintText: 'Search for choice',
          hintStyle: TextStyle(color: Colors.black),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8.0),
            borderSide: BorderSide(
              color: Colors.grey,
            ),
          ),
        ),
        style: TextStyle(color: Colors.black),
        autofocus: true,
      ),
      showSearchBox: true,
      showSelectedItems: true,
      isFilterOnline: false,
      onItemAdded: (selectedItems, addedItem) {
        selectedChoice.add(addedItem);
      },
      onItemRemoved: (selectedItems, removedItem) {
        selectedChoice.remove(removedItem);
      },
    ),
  );
}

方案二：优化底部弹窗适配键盘 #

如果想保留底部弹窗样式，需开启滚动控制并调整弹窗约束，让Ok按钮始终处于键盘上方：

Widget _buildDropdownSearch(
    BuildContext context,
    RxList<String> selectedChoice,
    {Widget Function(BuildContext, List<String>)? dropdownCustomBuilder}) {
  return DropdownSearch<String>.multiSelection(
    selectedItems: selectedChoice,
    items: ["choice1", "choice2", "choice3", "choice4", "choice5", "choice6", "choice7", "choice8", "choice9", "choice10", "choice11"],
    dropdownDecoratorProps: DropDownDecoratorProps(
        dropdownSearchDecoration: InputDecoration(
          hintText: 'pickChoice',
          hintStyle: TextStyle(color: Colors.black),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8.0),
            borderSide: BorderSide(
              color: Colors.grey,
            ),
          ),
        )),
    dropdownBuilder: dropdownCustomBuilder,
    popupProps: PopupPropsMultiSelection.modalBottomSheet(
      modalBottomSheetProps: ModalBottomSheetProps(
        // 开启滚动控制，让弹窗适配键盘高度
        isScrollControlled: true,
        padding: EdgeInsets.only(bottom: MediaQuery.of(context).viewInsets.bottom),
        // 限制弹窗最大高度，避免内容过长
        constraints: BoxConstraints(maxHeight: MediaQuery.of(context).size.height * 0.7),
      ),
      searchFieldProps: TextFieldProps(
        padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
        decoration: InputDecoration(
          hintText: 'Search for choice',
          hintStyle: TextStyle(color: Colors.black),
          border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8.0),
            borderSide: BorderSide(
              color: Colors.grey,
            ),
          ),
        ),
        style: TextStyle(color: Colors.black),
        autofocus: true,
      ),
      showSearchBox: true,
      showSelectedItems: true,
      isFilterOnline: false,
      onItemAdded: (selectedItems, addedItem) {
        selectedChoice.add(addedItem);
      },
      onItemRemoved: (selectedItems, removedItem) {
        selectedChoice.remove(removedItem);
      },
    ),
  );
}

注意事项 #

• 方案一完全匹配“下拉框移至屏幕顶部”的需求，无需用户滚动即可点击Ok按钮。
• 确保页面的Scaffold未设置resizeToAvoidBottomInset: false，否则弹窗无法自动适配键盘高度。

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