Flutter主题代码生成插件theme_code_gen的使用

Flutter主题代码生成插件theme_code_gen的使用

特性

使用熟悉的flutter pub run build_runner build命令和注解，您可以生成自己的代码以创建适当的ThemeExtension。

入门指南

在您的pubspec.yaml文件中添加以下包：

• build_runner
• theme_code_gen

创建一个类，包含自定义的颜色或文本样式（所有字段应为“静态”），并使用相应的注解标记该类（对于颜色 - @color_annotation，对于文本 - @text_annotation）。

不要忘记添加以下行：

part '-your file name-.g.dart';

运行以下命令：

flutter pub run build_runner build

您将获得已准备好的生成文件。生成文件后，必须移除所有依赖项（theme_code_gen）。每种颜色必须有“Dark”和“Light”的实现。确保在每个颜色名称的末尾使用“Light”或“Dark”。

使用示例

// 导入必要的包
import 'package:flutter/material.dart';

// 定义一个用于文本样式的类，并用 @text_annotation 注解标记
@text_annotation
class ConstantText {
  // 静态文本样式
  static TextStyle text1 = const TextStyle(fontSize: 33);
  static TextStyle text2 = const TextStyle(fontSize: 23);
}

// 定义一个用于颜色的类，并用 @color_annotation 注解标记
@color_annotation
class ConstantColor {
  // 静态颜色常量
  static const bgLight = Color(0xFF489D91); // Light 版本
  static const bgDark = Color(0xFF489D91);  // Dark 版本
}

生成文件示例

在执行flutter pub run build_runner build之后，会生成一个对应的.g.dart文件，例如constant_color.g.dart。此文件包含了生成的ThemeExtension代码。

// constant_color.g.dart

import 'constant_color.dart';

class GeneratedThemeLight extends ThemeExtension<GeneratedThemeLight> {
  final TextStyle text1 = ConstantText.text1;
  final TextStyle text2 = ConstantText.text2;
  final Color bgLight = ConstantColor.bgLight;

  [@override](/user/override)
  ThemeExtension<GeneratedThemeLight> copyWith() {
    return GeneratedThemeLight()
      ..text1 = text1
      ..text2 = text2
      ..bgLight = bgLight;
  }

  [@override](/user/override)
  ThemeExtension<GeneratedThemeLight> lerp(
      ThemeExtension<GeneratedThemeLight>? other, double t) {
    if (other is! GeneratedThemeLight) {
      return this;
    }
    return GeneratedThemeLight()
      ..text1 = TextStyle.lerp(text1, other.text1, t)
      ..text2 = TextStyle.lerp(text2, other.text2, t)
      ..bgLight = Color.lerp(bgLight, other.bgLight, t);
  }
}

class GeneratedThemeDark extends ThemeExtension<GeneratedThemeDark> {
  final TextStyle text1 = ConstantText.text1;
  final TextStyle text2 = ConstantText.text2;
  final Color bgDark = ConstantColor.bgDark;

  [@override](/user/override)
  ThemeExtension<GeneratedThemeDark> copyWith() {
    return GeneratedThemeDark()
      ..text1 = text1
      ..text2 = text2
      ..bgDark = bgDark;
  }

  [@override](/user/override)
  ThemeExtension<GeneratedThemeDark> lerp(
      ThemeExtension<GeneratedThemeDark>? other, double t) {
    if (other is! GeneratedThemeDark) {
      return this;
    }
    return GeneratedThemeDark()
      ..text1 = TextStyle.lerp(text1, other.text1, t)
      ..text2 = TextStyle.lerp(text2, other.text2, t)
      ..bgDark = Color.lerp(bgDark, other.bgDark, t);
  }
}