Flutter主题扩展注解插件theme_extensions_annotation的使用

Flutter主题扩展注解插件theme_extensions_annotation的使用

在Flutter开发中，管理主题是一个常见的需求。theme_extensions_annotation 是一个用于生成主题扩展类的注解库，配合 theme_extensions_generator 使用，可以方便地扩展主题并生成相应的代码。

安装依赖

首先，在你的 pubspec.yaml 文件中添加以下依赖：

dependencies:
  theme_extensions_annotation: ^1.0.0

dev_dependencies:
  build_runner: ^2.0.0
  theme_extensions_generator: ^1.0.0

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

创建主题扩展类

接下来，我们通过注解来定义主题扩展类。以下是一个完整的示例：

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

// 定义注解
part 'theme_extensions.g.dart'; // 自动生成的文件

// 使用 [@ThemeExtension](/user/ThemeExtension) 注解创建一个主题扩展类
[@ThemeExtension](/user/ThemeExtension)()
class CustomColors extends ThemeExtension<CustomColors> {
  final Color primary;
  final Color secondary;

  const CustomColors({required this.primary, required this.secondary});

  // 重写 lerp 方法以支持插值动画
  static CustomColors? lerp(CustomColors? a, CustomColors? b, double t) {
    return CustomColors(
      primary: Color.lerp(a?.primary, b?.primary, t)!,
      secondary: Color.lerp(a?.secondary, b?.secondary, t)!,
    );
  }
}

// 定义另一个主题扩展类
[@ThemeExtension](/user/ThemeExtension)()
class CustomTypography extends ThemeExtension<CustomTypography> {
  final TextStyle title;
  final TextStyle body;

  const CustomTypography({required this.title, required this.body});

  // 重写 lerp 方法以支持插值动画
  static CustomTypography? lerp(
      CustomTypography? a, CustomTypography? b, double t) {
    return CustomTypography(
      title: TextStyle.lerp(a?.title, b?.title, t),
      body: TextStyle.lerp(a?.body, b?.body, t),
    );
  }
}

生成代码

为了生成自动生成的代码，我们需要运行以下命令：

flutter pub run build_runner build

这将生成 theme_extensions.g.dart 文件，其中包含扩展类的实现细节。

使用主题扩展类

现在可以在 MaterialApp 中使用这些主题扩展类。以下是如何在 MaterialApp 中集成这些扩展类的示例：

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        extensions: <ThemeExtension<dynamic>>[
          CustomColors(primary: Colors.blue, secondary: Colors.red),
          CustomTypography(
            title: const TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
            body: const TextStyle(fontSize: 16),
          ),
        ],
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 获取扩展类
    final customColors = Theme.of(context).extension<CustomColors>();
    final customTypography = Theme.of(context).extension<CustomTypography>();

    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Extensions Example', style: customTypography?.title),
      ),
      body: Center(
        child: Container(
          color: customColors?.primary,
          child: Text(
            'Hello World',
            style: customTypography?.body,
          ),
        ),
      ),
    );
  }
}

总结

通过使用 theme_extensions_annotation 和 theme_extensions_generator，我们可以轻松地扩展主题并在应用中使用这些扩展类。这种方式不仅提高了代码的可维护性，还增强了主题的灵活性和可扩展性。

完整示例代码

以下是完整的示例代码：

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

part 'theme_extensions.g.dart';

[@ThemeExtension](/user/ThemeExtension)()
class CustomColors extends ThemeExtension<CustomColors> {
  final Color primary;
  final Color secondary;

  const CustomColors({required this.primary, required this.secondary});

  static CustomColors? lerp(CustomColors? a, CustomColors? b, double t) {
    return CustomColors(
      primary: Color.lerp(a?.primary, b?.primary, t)!,
      secondary: Color.lerp(a?.secondary, b?.secondary, t)!,
    );
  }
}

[@ThemeExtension](/user/ThemeExtension)()
class CustomTypography extends ThemeExtension<CustomTypography> {
  final TextStyle title;
  final TextStyle body;

  const CustomTypography({required this.title, required this.body});

  static CustomTypography? lerp(
      CustomTypography? a, CustomTypography? b, double t) {
    return CustomTypography(
      title: TextStyle.lerp(a?.title, b?.title, t),
      body: TextStyle.lerp(a?.body, b?.body, t),
    );
  }
}