Flutter主题管理插件ysh_theme_manager的使用

本文将详细介绍如何使用Flutter主题管理插件ysh_theme_manager。通过该插件，您可以轻松实现主题切换功能，并为您的应用添加更多个性化选项。

Features（功能）

• 支持动态切换主题。
• 提供多种预设主题样式。
• 用户可以保存自己的主题偏好并持久化存储。

Getting Started（开始使用）

前提条件

1. 确保您的项目已配置好Flutter环境。
2. 在pubspec.yaml文件中添加以下依赖：

   dependencies:
     ysh_theme_manager: ^1.0.0
   

3. 运行命令安装依赖：

   flutter pub get
   

Usage（使用方法）

初始化主题管理器

在main.dart文件中初始化YshThemeManager，并设置默认主题。

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return YshThemeManager(
      // 设置默认主题
      defaultTheme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.light,
      ),
      // 持久化存储的主题
      persistentKey: 'theme_mode',
      child: MaterialApp(
        title: 'Flutter Theme Demo',
        themeMode: YshThemeManager.of(context).themeMode,
        theme: YshThemeManager.of(context).lightTheme,
        darkTheme: YshThemeManager.of(context).darkTheme,
        home: MyHomePage(),
      ),
    );
  }
}

创建主题切换页面

创建一个页面，允许用户选择不同的主题。

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('主题管理示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // 切换到浅色主题
                YshThemeManager.of(context).setLightTheme();
              },
              child: Text('浅色主题'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 切换到深色主题
                YshThemeManager.of(context).setDarkTheme();
              },
              child: Text('深色主题'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 切换到系统主题
                YshThemeManager.of(context).setSystemTheme();
              },
              child: Text('跟随系统主题'),
            ),
          ],
        ),
      ),
    );
  }
}

Additional Information（更多信息）

如何保存用户主题偏好？

YshThemeManager会自动将用户选择的主题持久化到SharedPreferences中。您可以通过以下方式获取当前主题模式：

final themeMode = YshThemeManager.of(context).themeMode;

如何自定义主题？

您可以自定义主题并在YshThemeManager中注册它们：

YshThemeManager.registerTheme(
  'custom_light',
  ThemeData(
    primarySwatch: Colors.green,
    brightness: Brightness.light,
  ),
);

YshThemeManager.registerTheme(
  'custom_dark',
  ThemeData(
    primarySwatch: Colors.purple,
    brightness: Brightness.dark,
  ),
);

然后在UI中提供切换选项：

ElevatedButton(
  onPressed: () {
    YshThemeManager.of(context).setCustomTheme('custom_light');
  },
  child: Text('自定义浅色主题'),
),

完整示例代码

以下是完整的示例代码，包含主题切换功能：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return YshThemeManager(
      defaultTheme: ThemeData(
        primarySwatch: Colors.blue,
        brightness: Brightness.light,
      ),
      persistentKey: 'theme_mode',
      child: MaterialApp(
        title: 'Flutter Theme Demo',
        themeMode: YshThemeManager.of(context).themeMode,
        theme: YshThemeManager.of(context).lightTheme,
        darkTheme: YshThemeManager.of(context).darkTheme,
        home: MyHomePage(),
      ),
    );
  }
}

class MyHomePage extends StatefulWidget {
  [@override](/user/override)
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('主题管理示例'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                YshThemeManager.of(context).setLightTheme();
              },
              child: Text('浅色主题'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                YshThemeManager.of(context).setDarkTheme();
              },
              child: Text('深色主题'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                YshThemeManager.of(context).setSystemTheme();
              },
              child: Text('跟随系统主题'),
            ),
          ],
        ),
      ),
    );
  }
}