Flutter颜色处理插件hsluv的使用

HSLuv是一个基于Dart和Flutter的颜色处理库，它提供了一种更符合人类感知的颜色表示方法。与传统的HSL相比，HSLuv在改变亮度（Lightness）时，颜色的变化更加符合人眼的感知。

安装

首先，在你的pubspec.yaml文件中添加以下依赖：

dependencies:
  hsluv: ^最新版本号

例如：

dependencies:
  hsluv: ^2.0.0

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

使用示例

低级用法

你可以直接通过数值列表来操作颜色转换。下面的例子展示了如何将RGB颜色转换为HSLuv颜色，并输出其十六进制表示：

import 'package:hsluv/hsluv.dart';

void main() {
  // Low level usage.
  final List<double> hsluvLow = Hsluv.rgbToHsluv([0.2, 0.5, 0.7]);
  print(Hsluv.hsluvToHex(hsluvLow));
}

高级用法

HSLuvColor类提供了更高级、更易用的方法来处理颜色。它可以像Flutter内置的HSLColor一样使用：

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

void main() {
  // High level usage.
  final hsluvFromColor = HSLuvColor.fromColor(Colors.red);
  print(hsluvFromColor.toString());

  final hsluvFromHSL = HSLuvColor.fromHSL(300, 70, 60);
  print(hsluvFromHSL.toString());
}

完整Demo示例

以下是一个完整的Flutter应用示例，演示了如何使用hsluv插件来创建一个简单的颜色选择器界面：

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

void main() => runApp(MyApp());

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

class ColorPickerScreen extends StatefulWidget {
  [@override](/user/override)
  _ColorPickerScreenState createState() => _ColorPickerScreenState();
}

class _ColorPickerScreenState extends State<ColorPickerScreen> {
  double hue = 0;
  double saturation = 100;
  double lightness = 50;

  Color color = Colors.red;

  void updateColor() {
    final hsluv = [hue, saturation, lightness];
    final rgb = Hsluv.hsluvToRgb(hsluv);
    setState(() {
      color = Color.fromRGBO((rgb[0] * 255).round(), (rgb[1] * 255).round(), (rgb[2] * 255).round(), 1);
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('HSLuv Color Picker'),
      ),
      body: Column(
        children: <Widget>[
          Expanded(
            child: Container(
              color: color,
              child: Center(
                child: Text(
                  'Selected Color',
                  style: TextStyle(color: useWhiteForeground(color) ? Colors.white : Colors.black),
                ),
              ),
            ),
          ),
          Slider(
            value: hue,
            min: 0,
            max: 360,
            onChanged: (value) {
              hue = value;
              updateColor();
            },
          ),
          Slider(
            value: saturation,
            min: 0,
            max: 100,
            onChanged: (value) {
              saturation = value;
              updateColor();
            },
          ),
          Slider(
            value: lightness,
            min: 0,
            max: 100,
            onChanged: (value) {
              lightness = value;
              updateColor();
            },
          ),
        ],
      ),
    );
  }

  bool useWhiteForeground(Color color) {
    final dark = ThemeData.estimateBrightnessForColor(color) == Brightness.dark;
    return !dark;
  }
}