Flutter主题切换插件reactive_theme的使用

Flutter主题切换插件reactive_theme的使用

reactive_theme 是一个用于在Flutter应用中轻松切换浅色模式和深色模式的插件。通过 ReactiveThemer 和 ReactiveThemeBtn 等组件，您可以方便地实现主题切换功能。该插件支持Android、iOS、Web、Mac、Linux和Windows平台。

功能

• 使用 ReactiveThemeBtn 或 ReactiveSwitch 组件轻松切换浅色模式和深色模式。
• 自动保存主题状态，无需手动使用 shared_preferences 保存主题设置。

安装

您可以通过以下命令安装 reactive_theme 插件：

$ flutter pub add reactive_theme

导入

在您的Dart文件中导入 reactive_theme：

import 'package:reactive_theme/reactive_theme.dart';

使用示例

1. 主函数配置

在 main() 函数中，获取保存的主题模式并传递给 MyApp：

void main() async {
  // 获取保存的主题模式
  final thememode = await ReactiveMode.getSavedThemeMode();
  // 将其传递给 MyApp
  runApp(MyApp(savedThemeMode: thememode));
}

2. 包裹 MaterialApp 以启用主题切换

确保 ReactiveThemer 是 widget 树中的最顶层组件：

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

  final ThemeMode? savedThemeMode;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ReactiveThemer(
      // 加载保存的主题模式，如果为 null，则使用系统默认主题
      savedThemeMode: savedThemeMode,
      builder: (reactiveMode) => MaterialApp(
        debugShowCheckedModeBanner: false,
        // 传递 reactiveMode 以实现主题切换
        themeMode: reactiveMode,
        title: 'Reactive Theme Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(
              brightness: Brightness.light, seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        darkTheme: ThemeData(
          colorScheme: ColorScheme.fromSeed(
              brightness: Brightness.dark, seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: const HomePage(),
      ),
    );
  }
}

3. 创建主页并添加主题切换按钮

在主页中，您可以使用 ReactiveSwitch 和 ReactiveThemeBtn 来切换主题，并使用 ReactiveMode.isDarkMode(context) 检查当前是否为深色模式：

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 使用 [ReactiveSwitch] 切换主题
          const Center(child: ReactiveSwitch()),
          const SizedBox(height: 20),
          // 使用 [ReactiveThemeBtn] 切换主题
          const Center(child: ReactiveThemeBtn()),
          const SizedBox(height: 20),
          // 检查当前是否为深色模式
          ReactiveMode.isDarkMode(context)
              ? const Text('当前是深色模式')
              : const Text('当前不是深色模式'),
        ],
      ),
    );
  }
}

ReactiveMode 的使用

您可以使用 ReactiveMode.isDarkMode(context) 来检查当前是否为深色模式，返回一个布尔值：

// 返回布尔值
ReactiveMode.isDarkMode(context);

ReactiveThemeBtn 参数说明

ReactiveSwitch 参数说明

完整示例代码

以下是完整的示例代码，展示了如何使用 reactive_theme 插件实现主题切换功能：

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

void main() async {
  // 获取保存的主题模式
  final thememode = await ReactiveMode.getSavedThemeMode();
  // 将其传递给 MyApp
  runApp(MyApp(savedThemeMode: thememode));
}

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

  final ThemeMode? savedThemeMode;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return ReactiveThemer(
      // 加载保存的主题模式，如果为 null，则使用系统默认主题
      savedThemeMode: savedThemeMode,
      builder: (reactiveMode) => MaterialApp(
        debugShowCheckedModeBanner: false,
        // 传递 reactiveMode 以实现主题切换
        themeMode: reactiveMode,
        title: 'Reactive Theme Demo',
        theme: ThemeData(
          colorScheme: ColorScheme.fromSeed(
              brightness: Brightness.light, seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        darkTheme: ThemeData(
          colorScheme: ColorScheme.fromSeed(
              brightness: Brightness.dark, seedColor: Colors.deepPurple),
          useMaterial3: true,
        ),
        home: const HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          // 使用 [ReactiveSwitch] 切换主题
          const Center(child: ReactiveSwitch()),
          const SizedBox(height: 20),
          // 使用 [ReactiveThemeBtn] 切换主题
          const Center(child: ReactiveThemeBtn()),
          const SizedBox(height: 20),
          // 检查当前是否为深色模式
          ReactiveMode.isDarkMode(context)
              ? const Text('当前是深色模式')
              : const Text('当前不是深色模式'),
        ],
      ),
    );
  }
}