Flutter颜色模型管理插件flutter_color

Flutter颜色模型管理插件`flutter_color_models`的使用

flutter_color_models 是一个用于管理和转换颜色模型的 Flutter 插件。它封装了 color_models 插件，并实现了 Flutter 的 [Color] 类。如果您需要在非 Flutter 环境下使用类似的工具，可以参考以下链接：
https://pub.dev/packages/color_models

此外，如果您需要创建、生成和修改配色方案，可以查看另一个相关的插件：
https://pub.dev/packages/flutter_palette

使用方法

首先，在项目中引入插件：

import 'package:flutter_color_models/flutter_color_models.dart';

颜色空间

flutter_color_models 提供了以下颜色空间模型：

CMYK: [CmykColor]
HSI: [HsiColor]
HSL: [HslColor]
HSP: [HspColor]
HSB: [HsbColor]
LAB: [LabColor]
Oklab: [OklabColor]
RGB: [RgbColor]
XYZ: [XyzColor]

创建颜色

颜色可以通过直接构造、fromList() 或 extrapolate() 方法来创建。

示例：RGB颜色（无透明度）

// RGB 无透明度
RgbColor(255, 0, 0); // 红色
RgbColor.fromList(<num>[255, 0, 0]); // 红色
RgbColor.extrapolate(<num>[1.0, 0.0, 0.0]); // 红色

示例：RGB颜色（有透明度）

// RGB 有透明度
RgbColor(255, 0, 0, 1.0); // 红色，透明度为1.0
RgbColor.fromList(<num>[255, 0, 0, 255]); // 红色，透明度为255
RgbColor.extrapolate(<num>[1.0, 0.0, 0.0, 255]); // 红色，透明度为255

示例：CMYK颜色（无透明度）

// CMYK 无透明度
CmykColor(0.0, 100.0, 100.0, 0.0); // 黑色
CmykColor.fromList(<num>[0.0, 100.0, 100.0, 0.0]); // 黑色
CmykColor.extrapolate(<num>[0.0, 1.0, 1.0, 0.0]); // 黑色

示例：CMYK颜色（有透明度）

// CMYK 有透明度
CmykColor(0.0, 100.0, 100.0, 0.0, 1.0); // 黑色，透明度为1.0
CmykColor.fromList(<num>[0.0, 100.0, 100.0, 0.0, 255]); // 黑色，透明度为255
CmykColor.extrapolate(<num>[0.0, 1.0, 1.0, 0.0, 255]); // 黑色，透明度为255

示例：HSL颜色（无透明度）

// HSL 无透明度
HslColor(0.0, 100.0, 50.0); // 红色
HslColor.fromList(<num>[0.0, 100.0, 50.0]); // 红色
HslColor.extrapolate(<num>[0.0, 1.0, 0.5]); // 红色

示例：HSL颜色（有透明度）

// HSL 有透明度
HslColor(0.0, 100.0, 50.0, 1.0); // 红色，透明度为1.0
HslColor.fromList(<num>[0.0, 100.0, 50.0, 255]); // 红色，透明度为255
HslColor.extrapolate(<num>[0.0, 1.0, 0.5, 255]); // 红色，透明度为255

颜色模型与 `Color` 的相互转换

每个颜色模型都提供了 toColor() 和静态方法 fromColor()，用于将 [Color] 转换为 [ColorModel]，反之亦然。如果不在 [RgbColor] 上调用，则会自动转换为目标颜色空间。

示例：颜色模型与 `Color` 的相互转换

Color color = Color(0xFFFFFF00); // 黄色

CmykColor cmykColor = CmykColor.fromColor(color);
color = cmykColor.toColor();

HsiColor hsiColor = HsiColor.fromColor(color);
color = hsiColor.toColor();

HslColor hslColor = HslColor.fromColor(color);
color = hslColor.toColor();

HspColor hspColor = HspColor.fromColor(color);
color = hspColor.toColor();

HsvColor hsvColor = HsvColor.fromColor(color);
color = hsvColor.toColor();

LabColor labColor = LabColor.fromColor(color);
color = labColor.toColor();

RgbColor rgbColor = RgbColor.fromColor(color);
color = rgbColor.toColor();

XyzColor xyzColor = XyzColor.fromColor(color);
color = xyzColor.toColor();

由于基类 [ColorModel] 缺乏 toColor 方法，因此可以使用全局方法 toColor() 进行转换：

var color = toColor(color);

不同颜色空间之间的转换

每个颜色模型都有方法将其自身转换为其他颜色模型。此外，还可以通过构造函数 [ColorModel.from] 接受任意颜色空间的颜色并返回其自身的类型。

示例：颜色空间之间的转换

// 创建一个HSB颜色
HsbColor originalColor = HsbColor(0.3, 0.8, 0.7);

// 转换为RGB => RgbColor(64, 179, 36)
RgbColor rgbColor = RgbColor.from(originalColor);

// 转换为CMYK => CmykColor(64.25, 0, 79.89, 29.8)
CmykColor cmykColor = CmykColor.from(rgbColor);

// 回到HSB => HsbColor(0.3, 0.8, 0.7)
HsbColor hsbColor = HsbColor.from(cmykColor);

注意：所有颜色转换都以 RGB 色彩空间作为中介。为了最小化精度损失，RgbColor 私下存储 RGB 值为 [num] 而不是 [int]。可以通过 toPreciseList() 方法获取这些值。

颜色调整

每个 [ColorModel] 提供了以下便捷方法：

[inverted]: 将颜色属性反转。
[opposite]: 返回相反的色调。
[rotateHue]: 旋转色调。
[warmer]: 向暖色调调整。
[cooler]: 向冷色调调整。

示例：颜色调整

final orange = RgbColor(255, 144, 0);

print(orange.inverted); // RgbColor(0, 111, 255);
print(orange.opposite); // RgbColor(0, 111, 255);

print(orange.rotateHue(30)); // RgbColor(239, 255, 0);
print(orange.rotateHue(-30)); // RgbColor(255, 17, 0);

print(orange.warmer(30)); // RgbColor(239, 255, 0);
print(orange.cooler(30)); // RgbColor(255, 17, 0);

颜色插值

每个颜色模型都有一个 [lerpTo] 方法，用于计算指定数量的步长，返回两颜色之间的所有中间颜色。

示例：颜色插值

final color1 = RgbColor(255, 0, 0); // 红色
final color2 = RgbColor(0, 0, 255); // 蓝色

// 计算包含5个颜色的列表：[color1], [color2]及其3个中间颜色
final colors = color1.lerpTo(color2, 3);

// [RgbColor(255, 0, 0, 255), RgbColor(191, 0, 64, 255), RgbColor(128, 0, 128, 255), RgbColor(64, 0, 191, 255), RgbColor(0, 0, 255, 255)]
print(colors);

// 如果仅需要中间颜色，可以设置`excludeOriginalColors`为`true`
final steps = color1.lerpTo(color2, 3, excludeOriginalColors: true);

// [RgbColor(191, 0, 64, 255), RgbColor(128, 0, 128, 255), RgbColor(64, 0, 191, 255)]
print(steps);

配色方案增强

color_models 提供了一个扩展方法，用于增强配色方案。它通过将颜色分布在一个抽象梯度中，并根据位置计算新的颜色。

示例：增强配色方案

final palette = <ColorModel>[
  RgbColor(255, 0, 0),
  RgbColor(0, 255, 0),
  RgbColor(0, 0, 255),
];

// [RgbColor(255, 0, 0), RgbColor(128, 128, 0), RgbColor(0, 255, 0), RgbColor(0, 128, 128), RgbColor(0, 0, 255)]
final newPalette = palette.augment(5);

// [RgbColor(255, 0, 0), RgbColor(170, 85, 0), RgbColor(85, 170, 0), RgbColor(0, 255, 0), RgbColor(0, 0, 255)]
final newPaletteWithStops = palette.augment(5, stops: [0.0, 0.75, 1.0]);

色相饱和度值（Chroma）

每个颜色模型都有一个 [chroma] 属性，表示颜色的亮度，范围为 0 到 1。

示例：Chroma值

print(RgbColor(0, 0, 0).chroma); // 0
print(RgbColor(127, 127, 127).chroma); // 0.5
print(RgbColor(255, 255, 255).chroma); // 1.0

final color = RgbColor(42, 176, 232);
print(color.chroma); // 0.534
print(color.withChroma(0.3)); // RgbColor(21, 101, 135)

更多关于Flutter颜色模型管理插件flutter_color_models的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

songsunli 1楼

更多关于Flutter颜色模型管理插件flutter_color_models的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

flutter_color_models 是一个 Flutter 插件，用于在 Flutter 应用中处理不同的颜色模型（如 RGB、HSL、HSV、CMYK 等）。它提供了多种颜色模型之间的转换功能，并允许你轻松地在这些模型之间进行转换和操作。

安装

首先，你需要在 pubspec.yaml 文件中添加 flutter_color_models 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_color_models: ^2.0.0

然后运行 flutter pub get 来安装依赖。

基本用法

1. 创建颜色对象

你可以使用不同的颜色模型创建颜色对象。例如：

import 'package:flutter_color_models/flutter_color_models.dart';

void main() {
  // RGB 颜色
  final rgbColor = RgbColor(255, 0, 0); // 红色

  // HSL 颜色
  final hslColor = HslColor(0, 1.0, 0.5); // 红色

  // HSV 颜色
  final hsvColor = HsvColor(0, 1.0, 1.0); // 红色

  // CMYK 颜色
  final cmykColor = CmykColor(0, 1.0, 1.0, 0); // 红色
}

2. 颜色模型之间的转换

你可以在不同的颜色模型之间进行转换。例如：

import 'package:flutter_color_models/flutter_color_models.dart';

void main() {
  // RGB 转 HSL
  final rgbColor = RgbColor(255, 0, 0);
  final hslColor = rgbColor.toHslColor();
  print(hslColor); // HslColor(h: 0.0, s: 1.0, l: 0.5)

  // HSL 转 HSV
  final hsvColor = hslColor.toHsvColor();
  print(hsvColor); // HsvColor(h: 0.0, s: 1.0, v: 1.0)

  // HSV 转 CMYK
  final cmykColor = hsvColor.toCmykColor();
  print(cmykColor); // CmykColor(c: 0.0, m: 1.0, y: 1.0, k: 0.0)
}

3. 使用颜色

你可以将这些颜色对象直接用于 Flutter 的 Color 对象：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final rgbColor = RgbColor(255, 0, 0);
    final color = rgbColor.toColor();

    return MaterialApp(
      home: Scaffold(
        backgroundColor: color,
        body: Center(
          child: Text('Hello, World!', style: TextStyle(color: Colors.white)),
        ),
      ),
    );
  }
}

其他功能

flutter_color_models 还提供了其他一些有用的功能，例如：

颜色混合：你可以使用 mix 方法将两种颜色混合在一起。
颜色调整：你可以调整颜色的亮度、饱和度等属性。

import 'package:flutter_color_models/flutter_color_models.dart';

void main() {
  final color1 = RgbColor(255, 0, 0);
  final color2 = RgbColor(0, 0, 255);

  // 混合颜色
  final mixedColor = color1.mix(color2, 0.5);
  print(mixedColor); // RgbColor(r: 127, g: 0, b: 127)

  // 调整亮度
  final adjustedColor = color1.withLightness(0.8);
  print(adjustedColor); // RgbColor(r: 204, g: 0, b: 0)
}

Flutter颜色模型管理插件flutter_color_models的使用