Search code examples
flutterdrop-down-menu

Flutter searchable dropdown


I have a widget in my app that i want to search in a class of fermentables the name of them. The name renders alright, the search works well, but when i click on them, the controller is not updated, if i save the app on vscode, then it update.

I use Dropdown2 package, i find it easier to implement and found the example code working well.

Here's my code.

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();
                  }
                },
              ),
            ),

Solution

  • try using dropdown_search its the best dropdown search that i found so far