Flutter颜色提取插件color_thief_flutter的使用

color_thief_flutter是一个基于 Dart 的 Flutter 颜色提取插件，其灵感来源于 color-thief，并依赖于 quantize_dart。该插件可以帮助开发者从图像中提取主色调或生成颜色调色板。

使用方法

引入插件

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

dependencies:
  color_thief_flutter: ^x.x.x

然后运行以下命令以更新依赖：

flutter pub get

接下来在代码中导入插件：

import 'package:color_thief_flutter/color_thief_flutter.dart';
import 'package:color_thief_flutter/utils.dart';

示例代码

以下是一个完整的示例，展示了如何使用 color_thief_flutter 提取颜色和调色板。

import 'package:color_thief_flutter/color_thief_flutter.dart';
import 'package:color_thief_flutter/utils.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: ColorExtractionPage(),
    );
  }
}

class ColorExtractionPage extends StatefulWidget {
  @override
  _ColorExtractionPageState createState() => _ColorExtractionPageState();
}

class _ColorExtractionPageState extends State<ColorExtractionPage> {
  List<int> _mainColor = [0, 0, 0]; // 主色调
  List<List<int>> _palette = []; // 调色板
  Image _image; // 图像对象

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

    // 示例 URL
    final url = 'https://github.githubassets.com/images/modules/open_graph/github-octocat.png';

    // 从 URL 获取主色调
    getColorFromUrl(url).then((color) {
      setState(() {
        _mainColor = color;
      });
    });

    // 从 URL 获取调色板
    getPaletteFromUrl(url).then((palette) {
      setState(() {
        _palette = palette;
      });
    });

    // 从 URL 获取图像
    getImageFromUrl(url).then((image) {
      setState(() {
        _image = image;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Color Thief Flutter Example'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            // 显示图像
            _image != null
                ? Image(image: _image)
                : CircularProgressIndicator(),

            SizedBox(height: 20),

            // 显示主色调
            Text(
              'Main Color: ${_mainColor.toString()}',
              style: TextStyle(fontSize: 18),
            ),

            SizedBox(height: 20),

            // 显示调色板
            Text(
              'Palette Colors:',
              style: TextStyle(fontSize: 18),
            ),
            Wrap(
              spacing: 10,
              runSpacing: 10,
              children: _palette.map((color) {
                return Container(
                  width: 50,
                  height: 50,
                  decoration: BoxDecoration(
                    color: Color.fromRGBO(color[0], color[1], color[2], 1),
                    borderRadius: BorderRadius.circular(8),
                  ),
                );
              }).toList(),
            ),
          ],
        ),
      ),
    );
  }
}

详细说明

函数详解

getColorFromUrl

从图像 URL 中提取主色调（最大聚类的颜色），返回格式为 [R, G, B]。

getColorFromUrl(String url, [int quality])

参数：

• url: 图像的 URL。
• quality: 可选参数，默认值为 10，范围为 1 到 10。

getPaletteFromUrl

从图像 URL 中提取颜色调色板，返回格式为 [[R, G, B]]。

getPaletteFromUrl(String url, [int colorCount, int quality])

参数：

• url: 图像的 URL。
• colorCount: 可选参数，表示调色板中的颜色数量，默认值为 10，范围为 2 到 256。
• quality: 可选参数，默认值为 10，范围为 1 到 10。

getImageFromUrl

从图像 URL 获取图像对象。

getImageFromUrl(String url)

参数：

• url: 图像的 URL。

getImageFromProvider

从 ImageProvider 获取图像对象。

getImageFromProvider(ImageProvider imageProvider)

参数：

• imageProvider: 图像提供器。

getColorFromImage

从图像对象中提取主色调。

getColorFromImage(Image image, [int quality = 10])

参数：

• image: 图像对象。
• quality: 可选参数，默认值为 10，范围为 1 到 10。

getPaletteFromImage

从图像对象中提取颜色调色板。

getPaletteFromImage(Image image, [int colorCount, int quality])

参数：

• image: 图像对象。
• colorCount: 可选参数，表示调色板中的颜色数量，默认值为 10，范围为 2 到 256。
• quality: 可选参数，默认值为 10，范围为 1 到 10。

工具函数

fromRGBtoHSV

将 RGB 颜色转换为 HSV 颜色。

fromRGBtoHSV(List<int> rgb)

参数：

• rgb: RGB 颜色数组，范围为 [0, 255]。

fromHSVtoRGB

将 HSV 颜色转换为 RGB 颜色。

fromHSVtoRGB(List<int> hsv)