Flutter颜色调整插件color_adjust的使用
Flutter颜色调整插件color_adjust的使用
color_adjust
是一个扩展了 Flutter Color
类的方法集合,用于进行颜色调整。
使用
要使用这些方法,你需要导入 color_adjust
扩展,并在 Color
对象上应用这些方法。
示例:
import 'package:color_adjust/color_adjust.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) {
Color baseColor = Colors.blue;
Color mixColor = Colors.pink;
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: const Text("颜色调整示例"),
),
body: ListView(
children: <Widget>[
Container(color: baseColor, height: 50),
Container(color: baseColor.darken(0.2), height: 50),
Container(color: baseColor.lighten(0.2), height: 50),
Container(color: baseColor.invert(), height: 50),
Container(color: baseColor.compliment(), height: 50),
Container(color: baseColor.desaturate(0.2), height: 50),
Container(color: baseColor.saturate(0.2), height: 50),
Container(color: baseColor.mix(mixColor, 0.5), height: 50),
Container(color: baseColor.whiten(0.5), height: 50),
Container(color: baseColor.tone(0.5), height: 50),
Container(color: baseColor.blacken(0.5), height: 50),
],
),
),
);
}
}
方法
该扩展添加了以下方法:
darken([double amount = .5])
:通过提供的量(0-1)加深颜色,默认为50%。lighten([double amount = .5])
:通过提供的量(0-1)提亮颜色,默认为50%。invert()
:反转颜色,产生其“负片”。它不保留亮度。如果你想保留亮度,可以使用compliment
方法。compliment()
:获取颜色的补色(在色轮上的相反颜色)。这类似于反转,但保持相同的亮度值。desaturate([double amount = .5])
:通过提供的量(0-1)去饱和颜色,默认为50%。saturate([double amount = .5])
:通过提供的量(0-1)饱和颜色,默认为50%。mix(Color another, [double amount = 0.5])
:按提供的量(0-1)混合两个颜色,默认为50%。whiten([double amount = 0.5])
:通过提供的量(0-1)使颜色变白,默认为50%。tone([double amount = 0.5])
:通过提供的量(0-1)将颜色调暗,默认为50%。blacken([double amount = 0.5])
:通过提供的量(0-1)使颜色变黑,默认为50%。isDark
:使用亮度检查颜色是否被认为是深色。isBright
:检查颜色是否被认为是亮色。
示例代码
以下是完整的示例代码,展示了如何使用 color_adjust
插件进行颜色调整。
import 'package:color_adjust/color_adjust.dart';
import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';
void main() {
runApp(const MaterialApp(debugShowCheckedModeBanner: false, home: MyApp()));
}
class MyApp extends StatefulWidget {
const MyApp({Key? key}) : super(key: key);
[@override](/user/override)
MyAppState createState() => MyAppState();
}
class MyAppState extends State<MyApp> {
Color baseColor = Colors.blue;
Color mixColor = Colors.pink;
late Color tempColor;
TextStyle textLight = const TextStyle(color: Colors.white);
TextStyle textDark = const TextStyle(color: Colors.black);
void changeColor(Color color) {
setState(() {
tempColor = color;
});
}
[@override](/user/override)
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("颜色调整示例"),
),
body: Column(
children: [
Wrap(
runSpacing: 10,
spacing: 10,
runAlignment: WrapAlignment.center,
children: <Widget>[
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: baseColor),
child: Text(
'选择基础颜色',
style: baseColor.isBright ? textDark : textLight,
),
onPressed: () {
tempColor = baseColor;
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text('选择颜色'),
content: SingleChildScrollView(
child: ColorPicker(
pickerColor: tempColor,
onColorChanged: changeColor,
colorPickerWidth: 300.0,
pickerAreaHeightPercent: 0.7,
enableAlpha: true,
displayThumbColor: true,
paletteType: PaletteType.hsv,
pickerAreaBorderRadius: const BorderRadius.only(
topLeft: Radius.circular(2.0),
topRight: Radius.circular(2.0),
),
),
),
actions: <Widget>[
TextButton(
child: const Text('确定'),
onPressed: () {
setState(() {
baseColor = tempColor;
});
Navigator.of(context).pop();
},
),
],
);
},
);
},
),
ElevatedButton(
style: ElevatedButton.styleFrom(backgroundColor: mixColor),
child: Text(
'选择混合颜色',
style: mixColor.isBright ? textDark : textLight,
),
onPressed: () {
tempColor = mixColor;
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: const Text('选择颜色'),
content: SingleChildScrollView(
child: ColorPicker(
pickerColor: tempColor,
onColorChanged: changeColor,
colorPickerWidth: 300.0,
pickerAreaHeightPercent: 0.7,
enableAlpha: true,
displayThumbColor: true,
paletteType: PaletteType.hsv,
pickerAreaBorderRadius: const BorderRadius.only(
topLeft: Radius.circular(2.0),
topRight: Radius.circular(2.0),
),
),
),
actions: <Widget>[
TextButton(
child: const Text('确定'),
onPressed: () {
setState(() {
mixColor = tempColor;
});
Navigator.of(context).pop();
},
),
],
);
},
);
},
),
],
),
Expanded(
child: getList(),
),
],
),
);
}
Widget getList() {
return ListView(
children: <Widget>[
Builder(builder: (context) {
return Row(
children: [
Expanded(
child: Container(
color: baseColor.mix(mixColor, 0.5),
alignment: Alignment.center,
height: 50,
child: Text(
"混合默认",
style: baseColor.mix(mixColor, 0.5).isDark
? textLight
: textDark,
)),
),
Expanded(
child: Container(
color: baseColor.mix(mixColor, 0.25),
alignment: Alignment.center,
height: 50,
child: Text(
"混合25%",
style: baseColor.mix(mixColor, 0.25).isDark
? textLight
: textDark,
)),
),
Expanded(
child: Container(
color: baseColor.mix(mixColor, 0.75),
alignment: Alignment.center,
height: 50,
child: Text(
"混合75%",
style: baseColor.mix(mixColor, 0.75).isDark
? textLight
: textDark,
)),
),
],
);
}),
Builder(builder: (context) {
return Row(
children: [
Expanded(
child: Container(
color: baseColor.blend(mixColor),
alignment: Alignment.center,
height: 50,
child: Text(
"融合默认",
style: baseColor.blend(mixColor).isDark
? textLight
: textDark,
)),
),
Expanded(
child: Container(
color: baseColor.blend(mixColor, .25),
alignment: Alignment.center,
height: 50,
child: Text(
"融合25%",
style: baseColor.blend(mixColor, .25).isDark
? textLight
: textDark,
)),
),
Expanded(
child: Container(
color: baseColor.blend(mixColor, .75),
alignment: Alignment.center,
height: 50,
child: Text(
"融合75%",
style: baseColor.blend(mixColor, .75).isDark
? textLight
: textDark,
)),
),
],
);
}),
Builder(builder: (context) {
final Color darkened = baseColor.darken(0.2);
return Container(
color: darkened,
alignment: Alignment.center,
height: 50,
child: Text(
"加深",
style: darkened.isDark ? textLight : textDark,
));
}),
Builder(builder: (context) {
final Color lightened = baseColor.lighten(0.2);
return Container(
color: lightened,
alignment: Alignment.center,
height: 50,
child: Text(
"提亮",
style: lightened.isDark ? textLight : textDark,
));
}),
Builder(builder: (context) {
final Color inverted = baseColor.invert();
return Container(
color: inverted,
alignment: Alignment.center,
height: 50,
child: Text(
"反转",
style: inverted.isDark ? textLight : textDark,
));
}),
Builder(builder: (context) {
final Color desaturated = baseColor.desaturate(.5);
return Container(
color: desaturated,
alignment: Alignment.center,
height: 50,
child: Text(
"去饱和",
style: desaturated.isDark ? textLight : textDark,
));
}),
Builder(builder: (context) {
final Color saturated = baseColor.saturate(.5);
return Container(
color: saturated,
alignment: Alignment.center,
height: 50,
child: Text(
"饱和",
style: saturated.isDark ? textLight : textDark,
));
}),
Builder(builder: (context) {
final Color complimented = baseColor.compliment();
return Container(
color: complimented,
alignment: Alignment.center,
height: 50,
child: Text(
"补色",
style: complimented.isDark ? textLight : textDark,
));
}),
Builder(builder: (context) {
final Color whitened = baseColor.whiten(0.5);
return Container(
color: whitened,
alignment: Alignment.center,
height: 50,
child: Text(
"变白",
style: whitened.isDark ? textLight : textDark,
));
}),
Builder(builder: (context) {
final Color toned = baseColor.tone(0.5);
return Container(
color: toned,
alignment: Alignment.center,
height: 50,
child: Text(
"调暗",
style: toned.isDark ? textLight : textDark,
));
}),
Builder(builder: (context) {
final Color blackened = baseColor.blacken(0.5);
return Container(
color: blackened,
alignment: Alignment.center,
height: 50,
child: Text(
"变黑",
style: blackened.isDark ? textLight : textDark,
));
}),
],
);
}
}
更多关于Flutter颜色调整插件color_adjust的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter颜色调整插件color_adjust的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,关于Flutter中color_adjust
插件的使用,这里是一个简单的示例代码案例,展示了如何使用该插件来调整颜色。color_adjust
插件提供了一系列方法来调整颜色的亮度、对比度、饱和度等属性。
首先,确保你已经在pubspec.yaml
文件中添加了color_adjust
依赖:
dependencies:
flutter:
sdk: flutter
color_adjust: ^x.y.z # 请替换为最新版本号
然后,运行flutter pub get
来安装依赖。
接下来,在你的Dart文件中使用color_adjust
插件。以下是一个完整的示例:
import 'package:flutter/material.dart';
import 'package:color_adjust/color_adjust.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Color Adjust Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 原始颜色
ColorBox(color: Colors.blue),
// 调整亮度
ColorBox(
color: adjustColorBrightness(Colors.blue, 0.2),
title: 'Brightness +20%',
),
// 调整对比度
ColorBox(
color: adjustColorContrast(Colors.blue, 0.5),
title: 'Contrast +50%',
),
// 调整饱和度
ColorBox(
color: adjustColorSaturation(Colors.blue, 0.8),
title: 'Saturation +80%',
),
],
),
),
),
);
}
}
// 显示颜色的自定义Widget
class ColorBox extends StatelessWidget {
final Color color;
final String? title;
ColorBox({required this.color, this.title});
@override
Widget build(BuildContext context) {
return Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
if (title != null) Text(title!, style: TextStyle(fontSize: 16)),
Container(
width: 100,
height: 100,
color: color,
),
],
);
}
}
在这个示例中,我们创建了一个简单的Flutter应用,其中展示了原始颜色以及经过亮度、对比度和饱和度调整后的颜色。注意,adjustColorBrightness
、adjustColorContrast
和adjustColorSaturation
函数是假设的,因为color_adjust
插件的具体API可能会有所不同。你需要根据实际的插件文档来调整这些函数调用。
然而,color_adjust
插件可能提供的是类似ColorAdjust.brightness
、ColorAdjust.contrast
和ColorAdjust.saturation
这样的方法。以下是一个更贴近实际的假设示例:
import 'package:flutter/material.dart';
import 'package:color_adjust/color_adjust.dart' as colorAdjust;
// ... (其他代码保持不变)
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Color Adjust Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 原始颜色
ColorBox(color: Colors.blue),
// 调整亮度
ColorBox(
color: colorAdjust.adjustBrightness(Colors.blue, 0.2),
title: 'Brightness +20%',
),
// 调整对比度
ColorBox(
color: colorAdjust.adjustContrast(Colors.blue, 0.5),
title: 'Contrast +50%',
),
// 调整饱和度
ColorBox(
color: colorAdjust.adjustSaturation(Colors.blue, 0.8),
title: 'Saturation +80%',
),
],
),
),
),
);
}
}
请注意,上述代码中的colorAdjust.adjustBrightness
、colorAdjust.adjustContrast
和colorAdjust.adjustSaturation
函数是假设的,你需要查阅color_adjust
插件的实际文档来获取正确的API调用方式。通常,插件的README文件或官方文档会提供详细的用法说明和示例代码。