Flutter颜色选择器插件flutter_color_picker_plus的使用

Flutter颜色选择器插件flutter_color_picker_plus的使用

简介

flutter_color_picker_plus 是一个功能强大的颜色选择器插件，支持HSV(HSB)、HSL、RGB和Material颜色选择。它提供了多种颜色选择器样式，如滑块选择器（SlidePicker）、块状选择器（BlockPicker）和Material风格的选择器（MaterialPicker），并且可以根据开发者的需要进行高度定制。

由于原作者不再维护该插件，flutter_color_picker_plus 是从 flutter_colorpicker 叉出来的版本，并由新的维护者继续更新和改进。

快速上手

1. 添加依赖

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

dependencies:
  flutter_color_picker_plus: ^latest_version

2. 使用示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用 flutter_color_picker_plus 插件。这个示例包括了一个带有多个颜色选择器的页面，用户可以选择不同的颜色，并且可以通过浮动按钮切换主题（白天/黑夜模式）。

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

void main() => runApp(const MaterialApp(home: MyApp()));

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool lightTheme = true;
  Color currentColor = Colors.amber;
  List<Color> currentColors = [Colors.yellow, Colors.green];
  List<Color> colorHistory = [];

  // 当颜色发生变化时调用此方法
  void changeColor(Color color) => setState(() => currentColor = color);

  // 当多个颜色发生变化时调用此方法
  void changeColors(List<Color> colors) =>
      setState(() => currentColors = colors);

  @override
  Widget build(BuildContext context) {
    // 根据当前颜色选择白色或黑色作为前景色
    final foregroundColor =
        useWhiteForeground(currentColor) ? Colors.white : Colors.black;

    return AnimatedTheme(
      data: lightTheme ? ThemeData.light() : ThemeData.dark(),
      child: Builder(builder: (context) {
        return DefaultTabController(
          length: 3,
          child: Scaffold(
            floatingActionButton: FloatingActionButton.extended(
              onPressed: () => setState(() => lightTheme = !lightTheme),
              icon: Icon(lightTheme
                  ? Icons.dark_mode_rounded
                  : Icons.light_mode_rounded),
              label: Text(lightTheme ? 'Night' : '  Day '),
              backgroundColor: currentColor,
              foregroundColor: foregroundColor,
              elevation: 15,
            ),
            appBar: AppBar(
              title: const Text('Flutter Color Picker Example'),
              backgroundColor: currentColor,
              foregroundColor: foregroundColor,
              bottom: TabBar(
                labelColor: foregroundColor,
                tabs: const <Widget>[
                  Tab(text: 'HSV/HSL/RGB'),
                  Tab(text: 'Material'),
                  Tab(text: 'Blocky'),
                ],
              ),
            ),
            body: TabBarView(
              children: <Widget>[
                // HSV/HSL/RGB 颜色选择器
                HSVColorPickerExample(
                  pickerColor: currentColor,
                  onColorChanged: changeColor,
                  colorHistory: colorHistory,
                  onHistoryChanged: (List<Color> colors) =>
                      colorHistory = colors,
                ),
                // Material 风格的颜色选择器
                MaterialColorPickerExample(
                    pickerColor: currentColor, onColorChanged: changeColor),
                // 块状颜色选择器
                BlockColorPickerExample(
                  pickerColor: currentColor,
                  onColorChanged: changeColor,
                  pickerColors: currentColors,
                  onColorsChanged: changeColors,
                  colorHistory: colorHistory,
                ),
              ],
            ),
          ),
        );
      }),
    );
  }
}

3. 颜色选择器的详细说明

• HSVColorPickerExample：这是一个基于HSV（色调、饱和度、亮度）的颜色选择器，用户可以通过滑动条来调整颜色。它还支持历史颜色记录，用户可以选择之前使用过的颜色。

• MaterialColorPickerExample：这是一个Material风格的颜色选择器，用户可以从预定义的颜色集中选择颜色。每个颜色块都带有标签，显示颜色的名称或值。

• BlockColorPickerExample：这是一个块状颜色选择器，用户可以从多个颜色块中选择颜色。它还支持多选模式，允许用户同时选择多个颜色。

4. 显示颜色选择器的对话框

你也可以通过 showDialog 来显示颜色选择器，如下所示：

// 创建一些初始颜色
Color pickerColor = Color(0xff443a49);
Color currentColor = Color(0xff443a49);

// 当颜色发生变化时调用此方法
void changeColor(Color color) {
  setState(() => pickerColor = color);
}

// 显示颜色选择器对话框
showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: const Text('Pick a color!'),
      content: SingleChildScrollView(
        child: ColorPicker(
          pickerColor: pickerColor,
          onColorChanged: changeColor,
        ),
      ),
      actions: <Widget>[
        ElevatedButton(
          child: const Text('Got it'),
          onPressed: () {
            setState(() => currentColor = pickerColor);
            Navigator.of(context).pop();
          },
        ),
      ],
    );
  },
);