Flutter下拉选择插件cool_dropdown的使用

Cool drop down

Cool drop down 是一个高度可定制化的Flutter下拉选择插件，支持自动滚动到选中项位置、自动放置下拉菜单、跑马灯效果（Marquee effect）、自定义动画、错误处理等功能。它非常适合用于需要美观且功能丰富的下拉选择组件的应用场景。

特性 Features

• 所有样式均可自定义（字体、字号、颜色、图标、结果、下拉装饰等）。
• 自动滚动到选中项位置。
• 下拉菜单根据屏幕上的位置自动放置（顶部/底部）。
• 跑马灯效果（Marquee effect）。
• 可自定义动画。
• 错误处理。
• “COOL”（设计精美）

安装 Installing

使用命令安装：

$ flutter pub add cool_dropdown

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

dependencies:
  cool_dropdown: ^latest_version # 替换为最新版本号

示例代码 Demo Code

下面是一个完整的示例代码，展示了如何在项目中使用 cool_dropdown 插件创建两个不同风格的下拉选择框：一个是水果选择器，另一个是宝可梦选择器。

import 'package:flutter/material.dart';
import 'package:cool_dropdown/cool_dropdown.dart';
import 'package:flutter_svg/svg.dart';

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

// 水果和宝可梦列表
List<String> pokemons = ['pikachu', 'charmander', 'squirtle', 'bulbasaur', 'snorlax', 'mankey', 'psyduck', 'meowth'];
List<String> fruits = ['apple', 'banana', 'grapes', 'lemon', 'melon', 'orange', 'pineapple', 'strawberry', 'watermelon'];

class _MyAppState extends State<MyApp> {
  List<CoolDropdownItem<String>> pokemonDropdownItems = [];
  List<CoolDropdownItem<String>> fruitDropdownItems = [];

  // 控制器实例化
  final fruitDropdownController = DropdownController<String>();
  final pokemonDropdownController = DropdownController<String>();

  @override
  void initState() {
    super.initState();
    // 初始化宝可梦选项
    for (var i = 0; i < pokemons.length; i++) {
      pokemonDropdownItems.add(
        CoolDropdownItem<String>(
            label: '${pokemons[i]}',
            icon: Container(
              height: 25,
              width: 25,
              child: SvgPicture.asset('assets/${pokemons[i]}.svg'),
            ),
            value: '${pokemons[i]}'),
      );
    }
    // 初始化水果选项
    for (var i = 0; i < fruits.length; i++) {
      fruitDropdownItems.add(CoolDropdownItem<String>(
          label: 'Delicious ${fruits[i]}',
          icon: Container(
            margin: EdgeInsets.only(left: 10),
            height: 25,
            width: 25,
            child: SvgPicture.asset('assets/${fruits[i]}.svg'),
          ),
          selectedIcon: Container(
            margin: EdgeInsets.only(left: 10),
            height: 25,
            width: 25,
            child: SvgPicture.asset(
              'assets/${fruits[i]}.svg',
              color: Color(0xFF6FCC76),
            ),
          ),
          value: '${fruits[i]}'));
    }
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Color(0xFF6FCC76),
          title: Text('Cool Drop Down'),
        ),
        floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
        floatingActionButton: Row(
          mainAxisAlignment: MainAxisAlignment.end,
          children: [
            FloatingActionButton.extended(
              onPressed: () async {
                fruitDropdownController.resetValue();
              },
              label: Text('Reset'),
            ),
            SizedBox(width: 10,),
            FloatingActionButton.extended(
              onPressed: () async {
                if (fruitDropdownController.isError) {
                  fruitDropdownController.resetError();
                } else {
                  await fruitDropdownController.error();
                }
                fruitDropdownController.open();
              },
              label: Text('Error'),
            ),
            SizedBox(width: 10,),
          ],
        ),
        body: ListView(
          children: [
            SizedBox(height: 100,),
            Center(
              child: WillPopScope(
                onWillPop: () async {
                  if (fruitDropdownController.isOpen) {
                    fruitDropdownController.close();
                    return Future.value(false);
                  } else {
                    return Future.value(true);
                  }
                },
                child: CoolDropdown<String>(
                  controller: fruitDropdownController,
                  dropdownList: fruitDropdownItems,
                  defaultItem: null,
                  onChange: (value) async {
                    if (fruitDropdownController.isError) {
                      await fruitDropdownController.resetError();
                    }
                    // fruitDropdownController.close();
                  },
                  onOpen: (value) {},
                  resultOptions: ResultOptions(
                    padding: EdgeInsets.symmetric(horizontal: 10),
                    width: 200,
                    icon: const SizedBox(
                      width: 10,
                      height: 10,
                      child: CustomPaint(
                        painter: DropdownArrowPainter(),
                      ),
                    ),
                    render: ResultRender.all,
                    placeholder: 'Select Fruit',
                    isMarquee: true,
                  ),
                  dropdownOptions: DropdownOptions(
                      top: 20,
                      height: 400,
                      gap: DropdownGap.all(5),
                      borderSide: BorderSide(width: 1, color: Colors.black),
                      padding: EdgeInsets.symmetric(horizontal: 10),
                      align: DropdownAlign.left,
                      animationType: DropdownAnimationType.size),
                  dropdownTriangleOptions: DropdownTriangleOptions(
                    width: 20,
                    height: 30,
                    align: DropdownTriangleAlign.left,
                    borderRadius: 3,
                    left: 20,
                  ),
                  dropdownItemOptions: DropdownItemOptions(
                    isMarquee: true,
                    mainAxisAlignment: MainAxisAlignment.start,
                    render: DropdownItemRender.all,
                    height: 50,
                  ),
                ),
              ),
            ),
            SizedBox(height: 200,),
            Center(
              child: CoolDropdown<String>(
                controller: pokemonDropdownController,
                dropdownList: pokemonDropdownItems,
                defaultItem: pokemonDropdownItems.last,
                onChange: (a) {
                  pokemonDropdownController.close();
                },
                resultOptions: ResultOptions(
                  width: 70,
                  render: ResultRender.icon,
                  icon: SizedBox(
                    width: 10,
                    height: 10,
                    child: CustomPaint(
                      painter: DropdownArrowPainter(color: Colors.green),
                    ),
                  ),
                ),
                dropdownOptions: DropdownOptions(
                  width: 140,
                ),
                dropdownItemOptions: DropdownItemOptions(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  selectedBoxDecoration: BoxDecoration(
                    color: Color(0XFFEFFAF0),
                  ),
                ),
              ),
            ),
            SizedBox(height: 500,),
          ],
        ),
      ),
    );
  }
}

// 箭头绘制类
class DropdownArrowPainter extends CustomPainter {
  final Color? color;

  DropdownArrowPainter({this.color});

  @override
  void paint(Canvas canvas, Size size) {
    final Paint paint = Paint()
      ..color = color ?? Colors.black
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1.5;

    final Path path = Path()
      ..moveTo(0, 0)
      ..lineTo(size.width / 2, size.height)
      ..lineTo(size.width, 0)
      ..close();

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(covariant CustomPainter oldDelegate) {
    return false;
  }
}

此代码片段展示了如何使用 cool_dropdown 创建并配置下拉选择框，包括设置默认值、监听选择变化、自定义样式等。同时，还演示了如何通过控制器管理下拉菜单的状态，如打开、关闭、重置等操作。请确保将 assets 文件夹中的图片资源路径正确配置到您的项目中以避免运行时错误。