Flutter材质色彩工具插件material_color_utilities的使用
Flutter材质色彩工具插件material_color_utilities的使用
material_color_utilities
material_color_utilities
包含了实现Material Design 3颜色系统的算法和工具,包括从图片中选择主题颜色和创建颜色色调;这一切都在一个新的颜色空间中进行。
这是一个低级别的包。对于希望在其应用程序中采用Material 3特性(如动态颜色和颜色协调)的开发者,请参阅 dynamic_color 包。
Getting started
要开始使用 material_color_utilities
,您需要在项目的 pubspec.yaml
文件中添加依赖:
dependencies:
material_color_utilities: ^1.0.4 # 请根据实际情况调整版本号
然后执行命令来获取依赖:
flutter pub get
Usage
在 Dart 文件中导入 material_color_utilities
包:
import 'package:material_color_utilities/material_color_utilities.dart';
下面是一个简单的示例,演示如何使用HCT (Hue-Chroma-Tone) 模型:
import 'package:flutter/material.dart';
import 'package:material_color_utilities/material_color_utilities.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// Simple demonstration of HCT.
final color = Hct.fromInt(0xFF4285F4);
print('Hue: ${color.hue}');
print('Chroma: ${color.chroma}');
print('Tone: ${color.tone}');
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text("Material Color Utilities Demo"),
),
body: Center(
child: Container(
width: 100,
height: 100,
color: Color(color.toInt()),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text('Hue: ${color.hue.toStringAsFixed(2)}'),
Text('Chroma: ${color.chroma.toStringAsFixed(2)}'),
Text('Tone: ${color.tone.toStringAsFixed(2)}'),
],
),
),
),
),
);
}
}
此代码将在Flutter应用中显示一个带有HCT信息的彩色方块。您可以根据自己的需求修改颜色值或进一步探索其他功能。
有关更多信息,请参阅 README。
Contributing
该仓库不接受外部贡献,但欢迎在 GitHub 上提交功能请求和错误报告。
Publishing
发布规则:
- 必须是 material.io 的成员
- 版本编号遵循 语义化版本控制
- 确保
material_color_utilities.dart
导出了所有必需的库
发布步骤:
- 更新
CHANGELOG.md
中的版本和更改内容。 - 更新
pubspec.yaml
中的版本号。 - 使用
dart pub publish
或flutter pub publish
发布。
更多关于Flutter材质色彩工具插件material_color_utilities的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
更多关于Flutter材质色彩工具插件material_color_utilities的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然,以下是如何在Flutter项目中使用material_color_utilities
插件的一个代码示例。这个插件可以帮助你生成和处理基于Material Design的色彩方案。
首先,确保你已经在pubspec.yaml
文件中添加了material_color_utilities
依赖:
dependencies:
flutter:
sdk: flutter
material_color_utilities: ^x.y.z # 请替换为最新版本号
然后,运行flutter pub get
来安装依赖。
接下来,我们来看一个如何在Flutter应用中使用material_color_utilities
的示例。
import 'package:flutter/material.dart';
import 'package:material_color_utilities/material_color_utilities.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Material Color Utilities Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
Color primaryColor = Colors.blue[500]!;
// 使用MaterialColorUtilities生成色彩方案
List<int> primaryPalette = generateMaterialColor(primaryColor).colors!;
List<int> accentPalette = generateAccentColor(primaryColor).colors!;
return Scaffold(
appBar: AppBar(
title: Text('Material Color Utilities Demo'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
// 显示主色调的不同阴影
for (int color in primaryPalette)
Container(
margin: EdgeInsets.symmetric(vertical: 10),
height: 50,
color: Color(color),
child: Center(child: Text('Primary: ${color.toRadixString(16)}')),
),
// 显示辅助色调的不同阴影
for (int color in accentPalette)
Container(
margin: EdgeInsets.symmetric(vertical: 10),
height: 50,
color: Color(color),
child: Center(child: Text('Accent: ${color.toRadixString(16)}')),
),
],
),
),
);
}
}
// 以下是生成MaterialColor和AccentColor的辅助函数,
// 这些函数在material_color_utilities插件中可能已经有实现,但这里为了说明原理而展示
MaterialColor generateMaterialColor(Color color) {
List<int> shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
Map<int, Color> colorMap = {};
for (int shade in shades) {
colorMap[shade] = calculateLuminanceAdjustedColor(color, shade / 1000.0);
}
return MaterialColor(color.value, colorMap);
}
AccentColor generateAccentColor(Color color) {
List<int> shades = [100, 200, 400, 700];
Map<int, Color> colorMap = {};
for (int shade in shades) {
colorMap[shade] = calculateLuminanceAdjustedColor(color, shade / 1000.0, isAccent: true);
}
return AccentColor(color.value, colorMap);
}
// 简单的亮度调整算法(这里仅为示例,实际插件可能有更复杂的实现)
Color calculateLuminanceAdjustedColor(Color color, double percent, {bool isAccent = false}) {
final double luminance = isAccent ? 0.5 : 0.35; // 示例值,实际插件可能有不同逻辑
final double targetLuminance = color.computeLuminance() + percent * (luminance - color.computeLuminance());
final HSLColor hslColor = HSLColor.fromColor(color);
return hslColor.withLightness(targetLuminance).toColor();
}
// 注意:上面的calculateLuminanceAdjustedColor函数使用了HSLColor,
// 你可能需要引入一个支持HSLColor的库,比如color包:
// dependencies:
// color: ^x.y.z # 请替换为最新版本号
注意:
material_color_utilities
插件可能已经有内置的函数来生成MaterialColor
和AccentColor
,所以你可能不需要自己实现generateMaterialColor
和generateAccentColor
函数。上面的示例主要是为了展示如何使用这些函数,并解释其背后的逻辑。- 在实际项目中,请确保使用插件提供的API,而不是自己实现的版本,以获得最佳效果和兼容性。
- 上面的
calculateLuminanceAdjustedColor
函数使用了HSLColor
,你需要引入一个支持HSLColor的库,比如color
包。
希望这能帮助你理解如何在Flutter项目中使用material_color_utilities
插件!