Flutter颜色管理插件eva_color的使用

Flutter颜色管理插件eva_color的使用

Pub Version GitHub

EVA COLOR 是一个为 Flutter 应用程序生成 EVA 设计系统配色方案的简单工具，它通过从 EVA 主题 JSON 文件中生成 Dart 文件来实现。

注意：Eva Design 是 Akveo LLC 的商标。

安装

  1. 在 pubspec.yaml 文件的 dev_dependencies 中添加以下依赖项：

    eva_color: ^2.0.0 # 支持 null 安全

  2. 运行命令以更新依赖项：

    $ flutter pub get

功能

生成器。此库可以轻松生成颜色常量。有一个命令可以从 Eva 主题 JSON 文件生成 Dart 文件。生成的 Dart 文件将导入用户纯 Color 类。

Dart 颜色方案生成器

  1. 准备文件 custom-theme.json，该文件从 Eva 颜色网站导出。默认位置在您的 Flutter 项目的根目录。
  2. 在命令行中运行 flutter pub run eva_color:generate。
  3. 默认输出文件将放置在 lib/eva_color.dart。参见下文选项以进行自定义。
  4. 示例命令：
    flutter pub run eva_color:generate -i assets/my-app-color.json -o lib/config/color.dart -c AppColor

生成器选项（命令行参数）

-i 或 --input : 定义输入文件，可以使用相对路径或绝对路径。默认为 ${PROJECT_DIR}/custom-theme.json
-o 或 --output : 定义输出文件，可以使用相对路径或绝对路径。默认为 ${PROJECT_DIR}/lib/eva_colors.dart
-c 或 --class : 定义生成的颜色方案类名。默认为 EvaColors

使用

以下是您如何在项目中使用颜色的方法。

  1. 假设输出文件位于 /lib/eva_colors.dart，并且类默认为 EvaColors。
  2. 示例输出。
    import 'dart:ui';

// [@autogenerate](/user/autogenerate) DO NOT EDIT!!!
class EvaColors {
  static const Color primary = Color(0xFF3366FF);
  static const Color primary100 = Color(0xFFD6E4FF);
  static const Color primary200 = Color(0xFFADC8FF);
  static const Color primary300 = Color(0xFF84A9FF);
  static const Color primary400 = Color(0xFF6690FF);
  static const Color primary500 = Color(0xFF3366FF);
  static const Color primary600 = Color(0xFF254EDB);
  static const Color primary700 = Color(0xFF1939B7);
  static const Color primary800 = Color(0xFF102693);
  static const Color primary900 = Color(0xFF091A7A);
   
  // 其他颜色调色板在这里
}
  3. 导入生成的文件到所需的页面。
    import 'eva_colors.dart'; // 或者使用绝对路径导入
  4. 使用颜色方案通过其名称 EvaColors.primary 来获取主要色调，或者更浅或更深的色调，如 EvaColors.primary100。
    Widget container = Container(
  color: EvaColors.primary,
);

提示

基本颜色

默认情况下，基本颜色不是由 Eva 颜色生成器生成的 JSON 文件提供的。因为这些颜色可能在大多数应用程序中都需要，所以此库会默认自动为基本颜色生成常量，使用来自官方 Sketch 文件的颜色方案。如果您想要自定义基本颜色，必须在输入文件中提供所有必需的调色板。缺少任何一个，生成器将抛出错误。

"color-basic-100": "#FFFFFF",
"color-basic-200": "#F7F9FC",
"color-basic-300": "#EDF1F7",
"color-basic-400": "#E4E9F2",
"color-basic-500": "#C5CEE0",
"color-basic-600": "#8F9BB3",
"color-basic-700": "#2E3A59",
"color-basic-800": "#222B45",
"color-basic-900": "#192038",
"color-basic-1000": "#151A30",
"color-basic-1100": "#101426",

颜色调色板

如果您想添加更多的 EVA 颜色调色板，只需在 custom-theme.json 文件中添加即可。例如，添加带有色调的强调颜色：

"color-accent-100": "#D6E4FF",
"color-accent-200": "#ADC8FF",
"color-accent-300": "#84A9FF",
"color-accent-400": "#6690FF",
"color-accent-500": "#3366FF",
"color-accent-600": "#254EDB",
"color-accent-700": "#1939B7",
"color-accent-800": "#102693",
"color-accent-900": "#091A7A",

示例代码

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

// 输出示例
class EvaColors {
  static const EvaColor primary = EvaColor(0xFF3366FF, {
    100: Color(0xFFD6E4FF),
    200: Color(0xFFADC8FF),
    300: Color(0xFF84A9FF),
    400: Color(0xFF6690FF),
    500: Color(0xFF3366FF),
    600: Color(0xFF254EDB),
    700: Color(0xFF1939B7),
    800: Color(0xFF102693),
    900: Color(0xFF091A7A),
  });
}

// 使用 Material Design
Widget container = Container(
  color: EvaColors.primary.shade200,
);

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

1 回复

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


当然，以下是如何在Flutter项目中使用eva_colors插件来进行颜色管理的代码示例。eva_colors插件通常用于管理Eva Design System中的颜色，这在开发使用Eva Design System的应用时非常有用。

首先，确保你已经在pubspec.yaml文件中添加了eva_colors依赖：

dependencies:
  flutter:
    sdk: flutter
  eva_icons_flutter: ^3.0.0 # 假设你也使用Eva Icons
  eva_colors: ^2.0.0 # 确保使用最新版本

然后，运行flutter pub get来安装依赖。

接下来，你可以在你的Flutter应用中使用这些颜色。以下是一个简单的示例，展示如何导入并使用eva_colors中的颜色：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Eva Colors Demo',
      theme: ThemeData(
        // 使用Eva Colors中的颜色来设置主题
        primarySwatch: EvaColors.indigo,
        primaryColor: EvaColors.blue500,
        accentColor: EvaColors.pink400,
        scaffoldBackgroundColor: EvaColors.gray100,
        textTheme: TextTheme(
          headline1: TextStyle(color: EvaColors.dark),
          bodyText1: TextStyle(color: EvaColors.gray800),
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Eva Colors Usage'),
        backgroundColor: EvaColors.blue500, // 使用Eva Colors中的颜色
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Hello, Eva Colors!',
              style: TextStyle(color: EvaColors.white, fontSize: 24),
            ),
            SizedBox(height: 20),
            Container(
              width: 100,
              height: 100,
              color: EvaColors.green400, // 使用Eva Colors中的颜色
              child: Center(
                child: Text(
                  'Green Box',
                  style: TextStyle(color: EvaColors.white),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中，我们做了以下几件事：

  1. 导入eva_colors包。
  2. 在MaterialApp的theme属性中使用Eva Colors中的颜色来设置主题颜色。
  3. 在AppBar和Container中使用Eva Colors中的颜色。

这样，你就可以在你的Flutter应用中方便地使用Eva Design System中的颜色了。确保你查看eva_colors包的文档，以获取所有可用颜色的列表和更多使用示例。

回到顶部