Flutter 如何实现 multiselect_dropdown

在Flutter中如何实现一个多选下拉框(multiselect_dropdown)功能？目前使用的是官方DropdownButton，但它只能单选。需要支持以下特性：

  1. 显示已选项数量或标签
  2. 支持搜索筛选选项
  3. 可以全选/取消全选
  4. 选项支持复选框样式 有没有现成的插件推荐？或者需要自己封装实现？最好能提供核心代码示例或实现思路。
2 回复

Flutter中实现多选下拉框，可以使用第三方库multiselect_dropdown：

  1. 添加依赖：
dependencies:
  multiselect_dropdown: ^1.0.0
  1. 基本使用：
MultiSelectDropdown(
  onOptionSelected: (selectedOptions) {
    print(selectedOptions);
  },
  options: const [
    {'value': 1, 'label': '选项1'},
    {'value': 2, 'label': '选项2'},
    {'value': 3, 'label': '选项3'},
  ],
)
  1. 主要特性：
  • 支持搜索过滤
  • 可自定义显示文本
  • 支持设置最大选择数量
  • 可自定义样式
  1. 其他方案：
  • 使用DropdownButton自定义实现
  • 使用flutter_multiselect库
  • 使用searchable_dropdown库

推荐使用multiselect_dropdown，它功能完善且易于使用，文档也比较详细。

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


在 Flutter 中实现多选下拉菜单，可以使用第三方包 multiselect_dropdown。以下是实现步骤：

  1. 添加依赖
    在 pubspec.yaml 中添加：

    dependencies:
  multiselect_dropdown: ^1.0.0  # 使用最新版本

    运行 flutter pub get。

  2. 基本用法

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

class MultiSelectExample extends StatefulWidget {
  @override
  _MultiSelectExampleState createState() => _MultiSelectExampleState();
}

class _MultiSelectExampleState extends State<MultiSelectExample> {
  List<ValueItem> selectedItems = [];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: EdgeInsets.all(16),
        child: MultiSelectDropDown(
          onOptionSelected: (List<ValueItem> selectedOptions) {
            setState(() {
              selectedItems = selectedOptions;
            });
          },
          options: const [
            ValueItem(label: '选项1', value: '1'),
            ValueItem(label: '选项2', value: '2'),
            ValueItem(label: '选项3', value: '3'),
          ],
          selectedOptions: selectedItems,
          selectionType: SelectionType.multi,
          chipConfig: const ChipConfig(wrapType: WrapType.wrap),
          dropdownHeight: 300,
          optionTextStyle: TextStyle(fontSize: 16),
          selectedOptionIcon: Icon(Icons.check_circle),
        ),
      ),
    );
  }
}

  3. 主要参数说明

    • options：下拉选项列表，需提供 label（显示文本）和 value（实际值）。
    • onOptionSelected：选择选项时的回调函数。
    • selectedOptions：当前已选中的选项。
    • selectionType：设置为 SelectionType.multi 启用多选。
    • chipConfig：配置已选项的显示样式（如换行）。
    • dropdownHeight：下拉菜单高度。
    • selectedOptionIcon：选中项的图标。

  4. 自定义选项
    可通过 controller 动态控制选项，或使用 hint 设置提示文本。

这个包简化了多选下拉的实现，支持搜索、动态数据等高级功能。

回到顶部