在 flutter 应用程序中将搜索添加到现有的下拉按钮

Question

我已经实现了 api 的下拉列表。但现在我想为它实现搜索选项。 下拉列表显示了带有来自 api 的国家名称和国旗的国家列表。 谁能帮我这个。提前致谢。

这是当前下拉按钮的代码：

  Card( margin: EdgeInsets.zero,
 child: Container(
 padding: EdgeInsets.symmetric( horizontal: screenWidth * 0.05), 
child: Obx( () {
 return DropdownButton<String>(
 value: countryController.countryName.value,
 isExpanded: true, 
icon: Icon(Icons.keyboard_arrow_down_outlined), 
iconSize: screenWidth * 0.06, elevation: 16,
 // isDense: true,
 underline: Container( color: Colors.transparent, ),
 onChanged: (String value) { countryController.selectIntlCountry(value);                    
 },
                          items: countryController.countryList
                              .map<DropdownMenuItem<String>>(
                                  (CountryModel item) {
                            return DropdownMenuItem<String>(
                              value: item.countryName,
                              child: Container(
                                // width: 250,
                                child: Row(
                                  children: [
                                    Image.network(
                                      item.flagUrl,
                                      width: screenWidth * 0.09,
                                      fit: BoxFit.contain,
                                    ),
                                    SizedBox(width: screenWidth * 0.03),
                                    Expanded(
                                        child: Text(
                                      item.countryName,
                                      style: TextStyle(
                                          fontSize: screenWidth * 0.045,
                                          fontWeight: FontWeight.w500),
                                    )),
                                  ],
                                ),
                              ),
                            );
                          }).toList(),
                        );
                      
                      },
                    )),
              ),

我试过使用 dropdown_search 包。但未能正确实施。

Answer 1

这是将您的代码与 dropdown_search 一起使用：

Card(
  margin: EdgeInsets.zero,
  child: Container(
    padding: EdgeInsets.symmetric(horizontal: screenWidth * 0.05), 
    child: Obx(() {
      return DropdownSearch<String>(
        mode: Mode.DIALOG,
        showSearchBox: true,
        searchBoxDecoration: InputDecoration(
          hintText: "Search country",
          border: OutlineInputBorder(),
        ),
        items: countryController.countryList.map((item) => item.countryName).toList(),
        label: "Select country",
        selectedItem: countryController.countryName.value,
        popupItemBuilder: (BuildContext context, CountryModel item, bool isSelected) {
          return Container(
            padding: EdgeInsets.all(12.0),
            child: Row(
              children: [
                Image.network(
                  item.flagUrl,
                  width: screenWidth * 0.09,
                  fit: BoxFit.contain,
                ),
                SizedBox(width: screenWidth * 0.03),
                Expanded(
                  child: Text(
                    item.countryName,
                    style: TextStyle(
                      fontSize: screenWidth * 0.045,
                      fontWeight: FontWeight.w500,
                    ),
                  ),
                ),
              ],
            ),
          );
        },
        onChanged: (String value) {
          countryController.selectIntlCountry(value);
        },
      );
    }),
  ),
);

快乐编码...