Flutter颜色处理插件colorz的使用
Flutter颜色处理插件colorz的使用
你是否正在使用 <code>Colors.green</code> 或者 <code>Colors.teal</code>？其实还有更多令人惊艳的颜色等待你去发现！
快来认识以下这些独特的颜色吧！
<code>Colorz.tardis</code><code>Colorz.trumpsLitteralColor</code><code>Colorz.highlighterGreenBanana</code>
还可以尝试这些有趣的颜色：
<code>Colorz.cookieMonster</code><code>Colorz.unoReverseCardYellow</code><code>Colorz.ravenclawBlue</code>
以及其他一些独特配色：
<code>Colorz.arabicaMint</code><code>Colorz.cactusGreen</code><code>Colorz.vampireDeath</code>
🎨 在 colornames.org 上，来自世界各地的人们一起为颜色命名。这个插件将其中最受欢迎的 9000 种颜色引入到你的 Flutter 应用中！这仅占所有 1670 万种 RGB 颜色的 0.0536%。
⚠️ 免责声明：
社区成员自行选择颜色名称，并且未经过审查。因此，某些颜色名称可能包含被认为冒犯、粗俗或不雅的词汇。
❤️ 想要贡献？
访问 colornames.org 并提供一些颜色名称或为颜色投票，以帮助改进此插件！如果你发现任何问题或有改进建议，请随时在 GitHub 仓库 创建一个新问题。
📦 包的更新：
有时我会重新生成 <code>Colorz</code> 并在 pub.dev 上发布一个主要版本升级（因为可能存在与旧版本的兼容性问题）。如果你想自己生成 <code>Colorz</code>，请进入 <kbd>colorz</kbd> 包的根目录并运行 <code>dart generator/generator.dart</code>。
🤔 为什么只使用前 9000 种颜色，而不是像 10000 这样的整数倍？
pub.dev 使用 dartdoc 时空间有限：
完整示例代码
以下是完整的示例代码，展示如何在 Flutter 中使用 <code>colorz</code> 插件：
// 导入必要的库
import 'package:colorz/colorz.dart'; // 引入 colorz 插件
import 'package:flutter/material.dart'; // 引入 Flutter 基础库
void main() => runApp(MyApp()); // 启动应用
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
// 定义一组颜色及其对应的名称
final colorz = {
'tardis': Colorz.tardis, // TARDIS 蓝
'driedToothpaste': Colorz.driedToothpaste, // 干牙膏白
'greenBanana': Colorz.greenBanana, // 绿香蕉绿
'cookieMonsterCottonCandy': Colorz.cookieMonsterCottonCandy, // 曲奇怪棉花糖粉
'unoReverseCardBlue': Colorz.unoReverseCardBlue, // Uno 反转卡蓝
'darkRavenclawBlue': Colorz.darkRavenclawBlue, // 深拉文克劳蓝
'arabicaMint': Colorz.arabicaMint, // 阿拉比卡薄荷绿
'pickleyCactus': Colorz.pickleyCactus, // 琥珀仙人掌橙
'margesHair': Colorz.margesHair, // 玛吉斯头发棕
};
// 返回 Material App
return MaterialApp(
home: Scaffold(
body: Column( // 使用列布局
crossAxisAlignment: CrossAxisAlignment.stretch, // 横向拉伸
children: [
// 遍历定义的颜色集合
for (final entry in colorz.entries)
Expanded( // 每个颜色占满一行
child: Container(
alignment: Alignment.center, // 居中对齐
color: entry.value, // 设置背景颜色
child: SelectableText(entry.key), // 显示颜色名称
),
)
],
),
),
);
}
}
更多关于Flutter颜色处理插件colorz的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter颜色处理插件colorz的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
colorz 是一个用于 Flutter 的颜色处理插件，它提供了一些方便的工具来处理和操作颜色。使用 colorz，你可以轻松地生成颜色、调整颜色的亮度、饱和度、对比度等，以及进行颜色之间的混合操作。
安装 colorz
首先，你需要在 pubspec.yaml 文件中添加 colorz 依赖：
dependencies:
flutter:
sdk: flutter
colorz: ^1.0.0 # 请检查最新版本
然后运行 flutter pub get 来安装依赖。
使用 colorz
1. 创建颜色
你可以使用 Colorz 类来创建颜色：
import 'package:colorz/colorz.dart';
void main() {
// 创建一个颜色
Colorz color = Colorz.fromHex('#FF5733');
print(color); // 输出: Color(0xFFFF5733)
}
2. 调整颜色
colorz 提供了多种方法来调整颜色：
- 亮度调整：
lighten和darken - 饱和度调整：
saturate和desaturate - 对比度调整：
contrast - 透明度调整：
withOpacity
void main() {
Colorz color = Colorz.fromHex('#FF5733');
// 亮度调整
Colorz lightenedColor = color.lighten(0.2); // 增加亮度
Colorz darkenedColor = color.darken(0.2); // 减少亮度
// 饱和度调整
Colorz saturatedColor = color.saturate(0.2); // 增加饱和度
Colorz desaturatedColor = color.desaturate(0.2); // 减少饱和度
// 对比度调整
Colorz contrastedColor = color.contrast(0.2); // 增加对比度
// 透明度调整
Colorz transparentColor = color.withOpacity(0.5); // 设置透明度为50%
}
3. 颜色混合
你可以使用 mix 方法来混合两种颜色：
void main() {
Colorz color1 = Colorz.fromHex('#FF5733');
Colorz color2 = Colorz.fromHex('#33FF57');
// 混合两种颜色
Colorz mixedColor = color1.mix(color2, 0.5); // 50% 混合
}
4. 颜色转换
colorz 还支持将颜色转换为不同的格式：
void main() {
Colorz color = Colorz.fromHex('#FF5733');
// 转换为 RGB 字符串
String rgbString = color.toRgbString(); // 输出: rgb(255, 87, 51)
// 转换为 HSL 字符串
String hslString = color.toHslString(); // 输出: hsl(14, 100%, 60%)
// 转换为 HSV 字符串
String hsvString = color.toHsvString(); // 输出: hsv(14, 80%, 100%)
}
5. 颜色比较
你可以使用 equals 方法来比较两种颜色是否相同：
void main() {
Colorz color1 = Colorz.fromHex('#FF5733');
Colorz color2 = Colorz.fromHex('#FF5733');
// 比较两种颜色
bool isEqual = color1.equals(color2); // 输出: true
}