Flutter颜色生成插件color_gen的使用

color_gen 插件用于生成 Flutter 应用中的颜色 (Color) 和颜色调色板 (ColorSwatch)。以下是该插件的详细使用说明。

功能特性

color_gen 包允许你生成自定义的颜色和颜色调色板，而不仅仅是使用 Flutter 内置的颜色类 Colors 和 MaterialSwatch。这可以极大地简化你的开发工作。

开始使用

安装插件

首先，在你的 pubspec.yaml 文件中添加 color_gen 插件：

dependencies:
  color_gen: ^x.y.z

然后运行以下命令安装插件：

flutter pub get

生成命令

生成颜色和颜色调色板的命令非常简单：

flutter pub run color_gen:generate

使用步骤

为了生成颜色和颜色调色板，你需要执行以下几个步骤：

1. 创建 color_gen.yaml 文件。在这个文件中，你可以存储所有的颜色和颜色调色板配置。
2. 配置 color_gen.yaml 文件以满足你的需求。
3. 运行命令 flutter pub run color_gen:generate。

配置文件

以下是一个 color_gen.yaml 文件的例子，展示了如何配置颜色和颜色调色板：

shaded_color:
  class_name: ExampleAppColor # 生成的颜色类名称，默认为 `AppColor`
  file_name: app_colors.dart # 生成的文件名，默认为 `colors.dart`
  location: lib/presentation/theme/color/ # 存储生成文件的文件夹，默认为 `lib/generate/color/`
  swatch_prefix: $ShadedSwatch # 生成的颜色调色板类名称，默认为 `$ShadedSwatch`
  colors:
    red: # 将生成一个名为 `red` 的颜色调色板，包含 `shade10` 和 `shade50`
      shade10:
        hex: 0xFF132112 # 十六进制颜色代码
        opacity: 1 # 添加 `.withOpacity(1)`
        primary: true # 将此颜色设置为主颜色，如果没有设置，则默认为第一个阴影
      shade50:
        rgb: 12, 12, 41 # 支持 RGB 颜色代码
        alpha: 244 # 添加 `.withAlpha(244)`
    blue: # 普通颜色 `blue`，不包含阴影
      hex: 0xFF132131
    primary: red # 名为 `primary` 的颜色引用到 `red`
    purple: 0xff123412 # 简短的颜色代码，目前只支持十六进制值
    pink: # 简短的颜色调色板
      shade20: 0xff124912
      shade10: 0xff123512

使用生成的颜色

生成的颜色可以在 Dart 代码中像这样使用：

import 'lib/presentation/theme/color/app_colors.dart';

final Color red = ExampleAppColor.red;
final Color redShade10 = ExampleAppColor.red.shade10;
final Color blue = ExampleAppColor.blue;
final Color primary = ExampleAppColor.primary; // 实际上指向 `red`
final Color pink = ExampleAppColor.pink.shade20;

其他信息

• 代码生成将实际使用阴影名称作为变量名和查询键。
• 具有相同调色板（相同的阴影数量和相同的变量名称）的颜色调色板将利用相同的生成调色板类。
• 参考示例以获取更多详细信息。

示例代码

以下是一个完整的示例代码，展示了如何在应用中使用生成的颜色：

import 'package:example/presentation/theme/color/app_colors.dart';
import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    ExampleAppColor.red.shade50;
    ExampleAppColor.red.shade10;
    ExampleAppColor.blue;
    ExampleAppColor.primary == ExampleAppColor.red;

    return Scaffold(
      appBar: AppBar(
        backgroundColor: ExampleAppColor.brown.shade50.withBlue(256),
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            const Text('You have pushed the button this many times:'),
            Text('$_counter', style: Theme.of(context).textTheme.headlineMedium),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _incrementCounter,
        tooltip: 'Increment',
        child: const Icon(Icons.add),
      ),
    );
  }
}