Flutter主题管理插件material_themes_manager的使用

material_themes_manager简介

material_themes_manager 是一个用于在 Flutter 应用中轻松管理主题的插件。它允许开发者快速切换主题模式（如深色模式和浅色模式），并支持自定义主题配置。

使用步骤

1. 添加依赖

在 pubspec.yaml 文件中添加 material_themes_manager 依赖：

dependencies:
  material_themes_manager: ^版本号

然后运行以下命令以安装依赖：

flutter pub get

2. 初始化插件

在 main.dart 文件中初始化 MaterialThemesManager 并将其作为 ChangeNotifierProvider 提供给整个应用。

示例代码

// ignore_for_file: depend_on_referenced_packages

import 'package:flutter/material.dart';
import 'package:material_themes_manager/material_themes_manager.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    // Providers 是在 [MyApp] 外部定义的，以便测试时可以模拟 [MyApp]
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => MaterialThemesManager()),
      ],
      child: MyApp(),
    ),
  );
}

3. 配置应用主题

在 MaterialApp 中使用 MaterialThemesManager 来动态设置主题模式、主题和深色主题。

示例代码

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Consumer<MaterialThemesManager>(
      builder: (context, themeManager, child) {
        return MaterialApp(
          title: "Theme Manager Demo",
          home: MyHomePage(),
          debugShowCheckedModeBanner: themeManager.isDarkModeEnabled,
          themeMode: themeManager.getThemeMode(), // 自动根据用户偏好设置主题模式
          theme: themeManager.getPrimaryLightTheme(), // 浅色主题
          darkTheme: themeManager.getPrimaryDarkTheme(), // 深色主题
        );
      },
    );
  }
}

4. 实现主题切换功能

在应用中添加一个按钮，用于切换深色模式。

示例代码

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: context.watch<MaterialThemesManager>().getTheme(ThemeGroupType.POM).appBarTheme.backgroundColor,
        title: const Text('Example'),
      ),
      body: Center(
        child: Stack(
          children: <Widget>[
            context.watch<MaterialThemesManager>().getBackgroundGradient(BackgroundGradientType.MAIN_BG), // 设置背景渐变
            Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Text('是否启用深色模式:'),
                  DarkModeEnabledText(), // 显示当前深色模式状态
                  Container(
                    width: 150,
                    height: 150,
                    decoration: context.watch<MaterialThemesManager>().getBoxDecorationShadow(
                      shadowIntensity: ShadowIntensity.DARK, // 设置阴影强度
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<MaterialThemesManager>().toggleDarkModeEnabled(), // 切换深色模式
        tooltip: '切换深色模式',
        child: const Icon(Icons.add),
      ),
    );
  }
}

5. 自定义主题组件

可以通过 MaterialThemesManager 提供的方法来自定义主题组件，例如背景渐变、阴影效果等。

示例代码

class DarkModeEnabledText extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Text(
      '${context.watch<MaterialThemesManager>().isDarkModeEnabled.toString()}', // 动态显示深色模式状态
    );
  }
}

完整示例代码

以下是完整的示例代码，包含主题切换功能和自定义主题组件：

// ignore_for_file: depend_on_referenced_packages

import 'package:flutter/material.dart';
import 'package:material_themes_manager/material_themes_manager.dart';
import 'package:provider/provider.dart';

void main() {
  runApp(
    MultiProvider(
      providers: [
        ChangeNotifierProvider(create: (_) => MaterialThemesManager()),
      ],
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Consumer<MaterialThemesManager>(
      builder: (context, themeManager, child) {
        return MaterialApp(
          title: "Theme Manager Demo",
          home: MyHomePage(),
          debugShowCheckedModeBanner: themeManager.isDarkModeEnabled,
          themeMode: themeManager.getThemeMode(),
          theme: themeManager.getPrimaryLightTheme(),
          darkTheme: themeManager.getPrimaryDarkTheme(),
        );
      },
    );
  }
}

class MyHomePage extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: context.watch<MaterialThemesManager>().getTheme(ThemeGroupType.POM).appBarTheme.backgroundColor,
        title: const Text('Example'),
      ),
      body: Center(
        child: Stack(
          children: <Widget>[
            context.watch<MaterialThemesManager>().getBackgroundGradient(BackgroundGradientType.MAIN_BG),
            Center(
              child: Column(
                mainAxisSize: MainAxisSize.min,
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  const Text('是否启用深色模式:'),
                  DarkModeEnabledText(),
                  Container(
                    width: 150,
                    height: 150,
                    decoration: context.watch<MaterialThemesManager>().getBoxDecorationShadow(
                      shadowIntensity: ShadowIntensity.DARK,
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () => context.read<MaterialThemesManager>().toggleDarkModeEnabled(),
        tooltip: '切换深色模式',
        child: const Icon(Icons.add),
      ),
    );
  }
}

class DarkModeEnabledText extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Text(
      '${context.watch<MaterialThemesManager>().isDarkModeEnabled.toString()}',
    );
  }
}