Flutter主题管理插件dotup_flutter_themed的使用

dotup_flutter_themed 是一个用于 Flutter 应用主题管理的插件。它允许开发者轻松地管理和切换应用的主题，支持自定义主题和动态主题切换。以下是如何使用 dotup_flutter_themed 插件的基本步骤：

1. 添加依赖

首先，在 pubspec.yaml 文件中添加 dotup_flutter_themed 依赖：

dependencies:
  flutter:
    sdk: flutter
  dotup_flutter_themed: ^0.0.1  # 请检查最新版本

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

2. 创建主题

你可以创建多个主题，并在应用中进行切换。以下是一个简单的主题定义示例：

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

final lightTheme = AppTheme(
  name: 'Light',
  themeData: ThemeData(
    brightness: Brightness.light,
    primaryColor: Colors.blue,
    accentColor: Colors.blueAccent,
  ),
);

final darkTheme = AppTheme(
  name: 'Dark',
  themeData: ThemeData(
    brightness: Brightness.dark,
    primaryColor: Colors.indigo,
    accentColor: Colors.indigoAccent,
  ),
);

3. 初始化 ThemeManager

在应用的入口点（通常是 main.dart），初始化 ThemeManager 并设置默认主题：

import 'package:flutter/material.dart';
import 'package:dotup_flutter_themed/dotup_flutter_themed.dart';
import 'themes.dart'; // 假设主题定义在 themes.dart 文件中

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化 ThemeManager
  await ThemeManager.initialize(
    themes: [lightTheme, darkTheme],
    defaultTheme: lightTheme,
  );

  runApp(MyApp());
}

4. 使用 ThemeManager

在应用的 MaterialApp 或 CupertinoApp 中，使用 ThemeManager 提供的主题：

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Theme Demo',
      theme: ThemeManager.currentTheme.themeData,
      home: MyHomePage(),
    );
  }
}

5. 动态切换主题

你可以通过 ThemeManager 动态切换主题。例如，在按钮点击事件中切换主题：

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Theme: ${ThemeManager.currentTheme.name}',
            ),
            ElevatedButton(
              onPressed: () {
                ThemeManager.setTheme(darkTheme);
              },
              child: Text('Switch to Dark Theme'),
            ),
            ElevatedButton(
              onPressed: () {
                ThemeManager.setTheme(lightTheme);
              },
              child: Text('Switch to Light Theme'),
            ),
          ],
        ),
      ),
    );
  }
}

6. 监听主题变化

如果你需要在主题变化时执行某些操作，可以使用 ThemeManager 的 onThemeChanged 监听器：

ThemeManager.onThemeChanged.listen((theme) {
  print('Theme changed to: ${theme.name}');
});

7. 保存和加载主题

ThemeManager 还支持将当前主题保存到本地存储，并在应用启动时加载上次保存的主题：

// 保存当前主题
await ThemeManager.saveTheme();

// 加载保存的主题
await ThemeManager.loadTheme();

8. 完整示例

以下是一个完整的示例，展示了如何使用 dotup_flutter_themed 插件：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  // 初始化 ThemeManager
  await ThemeManager.initialize(
    themes: [
      AppTheme(
        name: 'Light',
        themeData: ThemeData(
          brightness: Brightness.light,
          primaryColor: Colors.blue,
          accentColor: Colors.blueAccent,
        ),
      ),
      AppTheme(
        name: 'Dark',
        themeData: ThemeData(
          brightness: Brightness.dark,
          primaryColor: Colors.indigo,
          accentColor: Colors.indigoAccent,
        ),
      ),
    ],
    defaultTheme: AppTheme(
      name: 'Light',
      themeData: ThemeData(
        brightness: Brightness.light,
        primaryColor: Colors.blue,
        accentColor: Colors.blueAccent,
      ),
    ),
  );

  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Theme Demo',
      theme: ThemeManager.currentTheme.themeData,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'Current Theme: ${ThemeManager.currentTheme.name}',
            ),
            ElevatedButton(
              onPressed: () {
                ThemeManager.setTheme(AppTheme(
                  name: 'Dark',
                  themeData: ThemeData(
                    brightness: Brightness.dark,
                    primaryColor: Colors.indigo,
                    accentColor: Colors.indigoAccent,
                  ),
                ));
              },
              child: Text('Switch to Dark Theme'),
            ),
            ElevatedButton(
              onPressed: () {
                ThemeManager.setTheme(AppTheme(
                  name: 'Light',
                  themeData: ThemeData(
                    brightness: Brightness.light,
                    primaryColor: Colors.blue,
                    accentColor: Colors.blueAccent,
                  ),
                ));
              },
              child: Text('Switch to Light Theme'),
            ),
          ],
        ),
      ),
    );
  }
}