Flutter如何使用dropdown_search插件

在Flutter项目中使用dropdown_search插件时遇到了问题，想请教一下具体的使用方法。我已经按照文档添加了依赖并导入了插件，但下拉菜单的样式和交互效果不太理想。请问如何自定义下拉菜单的样式？另外，如何实现异步加载数据源并绑定到下拉框？在选中选项后，怎样获取选中的值并触发回调事件？希望有详细的代码示例说明，谢谢！

2 回复

使用dropdown_search插件很简单，步骤如下：

  1. 添加依赖：在pubspec.yaml的dependencies下添加：

    dropdown_search: ^4.0.1

  2. 基本使用：

    DropdownSearch<String>(
  popupProps: PopupProps.menu(
    showSelectedItems: true,
  ),
  items: ["巴西", "中国", "美国"],
  onChanged: print,
  selectedItem: "中国",
)

  3. 常用属性：

    • items：下拉选项列表
    • onChanged：选择回调
    • selectedItem：默认选中项
    • popupProps：弹窗配置
    • dropdownBuilder：自定义显示样式

  4. 异步数据： 使用asyncItems替代items，例如从API加载数据。

注意：记得在文件头部导入import 'package:dropdown_search/dropdown_search.dart';

更多关于Flutter如何使用dropdown_search插件的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在 Flutter 中使用 dropdown_search 插件可以创建功能丰富的下拉搜索选择框，支持搜索、异步数据加载等。以下是基本使用方法：

1. 添加依赖

在 pubspec.yaml 文件的 dependencies 部分添加：

dependencies:
  dropdown_search: ^5.0.2  # 使用最新版本

然后运行 flutter pub get。

2. 基本使用示例

import 'package:flutter/material.dart';
import 'package:dropdown_search/dropdown_search.dart';

class MyDropdownPage extends StatelessWidget {
  // 模拟数据
  final List<String> items = [
    "Brazil", "Italy", "France", "USA", "Germany", "China", "Japan"
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("DropdownSearch Demo")),
      body: Padding(
        padding: EdgeInsets.all(20),
        child: DropdownSearch<String>(
          items: items,
          onChanged: (value) {
            print("Selected: $value");
          },
          selectedItem: "Brazil", // 默认选中项
          dropdownBuilder: (context, selectedItem) {
            return Text(selectedItem ?? "Select a country");
          },
          popupProps: PopupProps.menu(
            showSearchBox: true, // 启用搜索框
            searchFieldProps: TextFieldProps(
              decoration: InputDecoration(
                hintText: "Search...",
                border: OutlineInputBorder(),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

3. 主要参数说明

  • items：选项列表（必填）
  • onChanged：选择回调函数
  • selectedItem：默认选中项
  • popupProps：弹出框配置
    • showSearchBox: true 显示搜索框
    • searchFieldProps 搜索框样式配置

4. 异步数据加载

DropdownSearch<String>(
  asyncItems: (filter) => _loadDataFromApi(filter),
  onChanged: (value) => print(value),
  popupProps: PopupProps.menu(showSearchBox: true),
)

Future<List<String>> _loadDataFromApi(String filter) async {
  // 模拟API调用
  await Future.delayed(Duration(seconds: 1));
  return ["Result1", "Result2", "Result3"];
}

5. 自定义显示

dropdownBuilder: (context, selectedItem) {
  return ListTile(
    leading: Icon(Icons.flag),
    title: Text(selectedItem ?? "Select"),
  );
},

注意事项

  • 确保数据项具有唯一的 toString() 返回值用于比较
  • 可通过 validator 参数添加表单验证
  • 支持自定义下拉项样式和空状态显示

这样就实现了带搜索功能的下拉选择框，适用于国家选择、商品搜索等场景。

回到顶部