Flutter多功能下拉菜单插件multi_functional_dropdown的使用

Flutter多功能下拉菜单插件multi_functional_dropdown的使用

multi_functional_dropdown 插件为 Flutter 提供了一个多功能的 MultiDropdownDialog 小部件，支持多选和单选模式，并且提供了丰富的自定义选项。

预览

单选模式

多选模式

特性

multi_functional_dropdown 包在 Flutter 中提供了以下特性：

1. 多功能下拉菜单小部件：提供一个多功能的下拉菜单小部件，可以处理单选和多选模式。
2. 可定制的显示：允许通过 displayText 函数自定义项目显示，还可以使用 ItemCustomizer 自定义项目样式。
3. 初始值：支持设置单选或多选模式的初始值。
4. 提示文本：提供下拉菜单的提示文本选项。
5. 动态搜索：实现动态搜索功能，根据用户输入过滤下拉菜单中的项。
6. 头部和尾部小部件：支持添加头部和尾部小部件以进行额外的自定义。
7. 下拉图标：提供自定义下拉图标的功能。
8. 尺寸和样式：灵活设置下拉菜单的宽度、高度、装饰和字段半径。
9. 无障碍访问：提供键盘导航和无障碍功能以改善用户体验。
10. 性能优化：优化了性能，具有高效的项目过滤和渲染功能，即使在大数据集下也能保证流畅交互。

开始使用

要将 multi_functional_dropdown 包用于您的 Flutter 项目，请按照以下步骤操作：

添加依赖

在项目的 pubspec.yaml 文件中添加依赖项：

dependencies:
  multi_functional_dropdown: ^0.0.7  # 使用最新版本

导入包

在 Dart 代码中导入包：

import 'package:multi_functional_dropdown/multi_functional_dropdown.dart';

使用

使用 MultiDropdownDialog 小部件创建一个多功能下拉菜单：

单选模式

List<Map<String, String>> itemsList = [
  {'id': '1', 'name': 'Apple'},
  {'id': '2', 'name': 'Mango'},
  {'id': '3', 'name': 'Grapes'},
  {'id': '4', 'name': 'Banana'},
];

MultiDropdownDialog<Map<String, String>>(
  hint: 'Select a fruit',
  fillColor: Colors.white,
  borderColor: Colors.grey,
  itemsList: itemsList,
  displayText: (item) {
    return item['name'].toString();
  },
  onChanged: (selectedItem) {
    // 处理选择事件
  },
)

多选模式

List<Person> personList = [
  Person(name: 'Alice', age: 30),
  Person(name: 'Bob', age: 25),
  Person(name: 'Charlie', age: 40),
];

MultiDropdownDialog<Person>(
  hint: 'Select Names',
  fillColor: Colors.white,
  borderColor: Colors.grey,
  itemsList: personList,
  displayText: (item) {
    print("ITEM $item");
    return item.name.toString();
  },
  onChanged: (selectedItem) {
    print('Selected Person: ${selectedItem}');
  },
  selectionType: SelectionType.multi,
)

class Person {
  final String name;
  final int age;

  Person({required this.name, required this.age});
}

示例代码

以下是完整的示例代码：

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:multi_functional_dropdown/multi_functional_dropdown.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Multi Functional Dropdown',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<Person> personList = [
    Person(name: 'Alice', age: 30),
    Person(name: 'Bob', age: 25),
    Person(name: 'Charlie', age: 40),
  ];
  List<Map<String, String>> itemsList = [
    {'id': '1', 'name': 'Apple'},
    {'id': '2', 'name': 'Mango'},
    {'id': '3', 'name': 'Grapes'},
    {'id': '4', 'name': 'Banana'},
  ];

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(12.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              MultiDropdownDialog<Map<String, String>>(
                hint: 'Select a fruit',
                fillColor: Colors.white,
                borderColor: Colors.grey,
                itemsList: itemsList,
                fieldIconColor: Colors.grey,
                displayText: (item) {
                  if (kDebugMode) {
                    print("ITEM $item");
                  }
                  return item['name']!;
                },
                onChanged: (selectedItem) {
                  if (kDebugMode) {
                    print('Selected fruit: $selectedItem');
                  }
                },
              ),
              const SizedBox(
                height: 10,
              ),
              MultiDropdownDialog<Person>(
                hint: 'Select Names',
                fillColor: Colors.white,
                borderColor: Colors.grey,
                itemsList: personList,
                displayText: (item) {
                  if (kDebugMode) {
                    print("ITEM $item");
                  }
                  return item.name;
                },
                onChanged: (selectedItem) {
                  if (kDebugMode) {
                    print('Selected Person: ${selectedItem}');
                  }
                },
                selectionType: SelectionType.multi,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

class Person {
  final String name;
  final int age;

  Person({required this.name, required this.age});
}