Flutter材质色彩工具插件material_color_utilities的使用

发布于 1周前 作者 wuwangju 来自 Flutter

Flutter材质色彩工具插件material_color_utilities的使用

material_color_utilities

pub package

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

发布规则:

发布步骤:

  1. 更新 CHANGELOG.md 中的版本和更改内容。
  2. 更新 pubspec.yaml 中的版本号。
  3. 使用 dart pub publishflutter pub publish 发布。

更多关于Flutter材质色彩工具插件material_color_utilities的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于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  # 请替换为最新版本号

注意

  1. material_color_utilities插件可能已经有内置的函数来生成MaterialColorAccentColor,所以你可能不需要自己实现generateMaterialColorgenerateAccentColor函数。上面的示例主要是为了展示如何使用这些函数,并解释其背后的逻辑。
  2. 在实际项目中,请确保使用插件提供的API,而不是自己实现的版本,以获得最佳效果和兼容性。
  3. 上面的calculateLuminanceAdjustedColor函数使用了HSLColor,你需要引入一个支持HSLColor的库,比如color包。

希望这能帮助你理解如何在Flutter项目中使用material_color_utilities插件!

回到顶部