Flutter主题适配插件adaptive_theme的使用

介绍

Adaptive Theme 是为Flutter应用添加对浅色和深色主题支持最简单的方法。它允许手动设置浅色或深色主题，并且可以基于系统设置定义主题。它还能够在应用程序重启时保持主题模式的更改。

查看在线演示

使用步骤

添加依赖

在pubspec.yaml中添加以下依赖：

dependencies:
  adaptive_theme: ^latest_version # 替换为最新版本号

初始化

要在你的应用中使用AdaptiveTheme，你需要将MaterialApp包装在AdaptiveTheme中。

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final savedThemeMode = await AdaptiveTheme.getThemeMode();
  runApp(MyApp(savedThemeMode: savedThemeMode));
}

class MyApp extends StatelessWidget {
  final AdaptiveThemeMode? savedThemeMode;

  const MyApp({super.key, this.savedThemeMode});

  @override
  Widget build(BuildContext context) {
    return AdaptiveTheme(
      light: ThemeData.light(useMaterial3: true),
      dark: ThemeData.dark(useMaterial3: true),
      initial: savedThemeMode ?? AdaptiveThemeMode.light,
      builder: (theme, darkTheme) => MaterialApp(
        title: 'Adaptive Theme Demo',
        theme: theme,
        darkTheme: darkTheme,
        home: MyHomePage(),
      ),
      debugShowFloatingThemeButton: true, // 启用浮动按钮来切换主题模式
    );
  }
}

切换主题模式

你可以通过调用setLight()、setDark()或setSystem()方法轻松地切换主题模式：

AdaptiveTheme.of(context).setLight(); // 设置为浅色模式
AdaptiveTheme.of(context).setDark(); // 设置为深色模式
AdaptiveTheme.of(context).setSystem(); // 设置为系统默认模式

或者使用toggleThemeMode()来切换当前的主题模式：

AdaptiveTheme.of(context).toggleThemeMode();

更改主题

如果你想完全改变主题（例如更改颜色），可以使用setTheme方法：

AdaptiveTheme.of(context).setTheme(
  light: ThemeData(
    useMaterial3: true,
    brightness: Brightness.light,
    colorSchemeSeed: Colors.purple,
  ),
  dark: ThemeData(
    useMaterial3: true,
    brightness: Brightness.dark,
    colorSchemeSeed: Colors.purple,
  ),
);

重置主题

可以通过调用reset()方法将主题重置为初始化时提供的默认值：

AdaptiveTheme.of(context).reset();

设置默认主题

如果你想在以后重置时使用不同的默认主题，可以在设置新主题时将isDefault参数设为true：

AdaptiveTheme.of(context).setTheme(
  light: ThemeData(
    useMaterial3: true,
    brightness: Brightness.light,
    colorSchemeSeed: Colors.blue,
  ),
  dark: ThemeData(
    useMaterial3: true,
    brightness: Brightness.dark,
    colorSchemeSeed: Colors.blue,
  ),
  isDefault: true,
);

获取启动时的主题模式

为了避免首次渲染时的主题闪烁，你可以在main()方法中异步加载之前保存的主题模式：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final savedThemeMode = await AdaptiveTheme.getThemeMode();
  runApp(MyApp(savedThemeMode: savedThemeMode));
}

// 在MyApp中使用savedThemeMode
AdaptiveTheme(
  light: lightTheme,
  dark: darkTheme,
  initial: savedThemeMode ?? AdaptiveThemeMode.light,
  builder: (theme, darkTheme) => MaterialApp(
    title: 'Adaptive Theme Demo',
    theme: theme,
    darkTheme: darkTheme,
    home: MyHomePage(),
  ),
)

监听主题模式变化

你可以监听主题模式的变化，并根据需要更新UI：

ValueListenableBuilder(
  valueListenable: AdaptiveTheme.of(context).modeChangeNotifier,
  builder: (_, mode, child) {
    // 更新UI逻辑
    return Container();
  },
);

浮动主题按钮

从v3.3.0开始，你可以通过设置debugShowFloatingThemeButton为true来启用一个浮动按钮，用于快速切换主题模式：

AdaptiveTheme(
  light: ThemeData.light(),
  dark: ThemeData.dark(),
  debugShowFloatingThemeButton: true,
  initial: AdaptiveThemeMode.light,
  builder: (theme, darkTheme) => MaterialApp(
    theme: theme,
    darkTheme: darkTheme,
    home: MyHomePage(),
  ),
);

注意事项

• 非持久化主题更改：AdaptiveTheme仅持久化主题模式（浅色/深色/系统），不会持久化主题本身。如果你动态加载了新的主题，请确保在每次应用启动时重新设置。
• 使用SharedPreferences：该插件内部使用shared_preferences来持久化主题模式。如果你的应用也使用了shared_preferences，请小心不要清除这些偏好设置，除非你希望主题模式恢复到初始状态。

示例代码

以下是完整的示例代码，展示了如何创建一个包含主题切换功能的应用程序：

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final savedThemeMode = await AdaptiveTheme.getThemeMode();
  runApp(MyApp(savedThemeMode: savedThemeMode));
}

class MyApp extends StatelessWidget {
  final AdaptiveThemeMode? savedThemeMode;

  const MyApp({super.key, this.savedThemeMode});

  @override
  Widget build(BuildContext context) {
    return AdaptiveTheme(
      light: ThemeData(
        useMaterial3: true,
        brightness: Brightness.light,
        colorSchemeSeed: Colors.blue,
      ),
      dark: ThemeData(
        useMaterial3: true,
        brightness: Brightness.dark,
        colorSchemeSeed: Colors.blue,
      ),
      initial: savedThemeMode ?? AdaptiveThemeMode.light,
      builder: (theme, darkTheme) => MaterialApp(
        title: 'Adaptive Theme Demo',
        theme: theme,
        darkTheme: darkTheme,
        home: const MyHomePage(),
      ),
      debugShowFloatingThemeButton: true,
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Adaptive Theme Demo'),
      ),
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              const Text(
                '这是一个展示adaptive_theme使用的示例应用。',
              ),
              const Text(
                '你可以使用下面的开关在浅色和深色主题之间切换。',
              ),
              const SizedBox(height: 20),
              Row(
                mainAxisSize: MainAxisSize.min,
                children: [
                  const Text('浅色'),
                  const SizedBox(width: 10),
                  Switch(
                    value: AdaptiveTheme.of(context).mode.isDark,
                    onChanged: (value) {
                      if (value) {
                        AdaptiveTheme.of(context).setDark();
                      } else {
                        AdaptiveTheme.of(context).setLight();
                      }
                    },
                  ),
                  const SizedBox(width: 10),
                  const Text('深色'),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

通过以上步骤，你就可以在Flutter应用中轻松实现浅色和深色主题的切换，并且能够持久化用户的主题选择。