Flutter 高级下拉菜单插件 flutter_advanced_drop_down 的使用

特性

• 可自定义的外观，支持 BoxDecoration
• 可选的搜索功能
• 支持创建新项目的“添加”按钮
• 支持加载指示器（全列表和加载更多）
• 可自定义的项目构建器
• 可选的“无选择”选项
• 项目选择回调
• 支持异步数据加载
• 支持使用值通知器进行搜索

开始使用

要使用此包，请在你的 pubspec.yaml 文件中添加 flutter_advanced_dropdown 作为依赖项。

dependencies:
  flutter_advanced_dropdown: ^1.0.0

然后，在 Dart 代码中导入该包：

import 'package:flutter_advanced_dropdown/flutter_advanced_dropdown.dart';

使用示例

以下是一个基本示例，展示如何使用 FlutterAdvancedDropDown 小部件：

import 'package:flutter/material.dart';
import 'package:flutter_advanced_dropdown/flutter_advanced_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: '动态下拉菜单示例',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(title: '动态下拉菜单示例'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

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

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

class _MyHomePageState extends State<MyHomePage> {
  // 初始化静态列表
  final staticList = List<String>.generate(100, (index) => '项目 $index');

  // 存储选中的值
  String? selectedValue;

  // 值通知器用于控制加载状态
  final loading = ValueNotifier<bool>(false);
  final loadingMore = ValueNotifier<bool>(false);
  final listNotifier = ValueNotifier<List<String>>([]);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text(
              '请选择一个选项:',
            ),
            FlutterAdvancedDropDown<String>(
              builder: (item, _) => Text(item), // 项目构建器
              onOpen: () {
                loading.value = true;
                Future.delayed(
                  const Duration(seconds: 2),
                  () {
                    listNotifier.value = staticList;
                    loading.value = false;
                  },
                );
              },
              isLoadingAll: loading, // 全部加载状态
              isLoadingMore: loadingMore, // 加载更多状态
              listNotifier: listNotifier, // 列表通知器
              titleWidget: const Text('请选择一个选项:'), // 标题
              label: '请选择一个选项', // 标签
              searchBarBuilder: (p0) => TextField(onChanged: (value) async {
                if (value.isEmpty) {
                  listNotifier.value = staticList;
                  return;
                }
                loadingMore.value = true;
                await Future.delayed(
                  const Duration(seconds: 2),
                  () {
                    listNotifier.value = staticList
                        .where((element) => element.contains(value))
                        .toList();
                  },
                );
                loadingMore.value = false;
              }), // 搜索栏构建器
              onSelect: (p0, p1) {
                setState(() {
                  selectedValue = p0;
                });
              }, // 选择回调
              decoration: BoxDecoration(
                color: Colors.white,
                borderRadius: BorderRadius.circular(10),
                border: Border.all(color: Colors.grey),
              ), // 装饰
              fullLoadingWidgetPlaceHolder: const Center(
                child: CircularProgressIndicator(
                  color: Colors.blue,
                ),
              ), // 全部加载指示器
              loadMoreWidgetPlaceHolder: const LinearProgressIndicator(
                color: Colors.blue,
              ), // 加载更多指示器
            ),
            const SizedBox(height: 20),
            Text(
              '选中的值: ${selectedValue ?? "无"}',
              style: Theme.of(context).textTheme.headlineMedium,
            ),
          ],
        ),
      ),
    );
  }

  [@override](/user/override)
  void initState() {
    super.initState();

    loading.value = true;
    Future.delayed(const Duration(seconds: 2)).then((value) {
      loading.value = false;
      listNotifier.value = staticList;
    });
  }
}