Flutter颜色管理插件neocolor的使用

Flutter颜色管理插件neocolor的使用

neocolor

neocolor 是一个在Dart中定义、操作、转换和比较颜色的库。

目的

提供平台无关（例如命令行、Flutter、Web）的类和约定，用于：

• 定义颜色（创建或解析流行格式）
• 操作颜色（改变亮度、色调、饱和度等元素）
• 转换颜色（从/到流行格式）
• 比较颜色（有时称为“距离”）

使用方法

如果你已经使用过Flutter的 Color 类，你会对 neocolor 感到熟悉：

import 'package:neocolor/neocolor.dart';

void main() {
  // 使用ARGB创建颜色
  const c1 = Color(0xFF42A5F5); // 创建颜色对象
  const c2 = Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5); // 从ARGB创建颜色对象
  print('$c1 == $c2: ${c1 == c2}'); // 打印两个颜色是否相等

  // 另一种方式创建颜色
  const c3 = Color.fromARGB(255, 66, 165, 245);
  const c4 = Color.fromRGBO(66, 165, 245, 1.0);
  print('$c3 == $c4: ${c3 == c4}');

  // 新增：使用HSB (有时称为HSV) 和 HSL创建颜色
  final c5 = Color.fromHSB(206.8, 0.7306, 0.9608); // 从HSB创建颜色对象
  final c6 = Color.fromHSL(206.8, 0.8990, 0.6100); // 从HSL创建颜色对象
  print('$c5 == $c6: ${c5 == c6}');
}

示例Demo

以下是一个完整的示例demo，展示了如何使用 neocolor 插件来创建和比较颜色：

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

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

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

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    // 创建不同格式的颜色对象
    const color1 = Color(0xFF42A5F5); // ARGB格式
    const color2 = Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5); // ARGB格式
    const color3 = Color.fromARGB(255, 66, 165, 245); // ARGB格式
    const color4 = Color.fromRGBO(66, 165, 245, 1.0); // RGBA格式
    final color5 = Color.fromHSB(206.8, 0.7306, 0.9608); // HSB格式
    final color6 = Color.fromHSL(206.8, 0.8990, 0.6100); // HSL格式

    return Scaffold(
      appBar: AppBar(
        title: Text('neocolor Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Container(
              width: 100,
              height: 100,
              color: Color(color1.value), // 使用neocolor创建的颜色
            ),
            SizedBox(height: 20),
            Text(
              'color1 == color2: ${color1 == color2}', // 比较颜色
              style: TextStyle(fontSize: 16),
            ),
            Text(
              'color3 == color4: ${color3 == color4}',
              style: TextStyle(fontSize: 16),
            ),
            Text(
              'color5 == color6: ${color5 == color6}',
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}