Flutter下拉搜索插件dropdown_search的使用

简介

Flutter DropdownSearch 是一个简单且响应式的下拉搜索组件，支持离线和在线项目列表、多级项目、四种下拉模式（菜单/底部表单/模态底部表单/对话框）、单选和多选等功能。它还支持自定义UI、处理浅色和深色主题，并且易于在无状态小部件中实现。

关键特性

• 响应式小部件
• 无限列表（懒加载）
• 同步和异步项目（在线、离线、数据库等）
• 可搜索下拉菜单
• 支持多级项目
• 四种下拉模式：Menu/ BottomSheet/ ModalBottomSheet / Dialog
• 单选和多选
• Material风格下拉菜单
• 适应性UI：Material, iOS（即将推出）
• 易定制UI - 无样板代码
• 处理浅色和深色主题
• 易于在无状态小部件中实现

安装

在 pubspec.yaml 文件中添加以下依赖：

dependencies:
  dropdown_search: ^5.0.2

然后运行 flutter pub get 来安装插件。

导入

在 Dart 文件中导入 dropdown_search 包：

import 'package:dropdown_search/dropdown_search.dart';

简单示例

以下是一个简单的 DropdownSearch 实现示例：

DropdownSearch<String>(
  items: ["Item 1", "Item 2", "Item 3", "Item 4"],
  popupProps: PopupProps.menu(
    disabledItemFn: (item) => item == 'Item 3',
    fit: FlexFit.loose,
  ),
),

多选示例

以下是多选模式的示例：

DropdownSearch<String>.multiSelection(
  items: ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"],
  dropdownBuilder: (ctx, selectedItem) => Icon(Icons.calendar_month_outlined, size: 54),
),

自定义项类型示例

以下是自定义项类型的示例，项类型为 (String, Color)：

DropdownSearch<(String, Color)>(
  items: [
    ("Red", Colors.red),
    ("Black", Colors.black),
    ("Yellow", Colors.yellow),
    ('Blue', Colors.blue),
  ],
  compareFn: (item1, item2) => item1.$1 == item2.$1,
  popupProps: PopupProps.menu(
    menuProps: MenuProps(align: MenuAlign.bottomCenter),
    fit: FlexFit.loose,
    itemBuilder: (context, item, isDisabled, isSelected) => Padding(
      padding: const EdgeInsets.all(8.0),
      child: Text(item.$1, style: TextStyle(color: item.$2, fontSize: 16)),
    ),
  ),
  dropdownBuilder: (ctx, selectedItem) => Icon(Icons.face, color: selectedItem?.$2, size: 54),
),

对话框模式示例

以下是使用对话框模式的示例：

DropdownSearch<int>(
  items: List.generate(30, (i) => i + 1),
  decoratorProps: DropDownDecoratorProps(
    decoration: InputDecoration(labelText: "Dialog with title", hintText: "Select an Int"),
  ),
  popupProps: PopupProps.dialog(
    title: Container(
      decoration: BoxDecoration(color: Colors.deepPurple),
      alignment: Alignment.center,
      padding: EdgeInsets.symmetric(vertical: 16),
      child: Text(
        'Numbers 1..30',
        style: TextStyle(fontSize: 21, fontWeight: FontWeight.bold, color: Colors.white70),
      ),
    ),
    dialogProps: DialogProps(
      clipBehavior: Clip.antiAlias,
      shape: OutlineInputBorder(
        borderSide: BorderSide(width: 0),
        borderRadius: BorderRadius.circular(25),
      ),
    ),
  ),
),

布局定制

你可以根据需要自定义 DropdownSearch 和其项目的布局。更多示例可以参考 GitHub 示例。

完整示例代码

以下是一个完整的示例代码，展示了如何在应用中使用 DropdownSearch 插件：

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

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

Future<List<UserModel>> getData(filter) async {
  var response = await Dio().get(
    "https://63c1210999c0a15d28e1ec1d.mockapi.io/users",
    queryParameters: {"filter": filter},
  );

  final data = response.data;
  if (data != null) {
    return UserModel.fromJsonList(data);
  }

  return [];
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'dropdownSearch Demo',
      theme: ThemeData.light(),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final dropDownKey = GlobalKey<DropdownSearchState>();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('examples mode')),
      body: ListView(
        padding: EdgeInsets.symmetric(vertical: 12, horizontal: 8),
        children: [
          Row(
            children: [
              Expanded(
                child: DropdownSearch<String>(
                  key: dropDownKey,
                  selectedItem: "Menu",
                  items: ["Menu", "Dialog", "Modal", "BottomSheet"],
                  decoratorProps: DropDownDecoratorProps(
                    decoration: InputDecoration(
                      labelText: 'Examples for: ',
                      border: OutlineInputBorder(),
                    ),
                  ),
                  popupProps: PopupProps.menu(
                    fit: FlexFit.loose,
                    constraints: BoxConstraints(),
                  ),
                ),
              ),
              Padding(padding: EdgeInsets.only(right: 16)),
              FilledButton(
                onPressed: () {
                  switch (dropDownKey.currentState?.getSelectedItem) {
                    case 'Menu':
                      // Navigate to MenuExamplesPage
                      break;
                    case 'Modal':
                      // Navigate to ModalsExamplesPage
                      break;
                    case 'BottomSheet':
                      // Navigate to BottomSheetExamplesPage
                      break;
                    case 'Dialog':
                      // Navigate to DialogExamplesPage
                      break;
                  }
                },
                child: Text("Go"),
              )
            ],
          ),
          Padding(padding: EdgeInsets.all(8)),
          RichText(
            text: TextSpan(
              style: const TextStyle(fontSize: 14.0, color: Colors.black),
              children: [
                TextSpan(text: 'we used '),
                TextSpan(
                    text: 'fit: FlexFit.loose',
                    style: TextStyle(fontWeight: FontWeight.bold)),
                TextSpan(text: ' and '),
                TextSpan(
                    text: 'constraints: BoxConstraints() ',
                    style: TextStyle(fontWeight: FontWeight.bold)),
                TextSpan(
                    text:
                        'to fit the height of menu automatically to the length of items'),
              ],
            ),
          ),
          Padding(padding: EdgeInsets.only(top: 20)),
          Text(
            'DropdownSearch Anatomy',
            style: TextStyle(
                fontWeight: FontWeight.bold, fontStyle: FontStyle.italic),
            textAlign: TextAlign.center,
          ),
          Image.asset('assets/images/anatomy.png',
              alignment: Alignment.topCenter, height: 1024)
        ],
      ),
    );
  }
}

这个示例展示了如何创建一个包含不同模式的 DropdownSearch 组件的应用程序，并通过选择不同的模式导航到相应的页面。你可以根据自己的需求进行修改和扩展。