Flutter主题管理插件 json_theme_plus 的使用

简介

json_theme_plus 是一个用于编码和解码 ThemeData 及其相关对象的库。它允许开发者将主题数据以 JSON 格式存储，并在应用中动态加载这些主题。

主要特性

• ThemeDecoder：提供从 JSON 映射解码主题相关对象的功能。
• ThemeEncoder：提供将主题相关对象编码为 JSON 映射的功能。

注意事项

• 编码和解码不是完全双向兼容的，因为有些属性仅存在于构造函数中，无法重新暴露为属性。
• 使用此库时需要禁用 Flutter 的图标树抖动功能（tree shaking），否则会报错。

开始使用

首先，在项目的 pubspec.yaml 文件中添加依赖：

dependencies:
  json_theme_plus: ^6.7.1

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

示例 Demo

下面是一个完整的示例，展示了如何使用 json_theme_plus 来加载和应用不同的主题。

示例代码

import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:json_theme_plus/json_theme_plus.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: RootPage(),
    );
  }
}

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

  @override
  State createState() => _RootPageState();
}

class _RootPageState extends State<RootPage> {
  static const _themes = [
    'default',
    'big_red',
    'calm_blue',
  ];

  Future<void> _onThemeSelected(BuildContext context, String themeId) async {
    final navigator = Navigator.of(context);
    final themeStr = await rootBundle.loadString('assets/themes/$themeId.json');
    final themeJson = json.decode(themeStr);

    final theme = ThemeDecoder.decodeThemeData(
          themeJson,
          validate: true,
        ) ??
        ThemeData();

    if (mounted) {
      await navigator.push(
        MaterialPageRoute(
          builder: (BuildContext context) => ThemePage(
            theme: theme,
          ),
        ),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Select Theme'),
      ),
      body: ListView.builder(
        itemCount: _themes.length,
        itemBuilder: (BuildContext context, int index) => ListTile(
          title: Text(_themes[index]),
          onTap: () => _onThemeSelected(context, _themes[index]),
        ),
      ),
    );
  }
}

class ThemePage extends StatelessWidget {
  final ThemeData theme;

  const ThemePage({
    required this.theme,
    Key? key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Theme(
      data: theme,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Theme Page'),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Text(
                'Hello World!',
                style: theme.textTheme.headline4,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

解释

1. 加载主题文件：通过 rootBundle.loadString 方法加载存放在 assets/themes/ 目录下的 JSON 文件。
2. 解码主题数据：使用 ThemeDecoder.decodeThemeData 方法将 JSON 数据解码为 ThemeData 对象。
3. 导航到主题页面：通过 Navigator.push 导航到新的页面，并应用解码的主题。

主题文件示例

假设你有一个名为 default.json 的主题文件：

{
  "brightness": "light",
  "primaryColor": "#ff0000",
  "textTheme": {
    "headline4": {
      "fontSize": 24,
      "fontWeight": "bold",
      "color": "#000000"
    }
  }
}