Flutter 可搜索下拉菜单

Question

我在我的应用程序中有一个小部件，我想要在可发酵类中搜索它们的名称。名称呈现正常，搜索工作良好，但是当我单击它们时，控制器未更新，如果我在vscode上保存应用程序，则会更新。

我使用Dropdown2包，我发现它更容易实现，并且找到了示例代码可以正常工作。

这是我的代码。

DropdownButtonHideUnderline(
              child: DropdownButton2(
                isExpanded: true,
                hint: Text(
                  'Selecione um fermentável',
                  style: textTheme.bodyMedium,
                ),
                items: fermentables
                    .map((item) => DropdownMenuItem<String>(
                          value: item.name.toLowerCase(),
                          child: Text(
                            item.name,
                            style: const TextStyle(
                              fontSize: 14,
                            ),
                          ),
                        ))
                    .toList(),
                value: selectedFermentable,
                onChanged: (value) {
                  setState(() {
                    selectedFermentable = value as String;
                  });
                },
                buttonHeight: 40,
                buttonWidth: 200,
                itemHeight: 40,
                dropdownMaxHeight: 400,
                searchController: fermentableName,
                searchInnerWidgetHeight: 50,
                searchInnerWidget: Container(
                  height: 50,
                  padding: const EdgeInsets.only(
                    top: 8,
                    bottom: 4,
                    right: 8,
                    left: 8,
                  ),
                  child: TextFormField(
                    expands: true,
                    maxLines: null,
                    controller: fermentableName,
                    decoration: InputDecoration(
                      isDense: true,
                      contentPadding: const EdgeInsets.symmetric(
                        horizontal: 10,
                        vertical: 8,
                      ),
                      hintText: 'Pesquise um fermentável',
                      hintStyle: textTheme.bodyMedium,
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(8),
                      ),
                    ),
                  ),
                ),
                searchMatchFn: (item, searchValue) {
                  return (item.value
                      .toString()
                      .toLowerCase()
                      .contains(searchValue));
                },
                onMenuStateChange: (isOpen) {
                  if (!isOpen) {
                    fermentableName.clear();
                  }
                },
              ),
            ),

- trovap

---

请参考我的答案这里，或使用dropdown_search包。 - Ravindra S. Patil

试试这个完美的答案：https://fluttertpoint.in/searchable-dropdown-flutter - undefined

Answer 1

尝试使用dropdown_search，这是我目前发现的最好的下拉式搜索工具。

- Marc.Msan

Answer 2

请查看multi_select_flutter包，它将帮助您实现所需的功能。它将在文本字段、下拉列表等方面提供广泛的各种搜索功能...

- Nice umang

Answer 3

你说的“控制器未更新”是什么意思？

我已经测试了你的代码，看起来运行良好。

- Ahmed Elsayed

---

当我点击下拉菜单中的项目时，文本表单字段没有被该项目填充。 - trovap

它在我的端上运作良好。你可能想要更新你的问题，提供一个完整的样本。 - Ahmed Elsayed