Flutter颜色生成插件material_color_generator的使用

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

Flutter颜色生成插件 material_color_generator 的使用

material_color_generator 是一个非常实用的Flutter插件,它允许你通过提供任意的HEX颜色值来生成Material Design的颜色调色板。这个插件使用起来非常简单直接。

如何使用?

步骤一:添加依赖

首先,在你的 pubspec.yaml 文件中添加 material_color_generator 作为依赖:

dependencies:
  flutter:
    sdk: flutter
  material_color_generator: ^1.0.0 # 确保版本号是最新的

然后运行 flutter pub get 来安装该插件。

步骤二:修改 main.dart

接下来,打开项目的 main.dart 文件,并找到 MaterialApp 小部件。选择任何你喜欢的HEX颜色值,并使用 generateMaterialColor() 方法来生成Material颜色。以下是示例代码:

import 'package:flutter/material.dart';
import 'package:material_color_generator/material_color_generator.dart';

void main() {
  runApp(MaterialColorGeneratorExample());
}

class MaterialColorGeneratorExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: "Flutter Example App",
      theme: ThemeData(
        // Generate the material color and make the app theme.
        primarySwatch: generateMaterialColor(color: Color(0xFFd826fd)),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text("Material Color Generator Demo"),
        ),
        body: Center(
          child: Text(
            "This is an example of using material_color_generator.",
            style: TextStyle(fontSize: 20),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

示例解释

在上面的示例中,我们选择了颜色 #d826fd 并通过 generateMaterialColor() 函数将其转换为Material颜色。这样,整个应用的主题颜色将会基于这个自定义的颜色进行调整。

更多用途

你可以将此插件用于创建一致且美观的应用主题,不仅限于主色调,还可以应用于其他UI组件的颜色设置。例如,你可以为按钮、文本或背景设置不同的颜色,以增强用户体验。

通过这种方式,你可以轻松地根据个人喜好定制应用的外观和感觉,同时确保遵循Material Design的设计规范。


更多关于Flutter颜色生成插件material_color_generator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter颜色生成插件material_color_generator的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,下面是一个关于如何使用 material_color_generator 插件在 Flutter 中生成颜色的代码示例。material_color_generator 是一个用于从基本颜色生成 Material Design 颜色调色板的 Flutter 插件。

首先,确保在你的 pubspec.yaml 文件中添加依赖项:

dependencies:
  flutter:
    sdk: flutter
  material_color_generator: ^0.1.4  # 请检查最新版本号

然后运行 flutter pub get 来获取依赖项。

接下来,在你的 Dart 文件中使用 material_color_generator 来生成颜色。以下是一个完整的示例:

import 'package:flutter/material.dart';
import 'package:material_color_generator/material_color_generator.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material Color Generator Demo',
      theme: ThemeData(
        primarySwatch: generateMaterialColor(Color(0xFF2196F3)).shade500, // 使用生成的颜色
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 定义一个基本颜色
    Color baseColor = Color(0xFF2196F3);

    // 使用 material_color_generator 生成颜色调色板
    MaterialColor materialColor = generateMaterialColor(baseColor);

    return Scaffold(
      appBar: AppBar(
        title: Text('Material Color Generator Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            // 显示基本颜色
            Container(
              margin: EdgeInsets.all(16.0),
              decoration: BoxDecoration(
                color: baseColor,
                borderRadius: BorderRadius.circular(10.0),
              ),
              width: 100,
              height: 100,
              child: Center(
                child: Text(
                  'Base Color',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            // 显示生成的500色调
            Container(
              margin: EdgeInsets.all(16.0),
              decoration: BoxDecoration(
                color: materialColor.shade500,
                borderRadius: BorderRadius.circular(10.0),
              ),
              width: 100,
              height: 100,
              child: Center(
                child: Text(
                  'Shade 500',
                  style: TextStyle(color: Colors.white),
                ),
              ),
            ),
            // 显示生成的100色调
            Container(
              margin: EdgeInsets.all(16.0),
              decoration: BoxDecoration(
                color: materialColor.shade100,
                borderRadius: BorderRadius.circular(10.0),
              ),
              width: 100,
              height: 100,
              child: Center(
                child: Text(
                  'Shade 100',
                  style: TextStyle(color: Colors.black),
                ),
              ),
            ),
            // 你可以继续添加其他色调的显示
          ],
        ),
      ),
    );
  }
}

// material_color_generator 插件中定义的函数,用于生成 MaterialColor
MaterialColor generateMaterialColor(Color color) {
  const int _kShades = 5;
  final List<double> _kLightnessFractions = List<double>.filled(_kShades, 0.0);

  // 预设的亮度分数,用于生成不同的色调
  _kLightnessFractions[0] = 0.0;
  _kLightnessFractions[_kShades - 1] = 0.15;

  final double mid1 = _kLightnessFractions[0] + (_kLightnessFractions[_kShades - 1] - _kLightnessFractions[0]) * 0.333;
  final double mid2 = _kLightnessFractions[0] + (_kLightnessFractions[_kShades - 1] - _kLightnessFractions[0]) * 0.666;

  if (_kShades > 2) {
    _kLightnessFractions[1] = mid1 - 0.05;
    _kLightnessFractions[2] = mid1;
    _kLightnessFractions[_kShades - 2] = mid2;
    _kLightnessFractions[_kShades - 3] = mid2 + 0.09;
  } else {
    _kLightnessFractions[1] = mid1;
  }

  List<Color> shades = List<Color>.filled(_kShades, color);
  for (int i = 0; i < _kShades; i++) {
    shades[i] = _calculateLuminanceAdjustedColor(color, _kLightnessFractions[i]);
  }

  return MaterialColor(color.value, shades);
}

// 辅助函数,用于调整颜色的亮度
Color _calculateLuminanceAdjustedColor(Color color, double fraction) {
  final double r = color.red;
  final double g = color.green;
  final double b = color.blue;

  final double p = 0.3 * r + 0.59 * g + 0.11 * b;
  final double l = (p > 0.058823529411764705)
      ? p * (1 + 0.05 / (1 - fraction)) ** (1 / 0.4) - 0.05 * (1 / (1 - fraction))
      : p * (1 + fraction / 0.1292) ** 2.4;

  final double r1 = _clamp(255 * (l <= 0.03928 ? l / 12.923 : ((l + 0.055) / 1.055) ** 2.4));
  final double g1 = _clamp(255 * (l <= 0.03928 ? l / 12.923 : ((l + 0.055) / 1.055) ** 2.4));
  final double b1 = _clamp(255 * (l <= 0.03928 ? l / 12.923 : ((l + 0.055) / 1.055) ** 2.4));

  return Color.fromARGB(color.alpha, r1.toInt(), g1.toInt(), b1.toInt());
}

// 辅助函数,用于将值限制在0到255之间
int _clamp(double value) => value.clamp(0, 255).toInt();

注意

  1. generateMaterialColor 函数和 _calculateLuminanceAdjustedColor_clamp 辅助函数是模拟 material_color_generator 插件内部可能的工作方式。实际上,这些函数已经在插件中实现,通常不需要你自己重写。
  2. 上述代码示例是为了说明如何生成和使用颜色,但在实际项目中,你应该直接使用插件提供的函数。

在实际项目中,你可以直接调用插件提供的函数来生成颜色,而不需要手动实现这些逻辑。例如:

import 'package:material_color_generator/material_color_generator.dart' as MCG;

// 使用插件提供的函数生成颜色
MaterialColor materialColor = MCG.MaterialColorGenerator.fromColor(Color(0xFF2196F3)).generate();

请查阅最新的 material_color_generator 文档以获取最准确的使用方法。

回到顶部