Flutter应用颜色管理插件app_color的使用
Flutter应用颜色管理插件app_color的使用
app_color 是一个 Flutter 包，它扩展了 Color 类，可以用于创建、转换、比较颜色，并在用户界面中使用。此外，它还支持颜色编辑。
开始使用
在你的 Flutter 项目中添加依赖：
dependencies:
app_color: ^1.0.1
示例代码
示例1：颜色转换和验证
void main() {
// 使用十六进制字符串创建颜色
assert(AppColor.fromHex('000000') == Color(0xFF000000));
assert(AppColor.fromHex('#000000') == Color(0xFF000000));
assert(AppColor.fromHex('FFFFFFFF') == Color(0xFFFFFFFF));
assert(AppColor.fromHex('#B1000000') == Color(0xB1000000));
assert(AppColor.fromHex('#B1000000').asHex == '#B1000000');
// 使用 HSL 创建颜色
assert(AppColor.fromHsl(164, 100, 88) == Color(0xFFC2FFEF));
// 使用 XYZ 创建颜色
assert(AppColor.fromXYZ(0.1669, 0.2293, 0.0434) == Color(0xFF659027));
// 使用 CIELAB 创建颜色
assert(AppColor.fromCielab(36.80, 55.20, -95.61) == Color(0xFF4832F7));
}
示例2：调整颜色亮度
void main() {
// 将黑色变为白色，亮度增加100%
assert(Color(0xFF000000).lighter(100) == Color(0xFFFFFFFF));
assert(Color(0xFF000000).lx(100) == Color(0xFFFFFFFF));
// 另一个亮度增加的例子
assert(Color.fromARGB(255, 64, 64, 64).lighter(50) == Color.fromARGB(255, 192, 192, 192));
assert(Color.fromARGB(255, 64, 64, 64).lx(50) == Color.fromARGB(255, 192, 192, 192));
// 将白色变为灰色，亮度减少50%
assert(Color(0xFF000000).darker(50) == Color(0xFF808080));
assert(Color(0xFF000000).dx(50) == Color(0xFF808080));
// 另一个亮度减少的例子
assert(Color.fromARGB(255, 192, 192, 192).darker(25) == Color.fromARGB(255, 128, 128, 128));
assert(Color.fromARGB(255, 192, 192, 192).dx(25) == Color.fromARGB(255, 128, 128, 128));
}
颜色主题
import 'package:app_color/theme.dart';
import 'package:flutter/material.dart';
void main() {
ColorTheme.init(
// 颜色配置
background: const ColorThemeConfig(
light: ThemeColors(
primary: Colors.green,
),
dark: ThemeColors(
primary: Colors.red,
),
),
text: const ColorThemeConfig(
light: ThemeColors(
light: Colors.white,
dark: Colors.black,
),
dark: ThemeColors(
light: Colors.black,
dark: Colors.white,
),
),
colors: [
const ColorThemeData(
name: "xyz",
config: ColorThemeConfig(
light: ThemeColors(
primary: Colors.white24,
),
dark: ThemeColors(
primary: Colors.black26,
),
),
),
// 添加更多颜色主题作为自定义配置
],
// 渐变配置
backgroundGradient: GradientThemeConfig(
light: ThemeGradients(
primary: [
Colors.white,
Colors.grey.shade400,
],
),
dark: ThemeGradients(
primary: [
Colors.black,
Colors.grey.shade900,
],
),
),
gradients: [
GradientThemeData(
name: "xyz",
config: GradientThemeConfig(
light: ThemeGradients(
primary: [
Colors.orange.shade400,
Colors.red.shade400,
],
),
dark: ThemeGradients(
primary: [
Colors.orange.shade900,
Colors.red.shade900,
],
),
),
),
// 添加更多渐变主题作为自定义配置
],
);
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
themeMode: ThemeMode.light,
theme: ThemeData.light(),
darkTheme: ThemeData.dark(),
home: const Home(),
);
}
}
class Home extends StatelessWidget {
const Home({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
body: Column(
children: [
Expanded(
child: Container(
color: context.backgroundColor.primary,
width: double.infinity,
alignment: Alignment.center,
child: Container(
width: 200,
height: 200,
color: context.colorOf("xyz").primary,
alignment: Alignment.center,
child: Text(
"SOLID COLOR",
style: TextStyle(
color: context.dark,
),
),
),
),
),
Expanded(
child: Container(
width: double.infinity,
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: context.backgroundGradient.primary ?? [],
),
),
child: Container(
width: 200,
height: 200,
alignment: Alignment.center,
decoration: BoxDecoration(
gradient: LinearGradient(
colors: context.gradientOf("xyz").primary ?? [],
),
),
child: const Text(
"GRADIENT COLOR",
style: TextStyle(color: Colors.white),
),
),
),
),
],
),
);
}
}
颜色定制
import 'package:app_color/color.dart';
import 'package:flutter/material.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
backgroundColor: Colors.white,
body: Column(
children: [
Expanded(
child: Container(
color: Colors.white,
width: double.infinity,
child: Center(
child: SizedBox(
width: 200,
height: 200,
child: Container(
color: Colors.white.dx(10),
alignment: Alignment.center,
child: const Text("DARK 10%"),
),
),
),
),
),
Expanded(
child: Container(
color: Colors.black,
width: double.infinity,
child: Center(
child: SizedBox(
width: 200,
height: 200,
child: Container(
color: Colors.black.lx(10),
alignment: Alignment.center,
child: const Text(
"LIGHT 10%",
style: TextStyle(color: Colors.white),
),
),
),
),
),
),
Expanded(
child: Row(
children: [
Expanded(
child: Container(
color: Colors.green.shade400,
width: double.infinity,
child: Center(
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.green.shade400.themeA(10),
margin: const EdgeInsets.all(32),
alignment: Alignment.center,
child: Text(
"AUTO 10%\nDETECT ON COLOR \nBRIGHTNESS",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.green.shade400.themeB(75),
),
),
),
),
),
),
),
Expanded(
child: Container(
color: Colors.green.shade600,
width: double.infinity,
child: Center(
child: AspectRatio(
aspectRatio: 1,
child: Container(
color: Colors.green.shade600.themeA(10),
margin: const EdgeInsets.all(32),
alignment: Alignment.center,
child: Text(
"AUTO 10%\nDETECT ON COLOR \nBRIGHTNESS",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.green.shade600.themeB(75),
),
),
),
),
),
),
),
],
),
),
],
),
),
);
}
}
更多关于Flutter应用颜色管理插件app_color的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
