Flutter颜色转换插件color_converter_my的使用

Flutter颜色转换插件color_converter_my的使用

简介

color_converter_my 是一个简单的库,用于在 RGB、HEX、HSL 和 CMYK 颜色格式之间进行转换。

特性

  • 在 RGB 和 HEX 之间转换。
  • 在 RGB 和 HSL 之间转换。
  • 在 RGB 和 CMYK 之间转换。
  • 在 HEX 和 RGB 之间转换。
  • 在 HSL 和 RGB 之间转换。
  • 在 CMYK 和 RGB 之间转换。

安装

要使用此包,在 pubspec.yaml 文件中添加 color_converter_my 作为依赖项:

dependencies:
  color_converter_my:
    git:
      url: https://github.com/your_username/color_converter_my.git

然后运行以下命令:

dart pub get

使用方法

RGB 转 HEX

import 'package:color_converter_my/color_converter_my.dart';

void main() {
  String hexColor = ColorConverterMy.rgbToHex(255, 99, 71); // 番茄色
  print(hexColor); // 输出: #FF6347
}

HEX 转 RGB

import 'package:color_converter_my/color_converter_my.dart';

void main() {
  List<int> rgbColor = ColorConverterMy.hexToRgb('#FF6347');
  print(rgbColor); // 输出: [255, 99, 71]
}

RGB 转 HSL

import 'package:color_converter_my/color_converter_my.dart';

void main() {
  List<double> hslColor = ColorConverterMy.rgbToHsl(255, 99, 71);
  print(hslColor); // 输出: [9.0, 100.0, 64.0] -> 番茄色的 HSL
}

HSL 转 RGB

import 'package:color_converter_my/color_converter_my.dart';

void main() {
  List<int> rgbColor = ColorConverterMy.hslToRgb(9, 100, 64);
  print(rgbColor); // 输出: [255, 99, 71] -> 番茄色的 RGB
}

RGB 转 CMYK

import 'package:color_converter_my/color_converter_my.dart';

void main() {
  List<double> cmykColor = ColorConverterMy.rgbToCmyk(255, 99, 71);
  print(cmykColor); // 输出: [0.0, 61.0, 72.0, 0.0] -> 番茄色的 CMYK
}

CMYK 转 RGB

import 'package:color_converter_my/color_converter_my.dart';

void main() {
  List<int> rgbColor = ColorConverterMy.cmykToRgb(0, 61, 72, 0);
  print(rgbColor); // 输出: [255, 99, 71] -> 番茄色的 RGB
}

错误处理

如果传递了一个无效的 HEX 颜色格式,库将抛出一个 FormatException。例如:

import 'package:color_converter_my/color_converter_my.dart';

void main() {
  try {
    List<int> rgbColor = ColorConverterMy.hexToRgb('#ZZZZZZ'); // 无效的 HEX
  } catch (e) {
    print(e); // 输出: FormatException: 无效的 HEX 颜色格式。
  }
}

示例代码

以下是完整的示例代码,展示了如何使用 color_converter_my 库进行各种颜色转换测试:

import 'package:color_converter_my/color_converter_my.dart';
import 'package:test/test.dart';

void main() {
  group('ColorConverterMy', () {
    test('RGB to HEX', () {
      expect(ColorConverterMy.rgbToHex(255, 99, 71), '#FF6347');
      expect(ColorConverterMy.rgbToHex(0, 0, 0), '#000000');
      expect(ColorConverterMy.rgbToHex(255, 255, 255), '#FFFFFF');
    });

    test('HEX to RGB', () {
      expect(ColorConverterMy.hexToRgb('#FF6347'), [255, 99, 71]);
      expect(ColorConverterMy.hexToRgb('#000000'), [0, 0, 0]);
      expect(ColorConverterMy.hexToRgb('#FFFFFF'), [255, 255, 255]);
    });

    test('Invalid HEX format throws FormatException', () {
      expect(() => ColorConverterMy.hexToRgb('#ZZZZZZ'), throwsFormatException);
      expect(() => ColorConverterMy.hexToRgb('123456'), throwsFormatException);
    });

    test('RGB to HSL', () {
      var hsl = ColorConverterMy.rgbToHsl(255, 99, 71);
      expect(hsl[0], closeTo(9.0, 0.1)); // 容忍度为 Hue
      expect(hsl[1], closeTo(100.0, 0.1)); // 容忍度为 Saturation
      expect(hsl[2], closeTo(64.0, 0.2)); // 增加 Lightness 的容忍度
    });

    test('HSL to RGB', () {
      var rgb = ColorConverterMy.hslToRgb(9, 100, 64);
      expect(rgb, [255, 99, 71]);
    });

    test('RGB to CMYK', () {
      var cmyk = ColorConverterMy.rgbToCmyk(255, 99, 71);
      expect(cmyk[0], closeTo(0.0, 0.1));
      expect(cmyk[1], closeTo(61.0, 0.1));
      expect(cmyk[2], closeTo(72.0, 0.1));
      expect(cmyk[3], closeTo(0.0, 0.1));
    });

    test('CMYK to RGB', () {
      var rgb = ColorConverterMy.cmykToRgb(0, 61, 72, 0);
      expect(rgb, [255, 99, 71]);
    });

    test('CMYK to RGB (Black only)', () {
      var rgb = ColorConverterMy.cmykToRgb(0, 0, 0, 100);
      expect(rgb, [0, 0, 0]);
    });
  });
}

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

1 回复

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


color_converter_my 是一个用于在 Flutter 中进行颜色转换的插件。它可以帮助你将颜色从一种格式转换为另一种格式,例如将十六进制颜色代码转换为 RGB 或 HSL 格式。

安装插件

首先,你需要在 pubspec.yaml 文件中添加 color_converter_my 插件的依赖:

dependencies:
  flutter:
    sdk: flutter
  color_converter_my: ^1.0.0  # 请检查最新版本

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

使用插件

1. 导入插件

在你的 Dart 文件中,首先需要导入 color_converter_my 插件:

import 'package:color_converter_my/color_converter_my.dart';

2. 颜色转换

color_converter_my 插件提供了多种颜色转换方法。以下是一些常见的用法示例:

十六进制转 RGB
String hexColor = "#FF5733";
ColorRGB rgbColor = ColorConverter.hexToRgb(hexColor);
print("Red: ${rgbColor.red}, Green: ${rgbColor.green}, Blue: ${rgbColor.blue}");
RGB 转十六进制
ColorRGB rgbColor = ColorRGB(red: 255, green: 87, blue: 51);
String hexColor = ColorConverter.rgbToHex(rgbColor);
print("Hex Color: $hexColor");
十六进制转 HSL
String hexColor = "#FF5733";
ColorHSL hslColor = ColorConverter.hexToHsl(hexColor);
print("Hue: ${hslColor.hue}, Saturation: ${hslColor.saturation}, Lightness: ${hslColor.lightness}");
HSL 转十六进制
ColorHSL hslColor = ColorHSL(hue: 14, saturation: 100, lightness: 60);
String hexColor = ColorConverter.hslToHex(hslColor);
print("Hex Color: $hexColor");

3. 使用转换后的颜色

你可以将转换后的颜色直接用于 Flutter 的 Color 类:

String hexColor = "#FF5733";
ColorRGB rgbColor = ColorConverter.hexToRgb(hexColor);
Color flutterColor = Color.fromRGBO(rgbColor.red, rgbColor.green, rgbColor.blue, 1.0);

// 使用 flutterColor 设置背景色
Container(
  color: flutterColor,
  child: Text('Hello, World!'),
);

示例代码

以下是一个完整的示例,展示如何使用 color_converter_my 插件进行颜色转换并在 Flutter 应用中使用:

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    String hexColor = "#FF5733";
    ColorRGB rgbColor = ColorConverter.hexToRgb(hexColor);
    Color flutterColor = Color.fromRGBO(rgbColor.red, rgbColor.green, rgbColor.blue, 1.0);

    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Color Converter Example'),
        ),
        body: Center(
          child: Container(
            color: flutterColor,
            padding: EdgeInsets.all(20),
            child: Text(
              'Hello, World!',
              style: TextStyle(color: Colors.white, fontSize: 24),
            ),
          ),
        ),
      ),
    );
  }
}
回到顶部