Flutter颜色生成插件generate_color_palette的使用
Flutter颜色生成插件generate_color_palette的使用
Generate Color Palette 是一个简单的 Flutter 包,旨在帮助你根据主色调生成颜色调色板。该插件可以生成互补色、类似色、单色调以及随机颜色调色板,是一个非常实用的开发工具。
特性
- 互补色: 为给定的主要颜色生成互补色。
- 类似色: 创建与主要颜色相似的颜色调色板。
- 单色调: 生成主色调不同透明度的阴影。
- 随机调色板: 生成随机颜色的调色板。
安装
在你的 pubspec.yaml
文件中添加以下依赖:
dependencies:
generate_color_palette: ^1.0.0
然后运行 flutter pub get
来安装依赖。
使用示例
以下是如何使用 generate_color_palette
插件的示例代码:
import 'package:generate_color_palette/generate_color_palette.dart';
import 'package:flutter/material.dart';
void main() {
// 初始化主色调
final primaryColor = Colors.blue;
final paletteGenerator = ColorPaletteGenerator(primaryColor);
// 获取不同的颜色调色板
final complementaryColor = paletteGenerator.getComplementaryColor();
final analogColors = paletteGenerator.getAnalogColors();
final monochromaticColors = paletteGenerator.getMonochromaticColors();
final randomPalette = paletteGenerator.getRandomPalette(5);
// 运行应用
runApp(MyApp(
complementaryColor: complementaryColor,
analogColors: analogColors,
monochromaticColors: monochromaticColors,
randomPalette: randomPalette,
));
}
// 主应用界面
class MyApp extends StatelessWidget {
final Color complementaryColor;
final List<Color> analogColors;
final List<Color> monochromaticColors;
final List<Color> randomPalette;
MyApp({
required this.complementaryColor,
required this.analogColors,
required this.monochromaticColors,
required this.randomPalette,
});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: Text('Generate Color Palette Demo')),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 显示互补色
Text('Complementary Color:', style: TextStyle(fontSize: 18)),
Container(height: 50, color: complementaryColor),
// 显示类似色
Text('Analog Colors:', style: TextStyle(fontSize: 18)),
Row(
children: analogColors.map((color) => Expanded(child: Container(height: 50, color: color))).toList(),
),
// 显示单色调
Text('Monochromatic Colors:', style: TextStyle(fontSize: 18)),
Row(
children: monochromaticColors.map((color) => Expanded(child: Container(height: 50, color: color))).toList(),
),
// 显示随机调色板
Text('Random Palette:', style: TextStyle(fontSize: 18)),
Row(
children: randomPalette.map((color) => Expanded(child: Container(height: 50, color: color))).toList(),
),
],
),
),
);
}
}
示例代码
以下是完整的示例代码,展示了如何生成并展示各种颜色调色板:
import 'package:flutter/material.dart';
import 'package:generate_color_palette/generate_color_palette.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
final Color primaryColor = Colors.pink;
const MyApp({
super.key,
});
[@override](/user/override)
Widget build(BuildContext context) {
// 初始化颜色调色板生成器
final paletteGenerator = ColorPaletteGenerator(primaryColor);
// 生成不同类型的调色板
final complementaryColor = paletteGenerator.getComplementaryColor();
final analogColors = paletteGenerator.getAnalogColors();
final monochromaticColors = paletteGenerator.getMonochromaticColors();
final saturationPalette = paletteGenerator.generateSaturationPalette();
final huePalette = paletteGenerator.generateHuePalette();
final lightnessPalette = paletteGenerator.generateLightnessPalette();
// final randomPalette = paletteGenerator.getRandomPalette(5); // 如果需要可以取消注释
return MaterialApp(
home: Scaffold(
appBar: AppBar(title: const Text('Color Palette Generator')),
body: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 显示主色调及其十六进制值
Text('Primary Color: ${colorToHex(primaryColor)}', style: const TextStyle(fontSize: 18)),
Container(height: 50, color: primaryColor),
const SizedBox(height: 20),
// 显示互补色及其十六进制值
Text('Complementary Color: ${colorToHex(complementaryColor)}', style: const TextStyle(fontSize: 18)),
Container(height: 50, color: complementaryColor),
const SizedBox(height: 20),
// 显示类似色及其十六进制值
const Text('Analog Colors:', style: TextStyle(fontSize: 18)),
Row(
children: analogColors
.map((color) => Expanded(child: Container(height: 50, color: color, child: Text(colorToHex(color)))))
.toList(),
),
const SizedBox(height: 20),
// 显示单色调及其十六进制值
const Text('Monochromatic Colors:', style: TextStyle(fontSize: 18)),
Row(
children: monochromaticColors
.map((color) => Expanded(child: Container(height: 50, color: color, child: Text(colorToHex(color)))))
.toList(),
),
const SizedBox(height: 20),
// 显示饱和度调色板及其十六进制值
const Text('Saturation Palette:', style: TextStyle(fontSize: 18)),
Row(
children: saturationPalette
.map((color) => Expanded(child: Container(height: 50, color: color, child: Text(colorToHex(color)))))
.toList(),
),
const SizedBox(height: 20),
// 显示色相调色板及其十六进制值
const Text('Hue Palette:', style: TextStyle(fontSize: 18)),
Row(
children: huePalette
.map((color) => Expanded(child: Container(height: 50, color: color, child: Text(colorToHex(color)))))
.toList(),
),
const SizedBox(height: 20),
// 显示亮度调色板及其十六进制值
const Text('Lightness Palette:', style: TextStyle(fontSize: 18)),
Row(
children: lightnessPalette
.map((color) => Expanded(child: Container(height: 50, color: color, child: Text(colorToHex(color)))))
.toList(),
),
/*
Uncomment if you want to display the random palette
const Text('Random Palette:', style: TextStyle(fontSize: 18)),
Row(
children: randomPalette
.map((color) => Expanded(child: Container(height: 50, color: color, child: Text(colorToHex(color)))))
.toList(),
),
*/
],
),
),
);
}
// 将颜色对象转换为十六进制字符串(例如:#FF5733)
String colorToHex(Color color) {
return '#${color.value.toRadixString(16).substring(2).toUpperCase()}';
}
}
更多关于Flutter颜色生成插件generate_color_palette的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
generate_color_palette
是一个 Flutter 插件,用于生成颜色调色板。它可以帮助你根据一个基础颜色生成一系列相关的颜色,这在设计应用主题、按钮、背景等时非常有用。
安装插件
首先,你需要在 pubspec.yaml
文件中添加 generate_color_palette
插件的依赖:
dependencies:
flutter:
sdk: flutter
generate_color_palette: ^1.0.0 # 请检查最新版本
然后运行 flutter pub get
来安装依赖。
使用插件
安装完成后,你可以在你的 Flutter 项目中导入并使用 generate_color_palette
插件。
1. 导入插件
import 'package:generate_color_palette/generate_color_palette.dart';
2. 生成颜色调色板
你可以使用 generateColorPalette
函数来生成颜色调色板。这个函数接受一个基础颜色,并返回一个包含多个相关颜色的列表。
void main() {
// 基础颜色
Color baseColor = Colors.blue;
// 生成调色板
List<Color> palette = generateColorPalette(baseColor);
// 打印生成的调色板
for (var color in palette) {
print(color);
}
}
3. 使用生成的调色板
生成的调色板可以用于你的 Flutter 应用中。例如,你可以将这些颜色应用到按钮、背景、文本等。
class MyApp extends StatelessWidget {
[@override](/user/override)
Widget build(BuildContext context) {
Color baseColor = Colors.blue;
List<Color> palette = generateColorPalette(baseColor);
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Color Palette Example'),
backgroundColor: palette[0], // 使用生成的第一个颜色
),
body: Center(
child: Container(
color: palette[1], // 使用生成的第二个颜色
padding: EdgeInsets.all(20),
child: Text(
'Hello, Flutter!',
style: TextStyle(
color: palette[2], // 使用生成的第三个颜色
fontSize: 24,
),
),
),
),
),
);
}
}