select_multi_dropdown 是一个用于 Flutter 的多选下拉插件，允许用户从下拉列表中选择多个选项。以下是该插件的基本使用方法：

1. 添加依赖

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

dependencies:
  flutter:
    sdk: flutter
  select_multi_dropdown: ^1.0.0  # 请使用最新版本

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

2. 导入包

在你的 Dart 文件中导入 select_multi_dropdown 包：

import 'package:select_multi_dropdown/select_multi_dropdown.dart';

3. 使用 SelectMultiDropdown 组件

你可以在你的 Widget 中使用 SelectMultiDropdown 组件。以下是一个简单的示例：

class MultiSelectDropdownExample extends StatefulWidget {
  [@override](/user/override)
  _MultiSelectDropdownExampleState createState() => _MultiSelectDropdownExampleState();
}

class _MultiSelectDropdownExampleState extends State<MultiSelectDropdownExample> {
  List<SelectMultiDropdownItem> selectedItems = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multi Select Dropdown Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            SelectMultiDropdown(
              items: [
                SelectMultiDropdownItem(value: '1', label: 'Option 1'),
                SelectMultiDropdownItem(value: '2', label: 'Option 2'),
                SelectMultiDropdownItem(value: '3', label: 'Option 3'),
                SelectMultiDropdownItem(value: '4', label: 'Option 4'),
              ],
              selectedItems: selectedItems,
              onChanged: (List<SelectMultiDropdownItem> selectedItems) {
                setState(() {
                  this.selectedItems = selectedItems;
                });
              },
              label: 'Select Options',
              hint: 'Choose multiple options',
            ),
            SizedBox(height: 20),
            Text(
              'Selected Items: ${selectedItems.map((item) => item.label).join(', ')}',
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

4. 参数说明

• items: 下拉列表中的选项列表，每个选项是一个 SelectMultiDropdownItem 对象。
• selectedItems: 当前选中的选项列表。
• onChanged: 当用户选择或取消选择选项时触发的回调函数。
• label: 下拉列表的标签。
• hint: 下拉列表的提示文本。

5. 运行应用

现在你可以运行你的 Flutter 应用，并查看多选下拉列表的效果。

6. 其他功能

select_multi_dropdown 还支持其他一些功能，例如：

• 自定义下拉列表的样式。
• 支持搜索功能。
• 支持禁用某些选项。

你可以查看插件的 官方文档 以获取更多详细信息和高级用法。

7. 示例代码

以下是完整的示例代码：

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

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MultiSelectDropdownExample(),
    );
  }
}

class MultiSelectDropdownExample extends StatefulWidget {
  [@override](/user/override)
  _MultiSelectDropdownExampleState createState() => _MultiSelectDropdownExampleState();
}

class _MultiSelectDropdownExampleState extends State<MultiSelectDropdownExample> {
  List<SelectMultiDropdownItem> selectedItems = [];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Multi Select Dropdown Example'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          children: [
            SelectMultiDropdown(
              items: [
                SelectMultiDropdownItem(value: '1', label: 'Option 1'),
                SelectMultiDropdownItem(value: '2', label: 'Option 2'),
                SelectMultiDropdownItem(value: '3', label: 'Option 3'),
                SelectMultiDropdownItem(value: '4', label: 'Option 4'),
              ],
              selectedItems: selectedItems,
              onChanged: (List<SelectMultiDropdownItem> selectedItems) {
                setState(() {
                  this.selectedItems = selectedItems;
                });
              },
              label: 'Select Options',
              hint: 'Choose multiple options',
            ),
            SizedBox(height: 20),
            Text(
              'Selected Items: ${selectedItems.map((item) => item.label).join(', ')}',
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}