Flutter颜色处理插件tinycolor2的使用

简介

tinycolor2 是一个用于Flutter的颜色操作和转换的小型库。它移植自 Brian Grinstead 的 tinycolor2，提供了丰富的颜色操作功能，可以方便地进行颜色的创建、转换和修改。

快速开始

TinyColor 可以接收一个 Color 作为参数：

import 'package:tinycolor2/tinycolor2.dart';

final TinyColor tinyColor = TinyColor.fromColor(Colors.green);

你也可以直接扩展Flutter的原生 Color 类来使用所有相同的功能，但更加简洁。

构造函数

从Flutter的 `Color` 创建

TinyColor.fromColor(Colors.blue);

从十六进制字符串创建

TinyColor.fromString('#FE5567');

从 `HSLColor` 创建

final HSLColor color = HSLColor.fromAHSL(1.0, 250, 57, 30);
TinyColor.fromHSLColor(color);

从 `HSVColor` 创建

final HSVColor color = HSVColor.fromAHSV(1.0, 250, 57, 30);
TinyColor.fromHSVColor(color);

方法

转换

`.toColor()`

返回Flutter的 Color 对象。

final Color color = TinyColor.fromColor(Colors.white).toColor();

`.toHSLColor()`

返回Flutter的 HSLColor 对象。

final HSLColor color = TinyColor.fromColor(Colors.white).toHSLColor();

`.toHSVColor()`

返回Flutter的 HSVColor 对象。

final HSVColor color = TinyColor.fromColor(Colors.white).toHSVColor();

属性

`.isLight()`

返回一个布尔值，指示颜色的感知亮度是否为浅色。

TinyColor.fromString("#ffffff").isLight(); // true
TinyColor.fromString("#000000").isLight(); // false
// 或者使用Color扩展
Colors.white.isLight;  // true

`.isDark()`

返回一个布尔值，指示颜色的感知亮度是否为深色。

TinyColor.fromString("#ffffff").isDark(); // false
TinyColor.fromString("#000000").isDark(); // true
// 或者使用Color扩展
Colors.white.isDark;  // false

`.getBrightness()`

返回颜色的感知亮度，范围从 0 到 255。

TinyColor.fromString("#ffffff").getBrightness(); // 255
TinyColor.fromString("#000000").getBrightness(); // 0
// 或者使用Color扩展
Colors.grey.brightness;  // 127

`.getLuminance()`

返回颜色的感知亮度，等同于Flutter的 Color.computeLuminance()。

TinyColor.fromString("#ffffff").getLuminance();
// 或者使用Color扩展
Colors.white.luminance;

工具方法

`.clone()`

克隆一个新的 TinyColor 对象，任何对新对象的更改都不会影响旧对象。

final TinyColor color1 = TinyColor.fromColor(Colors.red);
final TinyColor color2 = color1.clone();
color2.setAlpha(20);

`==`

比较两个 TinyColor 对象是否相等。

final TinyColor color1 = TinyColor.fromColor(Colors.blue);
final TinyColor color2 = TinyColor.fromColor(Colors.yellow);
if (color1 == color2) return "same";
else return "different";

修改方法

这些方法会操作当前颜色，并返回新的 TinyColor 对象以便链式调用。

`.setAlpha()`

设置颜色的透明度，范围从 0 到 255。

TinyColor.fromColor(Colors.red).setAlpha(10);

`.setOpacity()`

设置颜色的不透明度，范围从 0.0 到 1.0。

TinyColor.fromColor(Colors.red).setOpacity(0.5);

`.lighten()`

使颜色变亮，范围从 0 到 100。

TinyColor.fromColor(Colors.red).lighten().color;
TinyColor.fromColor(Colors.red).lighten(100).color;
// 或者使用Color扩展
Colors.red.lighten(50);

`.brighten()`

使颜色变亮，范围从 0 到 100。

TinyColor.fromColor(Colors.black).brighten().color;
// 或者使用Color扩展
Colors.black.brighten(50);

`.darken()`

使颜色变暗，范围从 0 到 100。

TinyColor.fromColor(Colors.red).darken().color;
TinyColor.fromColor(Colors.red).darken(100).color;
// 或者使用Color扩展
Colors.red.darken(50);

`.tint()`

与纯白色混合，范围从 0 到 100。

TinyColor.fromColor(Color.red).tint().color;
TinyColor.fromColor(Color.red).tint(100).color;
// 或者使用Color扩展
Colors.red.tint(50);

`.shade()`

与纯黑色混合，范围从 0 到 100。

TinyColor.fromColor(Colors.red).shade().color;
TinyColor.fromColor(Colors.red).shade(100).color;
// 或者使用Color扩展
Colors.red.shade(50);

`.desaturate()`

减少饱和度，范围从 0 到 100。

TinyColor.fromColor(Colors.red).desaturate().color;
TinyColor.fromColor(Colors.red).desaturate(100).color;
// 或者使用Color扩展
Colors.red.desaturate(50);

`.saturate()`

增加饱和度，范围从 0 到 100。

TinyColor.fromColor(Colors.red).saturate().color;
// 或者使用Color扩展
Colors.red.saturate(50);

`.greyscale()`

完全去饱和，变为灰度。

TinyColor.fromColor(Colors.red).greyscale().color;
// 或者使用Color扩展
Colors.red.greyscale();

`.spin()`

旋转色相，范围从 -360 到 360。

TinyColor.fromColor(Colors.red).spin(180).color;
// 或者使用Color扩展
Colors.red.spin(180);

// spin(0) 和 spin(360) 不会改变颜色
TinyColor.fromColor(Colors.red).spin(0).color;
TinyColor.fromColor(Colors.red).spin(360).color;

`.complement()`

返回互补色。

TinyColor.fromColor(Colors.red).complement().color;
// 或者使用Color扩展
Colors.red.complement();

`.mix()`

与另一个颜色混合，范围从 0 到 100。

TinyColor.fromColor(Colors.red).mix(TinyColor.fromColor(Colors.yellow, 20)).color;
// 或者使用Color扩展
Colors.red.mix(Colors.yellow, 20);

扩展

所有上述方法都可以通过扩展类来使用，部分方法返回 bool 或 double 类型，其余则返回其原始类型。

`Color` 扩展

final TinyColor color = Colors.black.toTinyColor();
final HSVColor hsv = Colors.white.toHSVColor();
final HSLColor hsl = Colors.white.toHSLColor();
final bool isDark = Colors.yellow.isDark;
final bool isLight = Colors.red.isLight;
final double luminance = Colors.blue.luminance;
final double brightness = Colors.blue.brightness;
final Color newColor = Colors.green.mix(Colors.white, 50);

示例代码

下面是一个完整的示例应用，展示了如何在Flutter中使用 tinycolor2 进行颜色操作：

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

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

class TinyColorApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TinyColor2 Example',
      theme: ThemeData(
        primarySwatch: Colors.grey,
      ),
      home: const ExamplePage(),
    );
  }
}

class ExamplePage extends StatelessWidget {
  const ExamplePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final TinyColor tc = TinyColor.fromColor(Colors.blue);

    return Scaffold(
      appBar: AppBar(
        title: const Text("TinyColor2 Example"),
      ),
      body: ListView(
        children: <Widget>[
          _createListItem(
            title: "Original color",
            subtitle: """
TinyColor tc = TinyColor(Colors.blue)
Color c = Colors.blue
""",
            color: tc.color,
            showOr: false,
          ),
          _createListItem(
            title: "tc.lighten(20)",
            subtitle: "c.lighten(20)",
            color: tc.lighten(20).color,
          ),
          _createListItem(
            title: "tc.brighten(20)",
            subtitle: "c.brighten(20)",
            color: tc.brighten(20).color,
          ),
          _createListItem(
            title: "tc.darken(20)",
            subtitle: "c.darken(20)",
            color: tc.darken(20).color,
          ),
          _createListItem(
            title: "tc.tint(20)",
            subtitle: "c.tint(20)",
            color: tc.tint(20).color,
          ),
          _createListItem(
            title: "tc.shade(20)",
            subtitle: "c.shade(20)",
            color: tc.shade(20).color,
          ),
          _createListItem(
            title: "tc.desaturate(20)",
            subtitle: "c.desaturate(20)",
            color: tc.desaturate(20).color,
          ),
          _createListItem(
            title: "tc.saturate(20)",
            subtitle: "c.saturate(20)",
            color: tc.saturate(20).color,
          ),
          _createListItem(
            title: "tc.greyscale()",
            subtitle: "c.greyscale()",
            color: tc.greyscale().color,
          ),
          _createListItem(
            title: "tc.spin(90)",
            subtitle: "c.spin(90)",
            color: tc.spin(90).color,
          ),
          _createListItem(
            title: "tc.complement()",
            subtitle: "c.complement()",
            color: tc.complement().color,
          ),
          _createListItem(
            title: "tc.mix(Colors.yellow, 20)",
            subtitle: "c.mix(Colors.yellow, 20)",
            color: tc.mix(Colors.yellow, 20).color,
          ),
        ],
      ),
    );
  }

  Widget _createListItem({
    required String title,
    required String subtitle,
    required Color color,
    bool showOr = true,
  }) =>
      ListTile(
        title: Text(title),
        subtitle: Text("${showOr ? "or: " : ""}$subtitle"),
        trailing: CircleAvatar(backgroundColor: color),
      );
}

这个示例应用展示了如何使用 tinycolor2 对颜色进行各种操作，并将结果显示在一个列表中。每个列表项都包含一个标题、描述和一个圆形的颜色样本。

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

ionicwang 1楼•2 天前

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

当然，以下是如何在Flutter中使用tinycolor2插件来处理颜色的代码示例。首先，需要注意的是，tinycolor2本身是一个Dart包，用于在Dart（以及Flutter）项目中方便地处理颜色。然而，由于tinycolor2并非官方Flutter插件库中的一个常见包（可能是第三方或者自定义的），我将以一个假定的tinycolor2 Dart包为例，展示如何使用它。

假设我们有一个名为tinycolor2的Dart包，它提供了类似JavaScript中tinycolor2库的功能。

1. 添加依赖

首先，你需要在pubspec.yaml文件中添加tinycolor2的依赖（注意：这里是一个假设的包名，你需要根据实际情况替换为真实的包名或URL）。

dependencies:
  flutter:
    sdk: flutter
  tinycolor2: ^x.y.z  # 替换为实际的版本号或包名

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

2. 导入包

在你的Dart文件中导入tinycolor2包。

import 'package:tinycolor2/tinycolor2.dart';

3. 使用tinycolor2处理颜色

以下是一些使用tinycolor2处理颜色的示例代码：

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

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

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

class ColorDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 创建一个TinyColor实例
    TinyColor color = TinyColor.fromHex('#3498db');

    // 打印原始颜色信息
    print('Original Color: ${color.toHexString()}');

    // 亮度增加
    TinyColor brighterColor = color.brighten(20);
    print('Brighter Color: ${brighterColor.toHexString()}');

    // 亮度减少
    TinyColor darkerColor = color.darken(20);
    print('Darker Color: ${darkerColor.toHexString()}');

    // 饱和度增加
    TinyColor saturateColor = color.saturate(20);
    print('Saturated Color: ${saturateColor.toHexString()}');

    // 饱和度减少
    TinyColor desaturateColor = color.desaturate(20);
    print('Desaturated Color: ${desaturateColor.toHexString()}');

    // 灰度化
    TinyColor greyscaleColor = color.greyscale();
    print('Greyscale Color: ${greyscaleColor.toHexString()}');

    // 转换为Flutter Color对象
    Color flutterColor = Color(int.parse(color.toHexString().substring(1), 16) + 0xFF000000);

    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ColorSwatch(color: flutterColor),
        Text('Original Color'),
        SizedBox(height: 20),
        ColorSwatch(color: Color(int.parse(brighterColor.toHexString().substring(1), 16) + 0xFF000000)),
        Text('Brighter Color'),
        SizedBox(height: 20),
        ColorSwatch(color: Color(int.parse(darkerColor.toHexString().substring(1), 16) + 0xFF000000)),
        Text('Darker Color'),
        // 你可以继续添加其他颜色示例...
      ],
    );
  }
}

// 一个简单的颜色展示组件
class ColorSwatch extends StatelessWidget {
  final Color color;

  ColorSwatch({required this.color});

  @override
  Widget build(BuildContext context) {
    return Container(
      width: 100,
      height: 100,
      color: color,
    );
  }
}

注意

TinyColor类：在这个示例中，TinyColor类提供了各种方法来处理颜色。你需要确保你的tinycolor2包中有这个类以及相应的方法。
颜色转换：Flutter中的颜色是以ARGB格式存储的，而tinycolor2可能返回的是十六进制字符串。因此，在将tinycolor2的颜色转换为Flutter的Color对象时，需要做一些额外的处理（如上面的代码所示）。
实际包：由于tinycolor2可能不是一个真实的Flutter包名，你需要找到实际的包名并替换上述代码中的tinycolor2。

希望这个示例能够帮助你理解如何在Flutter中使用tinycolor2（或类似的）插件来处理颜色。如果你有任何进一步的问题或需要更详细的解释，请随时提问。

Flutter颜色处理插件tinycolor2的使用

Flutter颜色处理插件tinycolor2的使用

简介

快速开始

构造函数

从Flutter的 Color 创建

从十六进制字符串创建

从 HSLColor 创建

从 HSVColor 创建

方法

转换

.toColor()

.toHSLColor()

.toHSVColor()

属性

.isLight()

.isDark()

.getBrightness()

.getLuminance()

工具方法

.clone()

==

修改方法

.setAlpha()

.setOpacity()

.lighten()

.brighten()

.darken()

.tint()

.shade()

.desaturate()

.saturate()

.greyscale()

.spin()

.complement()

.mix()

扩展

Color 扩展

示例代码

1. 添加依赖

2. 导入包

3. 使用tinycolor2处理颜色

注意

从Flutter的 `Color` 创建

从 `HSLColor` 创建

从 `HSVColor` 创建

`.toColor()`

`.toHSLColor()`

`.toHSVColor()`

`.isLight()`

`.isDark()`

`.getBrightness()`

`.getLuminance()`

`.clone()`

`==`

`.setAlpha()`

`.setOpacity()`

`.lighten()`

`.brighten()`

`.darken()`

`.tint()`

`.shade()`

`.desaturate()`

`.saturate()`

`.greyscale()`

`.spin()`

`.complement()`

`.mix()`

`Color` 扩展