Flutter主题管理注解插件json_theme_annotation的使用

当然，以下是一个关于如何在Flutter项目中使用json_theme_annotation插件进行主题管理的示例代码案例。这个插件允许你通过注解和JSON文件来管理和应用主题。

1. 添加依赖

首先，在你的pubspec.yaml文件中添加json_theme和json_theme_annotation的依赖：

dependencies:
  flutter:
    sdk: flutter
  json_theme: ^x.y.z  # 请使用最新版本号
  json_theme_annotation: ^x.y.z  # 请使用最新版本号

然后在你的项目根目录下运行flutter pub get来安装这些依赖。

2. 创建主题注解

接下来，你需要创建一个主题数据类，并使用@JsonSerializableTheme注解来标记它。

import 'package:json_theme/json_theme.dart';
import 'package:json_theme_annotation/json_theme_annotation.dart';

part 'theme_data.g.dart';

@JsonSerializableTheme
class MyThemeData {
  final Color primaryColor;
  final Color secondaryColor;
  final TextStyle textStyle;

  const MyThemeData({
    required this.primaryColor,
    required this.secondaryColor,
    required this.textStyle,
  });

  // 生成 JSON 序列化代码
  factory MyThemeData.fromJson(Map<String, dynamic> json) => _$MyThemeDataFromJson(json);
  Map<String, dynamic> toJson() => _$MyThemeDataToJson(this);
}

运行以下命令来生成序列化和反序列化的代码：

flutter pub run build_runner build

3. 创建 JSON 主题文件

在你的assets文件夹中创建一个JSON文件，比如themes.json，内容如下：

{
  "light_theme": {
    "primaryColor": "#FFFFFF",
    "secondaryColor": "#000000",
    "textStyle": {
      "color": "#000000",
      "fontSize": 16
    }
  },
  "dark_theme": {
    "primaryColor": "#000000",
    "secondaryColor": "#FFFFFF",
    "textStyle": {
      "color": "#FFFFFF",
      "fontSize": 16
    }
  }
}

然后在pubspec.yaml文件中添加这个JSON文件到assets：

flutter:
  assets:
    - assets/themes.json

4. 加载和应用主题

在你的主应用中加载并应用主题：

import 'package:flutter/material.dart';
import 'package:json_theme/json_theme.dart';
import 'theme_data.dart'; // 导入你生成的主题数据类

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

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  late JsonTheme jsonTheme;
  late MyThemeData currentTheme;

  @override
  void initState() {
    super.initState();
    rootBundle.loadString('assets/themes.json').then((jsonString) async {
      final themes = await JsonTheme.fromJsonString<MyThemeData>(jsonString);
      setState(() {
        jsonTheme = themes;
        currentTheme = themes.themes['light_theme']!;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Color(int.parse(currentTheme.primaryColor.value.toRadixString(16), 16)),
        textTheme: TextTheme(
          bodyText1: TextStyle(
            color: Color(int.parse(currentTheme.textStyle.color.value.toRadixString(16), 16)),
            fontSize: currentTheme.textStyle.fontSize,
          ),
        ),
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Theme Management'),
        ),
        body: Center(
          child: Text('Hello, Flutter!'),
        ),
        bottomNavigationBar: BottomNavigationBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.brightness_light),
              label: 'Light',
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.brightness_4),
              label: 'Dark',
            ),
          ],
          currentIndex: 0,
          onTap: (index) {
            setState(() {
              currentTheme = index == 0
                  ? jsonTheme.themes['light_theme']!
                  : jsonTheme.themes['dark_theme']!;
            });
          },
        ),
      ),
    );
  }
}

总结

以上代码展示了如何使用json_theme_annotation插件来管理Flutter应用中的主题。你可以根据需要扩展主题数据类，并在JSON文件中定义更多的主题。通过这种方法，你可以轻松地在运行时切换主题，而无需硬编码主题数据。