Flutter主题生成插件extension_theme_generator的使用

语言版本

• 简体中文
• 俄语

Flutter扩展主题生成器是一个工具，用于在Flutter项目中生成ThemeExtension，简化自定义主题的管理。通过使用两个装饰器@TextStyleAnnotation()和@ColorAnnotation()，您可以轻松创建符合需求的主题。

主要特性

• 易于使用：只需在包含颜色或文本样式的类上添加@TextStyleAnnotation()或@ColorAnnotation()。
• 自动生成功能：运行命令flutter pub run build_runner build以自动生成ThemeExtension所需的代码。
• 灵活性：您可以创建任意数量的应用程序主题，而不仅仅是深色和浅色主题。

示例用法

详细的示例可以在/example文件夹中找到。

步骤 1：添加依赖项

dependencies:
  extension_theme_generator: ^1.0.0

dev_dependencies:
  build_runner: ^2.4.11

步骤 2：添加颜色和文本样式类

颜色示例：

@ColorAnnotation()
class DarkColors {
  static const Color primary = Color(0xFF000000);
  static const Color secondary = Color(0xFF111111);
  static const Color textColor = Color(0xFF111111);
  static const Color background = Color(0xFF015D60);
}

@ColorAnnotation()
class BlueColors {
  static const Color primary = Color(0xFF000000);
  static const Color secondary = Color(0xFF111111);
  static const Color textColor = Color(0xFF111111);
  static const Color background = Color(0xFFC4EDF3);
}

文本样式示例：

@TextStyleAnnotation()
class DarkTextStyle {
  static const TextStyle header = TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.white,
  );
  static const TextStyle body = TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.normal,
    color: Colors.black,
  );
}

@TextStyleAnnotation()
class LightTextStyle {
  static const TextStyle header = TextStyle(
    fontSize: 24,
    fontWeight: FontWeight.bold,
    color: Colors.black,
  );
  static const TextStyle body = TextStyle(
    fontSize: 16,
    fontWeight: FontWeight.normal,
    color: Colors.black,
  );
}

您可以添加任意数量的主题，并不仅仅限于深色和浅色主题。

步骤 3：添加生成文件路径

例如，part 'theme.g.dart';

步骤 4：运行生成命令

flutter pub run build_runner build

步骤 5：更新 ThemeData

ThemeData createDarkTheme(){
  return ThemeData(
    extensions: const [
      $AppThemeColors.darkColors, // 生成的颜色类
      $AppThemeTextStyles.darkTextStyle, // 生成的文本样式类
    ],
  );
}

示例代码

import 'package:example/theme/blue_theme.dart';
import 'package:example/theme/build_context_ext.dart';
import 'package:example/theme/dark_theme.dart';
import 'package:example/theme/light_theme.dart';
import 'package:flutter/material.dart';

import 'theme/theme.dart';

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

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

  [@override](/user/override)
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  ThemeData? themeData;

  [@override](/user/override)
  void initState() {
    themeData=createLightTheme();
    super.initState();
  }

  void selectTheme(ThemeData data){
    setState(() {
      themeData=data;
    });
  }

  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: themeData,
      home: HomePage(
        selectTheme: (data)=>selectTheme(data),
      ),
    );
  }
}

class HomePage extends StatefulWidget {
  final Function(ThemeData data) selectTheme;
  const HomePage({super.key, required this.selectTheme});

  [@override](/user/override)
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return  Scaffold(
      appBar: AppBar(
        title: Text('Demo Theme App'),
      ),
      backgroundColor: context.appColor.background,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text(
              'Select an application theme:',
              style: context.appText.header,
            ),
            ElevatedButton(
                onPressed: (){
                  widget.selectTheme(createLightTheme());
                },
                child: Text('Light Theme')
            ),
            ElevatedButton(
                onPressed: (){
                  widget.selectTheme(createDarkTheme());
                },
                child: Text('Dark Theme')
            ),
            ElevatedButton(
                onPressed: (){
                  widget.selectTheme(createBlueTheme());
                },
                child: Text('Blue Theme')
            ),
          ],
        ),
      ),
    );
  }
}