Flutter色彩处理插件wide_color_tool的使用

Flutter色彩处理插件wide_color_tool的使用

wide_color_tool 是一个用于Flutter应用的全面颜色处理库，提供了在各种颜色空间中工作的广泛功能。

特性

• 支持多种颜色空间：RGB、HSV、HSL和CMYK
• 易于在不同颜色空间之间进行转换
• 颜色混合和融合
• 对比度计算和调整
• 亮度计算
• 不透明度和alpha通道操作
• 灵活的颜色创建方法

开始使用

首先，在你的 pubspec.yaml 文件中添加该插件：

dependencies:
  wide_color_tool: ^1.0.1

然后运行以下命令来获取依赖项：

flutter pub get

使用示例

创建颜色

你可以通过不同的颜色空间创建颜色：

final red = WideColor.fromRGB(255, 0, 0);

final green = WideColor.fromHSV(120, 1.0, 1.0);

final blue = WideColor.fromHSL(240, 1.0, 0.5);

final yellow = WideColor.fromCMYK(0.0, 1.0, 1.0, 0.0);

final magenta = WideColor.fromString("#FF00FF");

颜色空间转换

你可以将一种颜色从一个颜色空间转换到另一个颜色空间：

final purple = WideColor.fromRGB(128, 0, 128);

print(purple.hsv);  // HSVColor
print(purple.hsl);  // HSLColor
print(purple.cmyk);  // CMYKColor

颜色操作

你可以对颜色的各个组件进行调整：

final color = WideColor.fromRGB(100, 150, 200);

// 调整各个组件
final lighterColor = color.withValue(0.8);
final moreSaturated = color.withSaturationV(0.9);
final redder = color.withRed(220);

// 混合颜色
final mixedColor = color.mix(WideColor.fromRGB(200, 100, 50), otherInfluence: 0.3);

对比度和可访问性

你可以计算两个颜色之间的对比度，并确保达到最小对比度要求：

final backgroundColor = WideColor.fromRGB(240, 240, 240);
final textColor = WideColor.fromRGB(50, 50, 50);

// 计算对比度比率
final contrastRatio = backgroundColor.contrast(textColor);

// 确保最小对比度
final adjustedTextColor = backgroundColor.fixContrast(
  textColor,
  minContrast: 4.5,
  preference: ContrastPreference.dark,
);

完整示例代码

以下是一个完整的示例代码，展示了如何在Flutter应用中使用wide_color_tool插件：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'WideColor Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'WideColor Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  WideColor _color1 = WideColor.fromRGB(255, 0, 0);
  WideColor _color2 = WideColor.fromRGB(0, 0, 255);
  WideColor _mixedColor = WideColor.fromRGB(127, 0, 127);

  void _mixRgbColors() {
    setState(() {
      _mixedColor = _color1.mix(_color2, source: ColorSource.rgb);
    });
  }

  void _mixHsvColors() {
    setState(() {
      _mixedColor = _color1.mix(_color2, source: ColorSource.hsv);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 3,
      child: Scaffold(
        appBar: AppBar(
          title: Text(widget.title),
          bottom: TabBar(
            tabs: [
              Tab(text: 'Color Mix'),
              Tab(text: 'Conversions'),
              Tab(text: 'Contrast'),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            _buildColorMixTab(),
            _buildConversionsTab(),
            _buildContrastTab(),
          ],
        ),
      ),
    );
  }

  Widget _buildColorMixTab() {
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              _buildColorBox(_color1),
              _buildColorBox(_color2),
            ],
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _mixRgbColors,
            child: Text('Mix RGB Colors'),
          ),
          SizedBox(height: 20),
          ElevatedButton(
            onPressed: _mixHsvColors,
            child: Text('Mix HSV Colors'),
          ),
          SizedBox(height: 20),
          _buildColorBox(_mixedColor),
          Text(
            'Mixed Color: ${_mixedColor.string}',
            style: Theme.of(context).textTheme.bodyMedium,
          ),
        ],
      ),
    );
  }

  Widget _buildConversionsTab() {
    final cmyk = _color1.cmyk;
    final rgb = cmyk.toColor();
    print('${rgb.red}, ${rgb.green}, ${rgb.blue}');
    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          _buildColorBox(_color1),
          SizedBox(height: 20),
          Text('RGB: (${_color1.red}, ${_color1.green}, ${_color1.blue})'),
          Text(
              'HSV: (${_color1.hue}, ${_color1.saturationV.toStringAsFixed(2)}, ${_color1.value.toStringAsFixed(2)})'),
          Text(
              'HSL: (${_color1.hue}, ${_color1.saturationL.toStringAsFixed(2)}, ${_color1.light.toStringAsFixed(2)})'),
          Text(
              'CMYK: (${_color1.cyan.toStringAsFixed(2)}, ${_color1.magenta.toStringAsFixed(2)}, ${_color1.yellow.toStringAsFixed(2)}, ${_color1.black.toStringAsFixed(2)})'),
        ],
      ),
    );
  }

  Widget _buildContrastTab() {
    WideColor backgroundColor = WideColor.fromRGB(240, 240, 240);
    WideColor textColor = WideColor.fromRGB(50, 50, 50);
    num contrast = backgroundColor.contrast(textColor);

    return Center(
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            children: [
              _buildColorBox(backgroundColor),
              _buildColorBox(textColor),
            ],
          ),
          SizedBox(height: 20),
          Text('Contrast Ratio: ${contrast.toStringAsFixed(2)}'),
          SizedBox(height: 20),
          Container(
            color: backgroundColor.color,
            padding: EdgeInsets.all(20),
            child: Text(
              'Sample Text',
              style: TextStyle(color: textColor.color, fontSize: 24),
            ),
          ),
        ],
      ),
    );
  }

  Widget _buildColorBox(WideColor color) {
    return Container(
      width: 100,
      height: 100,
      color: color.color,
    );
  }
}