Flutter色彩提取插件flutter_palette的使用

Flutter色彩提取插件flutter_palette的使用

简介

flutter_palette 是一个用于创建、生成和操作调色板的包。它封装了 palette 包并添加了对 Flutter 的 Color 对象的支持。

flutter_palette 基于 flutter_color_models 包构建，该包提供了 CMYK、HSI、HSL、HSP、HSB、Oklab、LAB、RGB 和 XYZ 色彩空间的模型。

注意： 若要在非 Flutter 环境下使用，请参阅：https://pub.dev/packages/palette

使用方法

首先，在 pubspec.yaml 文件中添加依赖项：

dependencies:
  flutter_palette: ^x.x.x

然后在 Dart 文件中导入：

import 'package:flutter_palette/flutter_palette.dart';

创建调色板

ColorPalette 可以通过构造函数直接创建，也可以使用工厂构造函数生成。

ColorPalette 提供了七个工厂构造函数：from、empty、adjacent、polyad、random、splitComplimentary 和 opposites。

// 使用预定义颜色创建调色板。
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.from([
  Color(0xFF000000), // 黑色
  Color(0xFF909090), // 灰色
  Color(0xFFFFFFFF), // 白色
  Color(0xFFFF0000), // 红色
  Color(0xFF00FF00), // 绿色
  Color(0xFF0000FF), // 蓝色
  Color(0xFFFFFF00), // 黄色
  Color(0xFF00FFFF), // 青色
  Color(0xFFFF00FF), // 洋红色
]);

// 创建空调色板。
ColorPalette.empty();

// 生成一个包含3个颜色的调色板，这些颜色位于基准颜色两侧各60度的位置。
ColorPalette.adjacent(
  Color(0xFFFF0000),
  numberOfColors: 3,
  distance: 60,
);

// 生成一个包含5个颜色的调色板，这些颜色均匀分布在基准颜色周围，每个颜色的色调变化15度，饱和度和亮度值变化10%。
ColorPalette.polyad(
  Color(0xFF00FFFF),
  numberOfColors: 5,
  hueVariability: 15,
  saturationVariability: 10,
  brightnessVariability: 10,
);

// 生成一个包含8个随机颜色的调色板，默认情况下，这些颜色会在色轮上均匀分布。
ColorPalette.random(8, distributionVariability: 0);

// 生成一个包含8个完全随机颜色的调色板。
ColorPalette.random(8, distributeHues: false);

// 生成一个包含5个颜色的调色板，这些颜色分布在基准颜色的补色两侧。默认情况下，这些颜色之间的色调距离为30度。
ColorPalette.splitComplimentary(
  Color(0xFF0000FF),
  numberOfColors: 5,
  hueVariability: 15,
  saturationVariability: 10,
  brightnessVariability: 10,
);

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

查看颜色

调色板可以作为一个 List<ColorModel> 来查看，也可以作为 List<Color> 来查看。

// 构造一个包含RgbColor的颜色调色板。
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.colors创建一个新的List<Color>。
final materialColors = colorPalette.toColors();

修改调色板

为了方便起见，ColorPalette 封装了一些 List 的方法，用于与颜色列表进行交互。你可以使用 [add]、[addAll] 和 [remove] 方法添加或删除颜色，还可以使用 [insert]、[insertAll]、[getRange]、[setRange]、[removeRange] 和 [replaceRange] 方法。你也可以通过位置获取和设置颜色，使用 [combine] 方法或 + 运算符来组合调色板。

// 创建一个空调色板。
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));

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 提供了一系列获取具有特定属性的颜色的方法：

// 返回感知亮度值最高的颜色。
ColorModel get brightest;

// 返回感知亮度值最低的颜色。
ColorModel get dimmest;

// 返回亮度值最高的颜色。
ColorModel get lightest;

// 返回亮度值最低的颜色。
ColorModel get darkest;

// 返回强度值最高的颜色。
ColorModel get mostIntense;

// 返回强度值最低的颜色。
ColorModel get leastIntense;

// 返回饱和度值最高的颜色。
ColorModel get deepest;

// 返回饱和度值最低的颜色。
ColorModel get dullest;

// 返回饱和度和亮度值之和最高的颜色。
ColorModel get richest;

// 返回饱和度和亮度值之和最低的颜色。
ColorModel get muted;

// 返回最红的颜色。（0°）
ColorModel get red;

// 返回最红橙色的颜色。（30°）
ColorModel get redOrange;

// 返回最橙色的颜色。（60°）
ColorModel get orange;

// 返回最黄橙色的颜色。（90°）
ColorModel get yellowOrange;

// 返回最黄的颜色。（120°）
ColorModel get yellow;

// 返回最黄绿色的颜色。（150°）
ColorModel get yellowGreen;

// 返回最绿的颜色。（180°）
ColorModel get green;

// 返回最青色的颜色。（210°）
ColorModel get cyan;

// 返回最蓝色的颜色。（240°）
ColorModel get blue;

// 返回最蓝紫色的颜色。（270°）
ColorModel get blueViolet;

// 返回最紫色的颜色。（300°）
ColorModel get violet;

// 返回最洋红色的颜色。（330°）
ColorModel get magenta;

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

1 回复

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


当然，下面是一个关于如何使用Flutter色彩提取插件flutter_palette的示例代码。这个插件可以从图像中提取主导颜色，非常适合用于生成主题颜色等场景。

首先，确保你已经在pubspec.yaml文件中添加了flutter_palette依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_palette: ^0.3.0  # 请检查最新版本号

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

接下来是一个完整的示例代码，展示如何从本地资产图像中提取颜色：

import 'package:flutter/material.dart';
import 'package:flutter_palette/flutter_palette.dart';
import 'dart:ui' as ui;
import 'dart:typed_data';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Palette Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  List<PaletteColor> _dominantColors;

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

  Future<void> _extractColorsFromImage() async {
    // 加载本地资产图像
    final ByteData imageBytes = await rootBundle.load('assets/your_image.jpg');
    final Uint8List list = imageBytes.buffer.asUint8List();
    final ui.Codec codec = await ui.instantiateImageCodec(list);
    final ui.FrameInfo frameInfo = await codec.getNextFrame();
    final ui.Image image = frameInfo.image;

    // 使用Flutter Palette提取颜色
    final PaletteGenerator paletteGenerator = await PaletteGenerator.fromImage(image);
    final Palette palette = await paletteGenerator.generate();

    // 更新状态
    setState(() {
      _dominantColors = palette.dominantColors;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Palette Example'),
      ),
      body: Center(
        child: _dominantColors == null
            ? CircularProgressIndicator()
            : Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  for (final PaletteColor color in _dominantColors)
                    Container(
                      height: 100,
                      width: 100,
                      color: color.color,
                      margin: EdgeInsets.all(8.0),
                      child: Center(
                        child: Text(
                          '${color.color.value.toRadixString(16)}',
                          style: TextStyle(color: Colors.white),
                        ),
                      ),
                    ),
                ],
              ),
      ),
    );
  }
}

在上面的代码中：

  1. 我们首先确保在pubspec.yaml文件中添加了flutter_palette依赖。
  2. 使用rootBundle.load加载本地资产图像（你需要将图像放在assets文件夹中，并在pubspec.yaml中声明它）。
  3. 使用ui.instantiateImageCodec和ui.FrameInfo解码图像。
  4. 使用PaletteGenerator.fromImage从图像中提取颜色。
  5. 在UI中显示提取到的主导颜色。

请确保你已经将图像添加到assets文件夹，并在pubspec.yaml中正确声明它，例如：

flutter:
  assets:
    - assets/your_image.jpg

这个示例展示了如何使用flutter_palette从图像中提取主导颜色，并在Flutter应用中显示这些颜色。

回到顶部