Flutter中DropdownSearch搜索文本框不显示问题求助

问题原因 #

新版本的dropdown_search已废弃showSearchBox参数，搜索框的显示需要在popupProps中配置，你之前的代码均未开启搜索框的显示开关。

针对第一个代码的修改 #

你使用了PopupPropsMultiSelection.modalBottomSheet模式，需在该配置中添加showSearchBox: true启用搜索框，修改后代码如下：

DropdownSearch<int>(
  items: [1, 2, 3, 4, 5, 6, 7],
  dropdownDecoratorProps: DropDownDecoratorProps(
    dropdownSearchDecoration: InputDecoration(
      labelText: "Modal mode",
      hintText: "Select an Int",
      filled: true,
    ),
  ),
  popupProps: PopupPropsMultiSelection.modalBottomSheet(
    showSearchBox: true, // 开启搜索框显示
    disabledItemFn: (int i) => i <= 3,
    // 可自定义搜索框样式
    searchFieldProps: TextFieldProps(
      decoration: InputDecoration(
        hintText: "搜索数字",
      ),
    ),
  ),
),

针对自定义模型代码的修改 #

你未指定popupProps，默认不会加载搜索框，需补充该配置并开启搜索功能，同时修正filterFn的过滤逻辑（原代码直接返回true无法实现搜索过滤），修改后代码如下：

DropdownSearch(
  enabled: true,
  filterFn: (user, filter) {
    print(filter);
    // 实现实际的搜索过滤逻辑
    return user.firstName.contains(filter) || user.lastName.contains(filter);
  },
  itemAsString: (item) => "${item.firstName} ${item.lastName}",
  dropdownDecoratorProps: DropDownDecoratorProps(
    dropdownSearchDecoration: InputDecoration(
      labelText: "Menu mode",
      hintText: "country in menu mode",
      filled: true,
    ),
  ),
  items: studentController.studentList,
  popupProps: PopupProps.menu(
    showSearchBox: true, // 开启搜索框显示
    searchFieldProps: TextFieldProps(
      decoration: InputDecoration(
        hintText: "搜索学生",
      ),
    ),
  ),
),

关键说明 #

• 无论使用modalBottomSheet还是menu模式，都需要在对应的PopupProps中设置showSearchBox: true才能显示搜索框
• 可通过searchFieldProps自定义搜索框的提示文本、样式等属性
• filterFn需实现真实的过滤逻辑，否则搜索功能无法生效

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