Flutter Material 颜色选择器

Material Color picker 是一个 Flutter 部件，可进行自定义。

默认情况下，它是 Material Colors，但您可以定义自己的颜色。

您还可以使用 CircleColor 部件在您的应用程序中显示颜色。例如，您可以将颜色选择器放在对话框中，并在 ListTile 中显示所选颜色，用于设置。

如何使用它

这些示例使用静态颜色作为“selectedColor”，但您可以使用变量（状态）

添加到您的 Flutter 项目

您只需要将 `flutter_material_color_picker` 添加为 pubspec.yaml 文件中的依赖项。

flutter_material_color_picker: ^1.0.3

导入

import 'package:flutter_material_color_picker/flutter_material_color_picker.dart';

基础

MaterialColorPicker(
    onColorChange: (Color color) {
        // Handle color changes
    },
    selectedColor: Colors.red
)

监听主颜色变化

MaterialColorPicker(
    onColorChange: (Color color) {
        // Handle color changes
    },
    onMainColorChange: (ColorSwatch color) {
        // Handle main color changes
    },
    selectedColor: Colors.red
)

禁止显示深浅色

MaterialColorPicker(
    allowShades: false, // default true
    onMainColorChange: (ColorSwatch color) {
        // Handle main color changes
    },
    selectedColor: Colors.red
)

如果将 `allowShades` 设置为 `false`，则只会显示主颜色并允许选择。
不会调用 `onColorChange`，请改用 `onMainColorChange`。

自定义颜色

在此示例中，自定义颜色是 Material Colors 的列表（继承自 ColorSwatch 的类）。
但您可以创建自己的 ColorSwatch 列表。

MaterialColorPicker(
    onColorChange: (Color color) {
        // Handle color changes
    },
    selectedColor: Colors.red,
    colors: [
        Colors.red,
        Colors.deepOrange,
        Colors.yellow,
        Colors.lightGreen
    ],
)

截图

颜色选择

有两个步骤，首先选择主颜色，然后按一下，您就需要选择主颜色的深浅色。
默认情况下，它是所有 **Material Colors**，但您可以定义自定义颜色，一个 **ColorSwatch 列表**。

shade_color

main_color

使用示例

您可以将颜色选择器插入到 **对话框** 中

main_color_dialog

shade_color_dialog

显示颜色

您可以使用 CircleColor 部件，例如在您的设置中显示所选颜色。

example_circle_color

GitHub

https://github.com/Pyozer/flutter_material_color_picker

Flutter Material 颜色选择器