search_dropdown 是一个 Flutter 插件，用于创建一个带有搜索功能的下拉选择框。它允许用户从下拉列表中选择一个选项，并且可以通过输入关键字来快速过滤选项。

安装

首先，你需要在 pubspec.yaml 文件中添加 search_dropdown 依赖：

dependencies:
  flutter:
    sdk: flutter
  search_dropdown: ^1.1.0

然后运行 flutter pub get 来安装依赖。

基本使用

以下是一个简单的示例，展示了如何使用 search_dropdown 插件：

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

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Search Dropdown Example'),
        ),
        body: Center(
          child: SearchDropdown(
            items: [
              "Apple",
              "Banana",
              "Cherry",
              "Date",
              "Elderberry",
              "Fig",
              "Grape"
            ],
            hint: "Select a fruit",
            onChanged: (value) {
              print("Selected: $value");
            },
          ),
        ),
      ),
    );
  }
}

参数说明

• items: 这是一个 List<dynamic>，包含下拉列表中的所有选项。选项可以是字符串、对象或其他类型。
• hint: 这是一个 String，用于显示在下拉框中的提示文本。
• onChanged: 这是一个回调函数，当用户选择一个选项时触发。参数是用户选择的选项。
• searchHint: 这是一个 String，用于显示在搜索框中的提示文本。
• selectedItem: 这是一个 dynamic，用于设置默认选中的选项。
• underline: 这是一个 Widget，用于自定义下拉框的下划线。
• icon: 这是一个 Widget，用于自定义下拉框的图标。
• isExpanded: 这是一个 bool，用于指定下拉框是否应该扩展到父容器的宽度。
• isCaseSensitiveSearch: 这是一个 bool，用于指定搜索时是否区分大小写。
• label: 这是一个 String，用于显示在下拉框上方的标签。

高级用法

如果你需要更复杂的选项（例如，选项是对象），你可以使用 SearchDropdown 的 itemBuilder 和 itemAsString 参数来自定义显示和搜索逻辑。

class Fruit {
  final String name;
  final String color;

  Fruit(this.name, this.color);
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    List<Fruit> fruits = [
      Fruit("Apple", "Red"),
      Fruit("Banana", "Yellow"),
      Fruit("Cherry", "Red"),
      Fruit("Date", "Brown"),
      Fruit("Elderberry", "Purple"),
      Fruit("Fig", "Purple"),
      Fruit("Grape", "Green")
    ];

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Search Dropdown Example'),
        ),
        body: Center(
          child: SearchDropdown(
            items: fruits,
            hint: "Select a fruit",
            onChanged: (value) {
              print("Selected: ${(value as Fruit).name}");
            },
            itemBuilder: (context, item) {
              return ListTile(
                title: Text((item as Fruit).name),
                subtitle: Text((item as Fruit).color),
              );
            },
            itemAsString: (item) => (item as Fruit).name,
          ),
        ),
      ),
    );
  }
}