Flutter主题切换插件theme_change的使用

Flutter主题切换插件theme_change的使用

主题变更包由Sumit Gohil开发

theme_change: 使用SharedPreferences进行持久化存储，并结合GetX或Provider进行状态管理，为您的应用提供流畅的主题管理解决方案。

• 新增功能:

  • 您可以使用该包提供的MaterialApp在runApp方法中。
  • ThemeMaterialAppGetX用于GetX。
  • ThemeMaterialAppProvider用于Provider。

• ThemeMaterialAppGetX的属性:

  ThemeMaterialAppGetX({
    super.key,
    this.title,
    this.routes,
    this.home,
    this.initialRoute,
    this.theme,
    this.darkTheme,
    this.debugShowCheckedModeBanner
  })
  

• ThemeMaterialAppProvider的属性:

  ThemeMaterialAppProvider({
    super.key,
    required this.otherProviders,
    this.routes,
    this.home,
    this.initialRoute,
    this.theme,
    this.darkTheme,
    this.title,
    this.debugShowCheckedModeBanner
  })
  

仅限GetX用户专属功能:

• 现在您可以使用ThemeObserver小部件代替Obx()小部件。
• 版本2.0.0:
  • 您现在也可以使用Provider包进行主题管理。
  • 您可以选择使用Provider或GetX包进行主题管理。
  • 我更倾向于使用此包与SharedPreferences和GetX结合，因为这样代码复杂度较低。

通过theme_change，您可以轻松地将主题管理集成到您的Flutter应用中。它利用SharedPreferences进行永久存储，并使用GetX或Provider进行状态管理，从而为您提供一个优雅的动态和持久主题管理解决方案。

关键特性:

• 持久化主题存储: 自动保存用户的主题偏好设置，确保每次启动应用时都保持一致的外观。
• 易于与GetX集成: 利用GetX进行状态管理，提供了一种反应式且高效的管理及切换主题的方式。
• 简洁的API: 清晰直观的API使得在亮模式和暗模式之间切换或者实现自定义主题变得非常简单。
• 无缝用户体验: 通过平滑的主题过渡和持久设置增强用户体验，使您的应用感觉更加个性化和用户友好。

如何工作:

• 集成: 将theme_change添加到您的pubspec.yaml文件中，并只需几行代码即可开始使用。
• 配置: 轻松设置您的主题和偏好设置，使用提供的方法和配置选项。
• 享受: 让theme_change处理主题持久性和状态管理，让您专注于构建应用的功能。

无论您是在开发新应用还是改进现有应用，theme_change都提供了一种简化的方法来管理用户主题和偏好。体验持久主题管理和反应式状态管理带来的便利吧！

安装

使用GetX包：

1. 在pubspec.yaml文件中添加以下内容（此包需要SharedPreferences和GetX）：

   theme_change: ^2.0.5
   shared_preferences: 
   get: 
   

2. 运行flutter pub get。
3. 在dart文件中导入库：

   import 'package:theme_change/theme_change.dart';
   

使用Provider包：

1. 在pubspec.yaml文件中添加以下内容（此包需要SharedPreferences和Provider）：

   theme_change: ^2.0.5
   shared_preferences: 
   provider: 
   

2. 运行flutter pub get。
3. 在dart文件中导入库：

   import 'package:theme_change/theme_change.dart';
   

示例代码

使用GetX包的main.dart示例代码

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:theme_change/theme_change.dart';

void main() {
  runApp(
    ThemeChangeWrapper(
      child: GetMaterialApp(
        home: MyApp(),
        theme: ThemeData.light(),
        darkTheme: ThemeData.dark(),
      ),
    ),
  );
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Theme Change Demo"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text("Hello, World!"),
            SizedBox(height: 20),
            ThemeSwitcher(
              builder: (BuildContext context, bool isDarkMode, Function setDarkMode) {
                return Switch(
                  value: isDarkMode,
                  onChanged: (bool value) {
                    setDarkMode(value);
                  },
                );
              },
            ),
          ],
        ),
      ),
    );
  }
}

使用Provider包的main.dart示例代码

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

void main() {
  runApp(
    ThemeChangeWrapper(
      child: MultiProvider(
        providers: [
          // 添加其他Provider
        ],
        child: MyApp(),
      ),
    ),
  );
}

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Consumer<ThemeProvider>(
      builder: (context, themeProvider, child) {
        return MaterialApp(
          home: Scaffold(
            appBar: AppBar(
              title: Text("Theme Change Demo"),
            ),
            body: Center(
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text("Hello, World!"),
                  SizedBox(height: 20),
                  ThemeSwitcher(
                    builder: (BuildContext context, bool isDarkMode, Function setDarkMode) {
                      return Switch(
                        value: isDarkMode,
                        onChanged: (bool value) {
                          setDarkMode(value);
                        },
                      );
                    },
                  ),
                ],
              ),
            ),
          ),
          theme: themeProvider.isDarkMode ? ThemeData.dark() : ThemeData.light(),
        );
      },
    );
  }
}