Flutter颜色提取插件palette的使用

插件介绍

palette 是一个用于创建、生成和处理颜色调色板的包。它基于 color_models 包，该包提供了 CMYK、HSI、HSL、HSP、HSB、LAB、Oklab、RGB 和 XYZ 等颜色空间模型。

对于 Flutter 应用中的颜色提取，可以参考以下链接：

flutter_palette

使用方法

首先，需要导入 palette 包：

import 'package:palette/palette.dart';

创建调色板

直接构造

可以通过传入一组预定义的颜色来直接创建一个 ColorPalette 对象：

final colorPalette = ColorPalette([
  RgbColor(0, 0, 0), // 黑色
  RgbColor(144, 144, 144), // 灰色
  RgbColor(255, 255, 255), // 白色
  RgbColor(255, 0, 0), // 红色
  RgbColor(0, 255, 0), // 绿色
  RgbColor(0, 0, 255), // 蓝色
  RgbColor(255, 255, 0), // 黄色
  RgbColor(0, 255, 255), // 青色
  RgbColor(255, 0, 255), // 洋红色
]);

工厂构造函数

ColorPalette 提供了多个工厂构造函数来生成不同类型的调色板：

// 创建一个空的调色板
final emptyPalette = ColorPalette.empty();

// 生成一个包含3种颜色的相邻调色板
final adjacentPalette = ColorPalette.adjacent(
  RgbColor(255, 0, 0),
  numberOfColors: 3,
  distance: 60,
);

// 生成一个包含5种颜色的多边调色板
final polyadPalette = ColorPalette.polyad(
  CmykColor(100, 50, 0, 0),
  numberOfColors: 5,
  hueVariability: 15,
  saturationVariability: 10,
  brightnessVariability: 10,
);

// 生成一个包含8种随机颜色的调色板
final randomPalette = ColorPalette.random(8, distributionVariability: 0);

// 生成一个包含8种随机值的调色板
final randomValuesPalette = ColorPalette.random(8, distributeHues: false);

// 生成一个包含5种颜色的分割互补调色板
final splitComplimentaryPalette = ColorPalette.splitComplimentary(
  HslColor(150, 60, 100),
  numberOfColors: 5,
);

// 生成一个包含所有颜色及其补色的调色板
final oppositesPalette = ColorPalette.opposites(colorPalette);

查看颜色列表

可以将调色板视为 List<ColorModel> 来查看其中的颜色：

// 构建一个由 RgbColor 组成的 ColorPalette
final colorPalette = ColorPalette([
  RgbColor(0, 0, 0), // 黑色
  RgbColor(144, 144, 144), // 灰色
  RgbColor(255, 255, 255), // 白色
  RgbColor(255, 0, 0), // 红色
  RgbColor(0, 255, 0), // 绿色
  RgbColor(0, 0, 255), // 蓝色
  RgbColor(255, 255, 0), // 黄色
  RgbColor(0, 255, 255), // 青色
  RgbColor(255, 0, 255), // 洋红色
]);

// 获取构建时使用的颜色列表
final colors = colorPalette.colors;

修改调色板

为了方便操作，ColorPalette 封装了一些 List 的方法来与内部的颜色列表进行交互。可以添加、删除和插入颜色，也可以通过索引获取或设置颜色。还可以使用组合方法或加号运算符来合并调色板：

// 创建一个空的调色板
final colorPalette = ColorPalette.empty();

// 添加一个纯红的 RGB 颜色到调色板
colorPalette.add(RgbColor(255, 0, 0));

// 从调色板中移除纯红的 RGB 颜色
colorPalette.remove(RgbColor(255, 0, 0));

// 添加一个颜色列表中的所有颜色
colorPalette.addAll([
  RgbColor(0, 0, 0), // 黑色
  RgbColor(144, 144, 144), // 灰色
  RgbColor(255, 255, 255), // 白色
  RgbColor(255, 0, 0), // 红色
  RgbColor(0, 255, 0), // 绿色
  RgbColor(0, 0, 255), // 蓝色
  RgbColor(255, 255, 0), // 黄色
  RgbColor(0, 255, 255), // 青色
  RgbColor(255, 0, 255), // 洋红色
]);

// 打印从索引2到4的颜色
print(colorPalette.getRange(2, 4)); // [RgbColor(255, 255, 255), RgbColor(255, 0, 0)]

排序调色板

ColorPalette 提供了两种排序方法：sortBy 和 sortByHue。这些方法可以根据多种属性对颜色进行排序，并且还提供了一个 reverse 方法来反转颜色的顺序：

// 按最高到最低亮度排序
colorPalette.sortBy(ColorSortingProperty.brightest);

// 按最低到最高亮度排序
colorPalette.sortBy(ColorSortingProperty.dimmest);

// 按最高到最低光度排序
colorPalette.sortBy(ColorSortingProperty.lightest);

// 按最低到最高光度排序
colorPalette.sortBy(ColorSortingProperty.darkest);

// 按最高到最低强度排序
colorPalette.sortBy(ColorSortingProperty.mostIntense);

// 按最低到最高强度排序
colorPalette.sortBy(ColorSortingProperty.leastIntense);

// 按最高到最低饱和度排序
colorPalette.sortBy(ColorSortingProperty.deepest);

// 按最低到最高饱和度排序
colorPalette.sortBy(ColorSortingProperty.dullest);

// 按最高到最低饱和度和亮度值排序
colorPalette.sortBy(ColorSortingProperty.richest);

// 按最低到最高饱和度和亮度值排序
colorPalette.sortBy(ColorSortingProperty.muted);

// 按距离红色（0°）的距离排序
colorPalette.sortBy(ColorSortingProperty.red);

// 按距离红橙色（30°）的距离排序
colorPalette.sortBy(ColorSortingProperty.redOrange);

// 按距离橙色（60°）的距离排序
colorPalette.sortBy(ColorSortingProperty.orange);

// 按距离黄橙色（90°）的距离排序
colorPalette.sortBy(ColorSortingProperty.yellowOrange);

// 按距离黄色（120°）的距离排序
colorPalette.sortBy(ColorSortingProperty.yellow);

// 按距离黄绿色（150°）的距离排序
colorPalette.sortBy(ColorSortingProperty.yellowGreen);

// 按距离绿色（180°）的距离排序
colorPalette.sortBy(ColorSortingProperty.green);

// 按距离青色（210°）的距离排序
colorPalette.sortBy(ColorSortingProperty.cyan);

// 按距离蓝色（240°）的距离排序
colorPalette.sortBy(ColorSortingProperty.blue);

// 按距离蓝紫色（270°）的距离排序
colorPalette.sortBy(ColorSortingProperty.blueViolet);

// 按距离紫色（300°）的距离排序
colorPalette.sortBy(ColorSortingProperty.violet);

// 按距离洋红色（330°）的距离排序
colorPalette.sortBy(ColorSortingProperty.magenta);

sortByHue 方法会根据颜色在色轮上的位置进行排序，可以选择顺时针或逆时针方向：

// 按顺时针方向从0°开始排序
colorPalette.sortByHue();

// 按逆时针方向从145°开始排序
colorPalette.sortByHue(startingFrom: 145, clockwise: false);

颜色调整

ColorPalette 还封装了 ColorModel 的颜色调整方法，如 invert、opposite、rotateHue、warmer 和 cooler，但它们应用于整个调色板：

// 反转调色板中的每个颜色
colorPalette.invert();

// 设置调色板中的每个颜色为其各自的补色
colorPalette.opposite();

// 旋转调色板中每个颜色的色调15°
colorPalette.rotateHue(15);

// 使调色板中的每个颜色变暖10%
colorPalette.warmer(10);

// 使调色板中的每个颜色变冷20%
colorPalette.cooler(20);

获取特定颜色

ColorPalette 提供了许多获取具有特定属性的颜色的方法：

// 返回感知亮度最高的颜色
final brightest = colorPalette.brightest;

// 返回感知亮度最低的颜色
final dimmest = colorPalette.dimmest;

// 返回光度最高的颜色
final lightest = colorPalette.lightest;

// 返回光度最低的颜色
final darkest = colorPalette.darkest;

// 返回强度最高的颜色
final mostIntense = colorPalette.mostIntense;

// 返回强度最低的颜色
final leastIntense = colorPalette.leastIntense;

// 返回饱和度最高的颜色
final deepest = colorPalette.deepest;

// 返回饱和度最低的颜色
final dullest = colorPalette.dullest;

// 返回饱和度和亮度值综合最高的颜色
final richest = colorPalette.richest;

// 返回饱和度和亮度值综合最低的颜色
final muted = colorPalette.muted;

// 返回最红的颜色（0°）
final red = colorPalette.red;

// 返回最红橙色的颜色（30°）
final redOrange = colorPalette.redOrange;

// 返回最橙色的颜色（60°）
final orange = colorPalette.orange;

// 返回最黄橙色的颜色（90°）
final yellowOrange = colorPalette.yellowOrange;

// 返回最黄色的颜色（120°）
final yellow = colorPalette.yellow;

// 返回最黄绿色的颜色（150°）
final yellowGreen = colorPalette.yellowGreen;

// 返回最绿色的颜色（180°）
final green = colorPalette.green;

// 返回最青色的颜色（210°）
final cyan = colorPalette.cyan;

// 返回最蓝色的颜色（240°）
final blue = colorPalette.blue;

// 返回最蓝紫色的颜色（270°）
final blueViolet = colorPalette.blueViolet;

// 返回最紫色的颜色（300°）
final violet = colorPalette.violet;

// 返回最洋红色的颜色（330°）
final magenta = colorPalette.magenta;

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

vueper 1楼

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

palette 是一个用于从图像中提取颜色的 Flutter 插件。它可以帮助你从图像中提取出主要的颜色、鲜艳的颜色、柔和的颜色等。这个插件非常适合用来根据图像的内容动态调整 UI 的颜色主题。

安装 `palette` 插件

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

dependencies:
  flutter:
    sdk: flutter
  palette_generator: ^7.0.0

然后运行 flutter pub get 来安装插件。

使用 `palette` 插件

以下是一个简单的示例，展示了如何使用 palette 插件从图像中提取颜色。

import 'package:flutter/material.dart';
import 'package:palette_generator/palette_generator.dart';
import 'dart:io';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Palette Example')),
        body: Center(
          child: PaletteExample(),
        ),
      ),
    );
  }
}

class PaletteExample extends StatefulWidget {
  @override
  _PaletteExampleState createState() => _PaletteExampleState();
}

class _PaletteExampleState extends State<PaletteExample> {
  PaletteGenerator? _paletteGenerator;

  @override
  void initState() {
    super.initState();
    _generatePalette();
  }

  Future<void> _generatePalette() async {
    final image = File('assets/images/sample_image.jpg');
    final imageProvider = FileImage(image);
    _paletteGenerator = await PaletteGenerator.fromImageProvider(imageProvider);
    setState(() {});
  }

  @override
  Widget build(BuildContext context) {
    if (_paletteGenerator == null) {
      return CircularProgressIndicator();
    }

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text('Dominant Color: ${_paletteGenerator!.dominantColor?.color}'),
        Text('Vibrant Color: ${_paletteGenerator!.vibrantColor?.color}'),
        Text('Light Vibrant Color: ${_paletteGenerator!.lightVibrantColor?.color}'),
        Text('Dark Vibrant Color: ${_paletteGenerator!.darkVibrantColor?.color}'),
        Text('Muted Color: ${_paletteGenerator!.mutedColor?.color}'),
        Text('Light Muted Color: ${_paletteGenerator!.lightMutedColor?.color}'),
        Text('Dark Muted Color: ${_paletteGenerator!.darkMutedColor?.color}'),
      ],
    );
  }
}

代码解释

导入依赖：

import 'package:palette_generator/palette_generator.dart';

Flutter颜色提取插件palette的使用

Flutter颜色提取插件palette的使用

插件介绍

使用方法

创建调色板

直接构造

工厂构造函数

查看颜色列表

修改调色板

排序调色板

颜色调整

获取特定颜色

安装 palette 插件

使用 palette 插件

代码解释

安装 `palette` 插件

使用 `palette` 插件