Flutter主题管理插件lets_theme的使用

Flutter主题管理插件lets_theme的使用

Let’s Theme

这是控制应用程序主题最简单的方法，这个包提供了几个小部件来在系统和 浅色/深色主题之间切换。

索引

• 安装
• 开始使用
• 应用启动时获取ThemeMode
• Let’s Theme Toggle Widget
• Let’s Theme Toggle Widget Customization
• 更改主题模式
• 切换主题模式
• 更改主题
• 重置主题
• 监听主题模式变化

安装

将以下内容添加到您的pubspec.yaml文件中：

dependencies:
  lets_theme: ^last_version

开始使用

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return LetsTheme(
      light: ThemeData.light(useMaterial3: true), // 浅色主题
      dark: ThemeData.dark(useMaterial3: true),   // 深色主题
      initialMode: ThemeMode.light,               // 初始模式
      builder: (ThemeData light, ThemeData dark) => MaterialApp(
        title: "Let's Theme Demo",                // 应用标题
        theme: light,                             // 浅色主题
        darkTheme: dark,                          // 深色主题
        home: MyHomePage(),                       // 首页
      ),
    );
  }
}

应用启动时获取ThemeMode

当您更改主题时，下次运行应用不会直接选择最近的主题，而是首先使用默认主题渲染。可以通过使main()方法异步并异步加载先前的主题模式来避免这种情况。

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final ThemeMode savedThemeMode = await LetsTheme.getThemeMode(); // 获取保存的主题模式
  runApp(MyApp(savedThemeMode: savedThemeMode));
}

class MyApp extends StatelessWidget {
  const MyApp({this.savedThemeMode, super.key});
  
  final ThemeMode savedThemeMode;
  
  [@override](/user/override)
  Widget build(BuildContext context) {
    return LetsTheme(
      light: ThemeData.light(useMaterial3: true),
      dark: ThemeData.dark(useMaterial3: true),
      initial: savedThemeMode ?? ThemeMode.light, // 使用保存的主题模式或默认浅色模式
      builder: (ThemeData light, ThemeData dark) => MaterialApp(
        title: "Let's Theme Demo",
        theme: light,
        darkTheme: dark,
        home: MyHomePage(),
      ),
    );
  }
}

Let’s Theme Toggle Widget

这是一个功能齐全的小部件，用于更改主题模式。它已经包含了一些开箱即用的小部件。

[@override](/user/override)
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text(widget.title),
    ),
    body: Column(
      children: [
        const SizedBox(height: 12),
        Text(
          '当前主题模式',
          style: Theme.of(context).textTheme.titleLarge,
        ),
        const SizedBox(height: 24),
        Padding(
          padding: const EdgeInsets.symmetric(horizontal: 8),
          child: Text(
            LetsTheme.of(context).mode.name.toUpperCase(),
            style: Theme.of(context).textTheme.displaySmall,
          ),
        ),
        const SizedBox(height: 24),
        const LetsThemeToggle(), // 默认主题切换小部件
        const SizedBox(height: 24),
        const LetsThemeToggle.card(), // 自卡片样式主题切换小部件
        const SizedBox(height: 24),
        const LetsThemeToggle.compact(), // 紧凑型主题切换小部件
        const SizedBox(height: 24),
        const LetsThemeToggle.label(), // 带标签的主题切换小部件
        const SizedBox(height: 24),
        const LetsThemeToggle.icon(), // 带图标的主题切换小部件
      ],
    ),
  );
}

Let’s Theme Toggle Widget Customization

您可以自定义标签和图标。

const LetsThemeToggle() // 默认

// 自定义标签
const LetsThemeToggle(
  labels: [
    '白天模式', // Day Mode
    '夜间模式', // Night Mode
    '自动模式', // Auto Mode
  ],
)

更改主题模式

现在你已经按照上述步骤初始化了你的应用，非常容易和直接地更改主题模式：从浅色到深色、深色到浅色或系统默认。

// 设置主题模式为深色
LetsTheme.of(context).setDark();

// 设置主题模式为浅色
LetsTheme.of(context).setLight();

// 设置主题模式为系统默认
LetsTheme.of(context).setSystem();

// 切换当前主题模式
LetsTheme.of(context).changeThemeMode();

切换主题模式

LetsTheme允许你以最简单的方式在浅色、深色和系统主题之间切换。

LetsTheme.of(context).toggleThemeMode();

每次调用此方法时，ThemeData将从浅色更改为深色，最后变为系统默认。

更改主题

如果您想完全更改主题，例如将所有颜色更改为其他颜色，则可以使用setTheme方法。

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

重置主题

LetsTheme足够智能，可以在初始化时保留您硬编码的默认主题。你可以通过一种直接的方式回退到这些默认主题。

LetsTheme.of(context).reset();

这将把您的ThemeData和ThemeMode重置为初始化时提供的初始模式值。

监听主题模式变化

您可以通过ValueNotifier监听主题模式的变化。这在设计主题设置屏幕或开发显示主题状态的UI时非常有用。

LetsTheme.of(context).themeModeNotifier.addListener(() {
  // 放入您的逻辑
});

// 或者使用它更新UI
ValueListenableBuilder(
  valueListenable: LetsTheme.of(context).themeModeNotifier,
  builder: (_, mode, child) {
    // 更新您的UI
    return Container();
  },
);

示例完整代码

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

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  final ThemeMode? themeMode = await LetsTheme.getThemeMode();

  runApp(MyApp(themeMode));
}

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

  final ThemeMode? themeMode;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return LetsTheme(
      light: ThemeData.light(),
      dark: ThemeData.dark(),
      initialMode: themeMode ?? ThemeMode.light,
      builder: (ThemeData light, ThemeData dark) {
        return MaterialApp(
          title: 'Flutter Demo',
          theme: light,
          darkTheme: dark,
          home: const MyHomePage(title: 'Flutter Demo Home Page'),
        );
      },
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  [@override](/user/override)
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 24, horizontal: 8),
          child: Column(
            children: [
              const SizedBox(height: 12),
              Text(
                '当前主题模式',
                style: Theme.of(context).textTheme.titleLarge,
              ),
              const SizedBox(height: 12),
              Text(
                LetsTheme.of(context).mode.name.toUpperCase(),
                style: Theme.of(context).textTheme.displaySmall,
              ),
              const SizedBox(height: 24),
              const LetsThemeToggle(
                selectionMode: LetsThemeToggleSelectionMode.infinite,
                labels: [
                  '白天模式', // Day Mode
                  '夜间模式', // Night Mode
                  '自动模式', // Auto Mode
                ],
              ),
              const SizedBox(height: 24),
              const LetsThemeToggle.card(),
              const SizedBox(height: 24),
              const LetsThemeToggle.compact(),
              const SizedBox(height: 24),
              const LetsThemeToggle.label(),
              const SizedBox(height: 24),
              const LetsThemeToggle.icon(),
            ],
          ),
        ),
      ),
    );
  }
}