Flutter主题模式管理插件theme_mode_builder的使用

发布于 1周前 作者 eggper 来自 Flutter

Flutter主题模式管理插件theme_mode_builder的使用

Theme Mode Builder

Pub Version GitHub License GitHub Issues GitHub Pull Requests

我创建了这个包来帮助标准化我的应用的主题处理方式。

Web Demo: https://theme-mode-builder.netlify.app/

特点

  • 🚀 跨平台:手机、桌面、浏览器
  • ❤ 简单、强大、直观的API
  • 🛡 Null Safety
  • 🔋 功能齐全

如何使用

目录

  1. 视频
  2. 指南

视频:(已过时,适用于v0.0.3)

Theme Mode Builder | Explaining Flutter Packages

指南

首先运行初始化,这是一个异步操作,因此你需要将 main() 方法的返回类型从 void 改为 Future<void>

Future<void> main() async {
  /// 确保小部件已初始化
  WidgetsFlutterBinding.ensureInitialized();

  /// 初始化主题模式构建器
  await ThemeModeBuilderConfig.ensureInitialized();

  /// 运行应用 :)
  runApp(MyCoolApp());
}

然后只需将你的 MaterialApp 小部件用 ThemeModeBuilder 包裹,并从 builder 中返回 MaterialApp 小部件。builder 给你两个参数,builder: (BuildContext context, ThemeMode themeMode) {}。将 themeMode 传递给 MaterialAppthemeMode 属性。

以下代码比我的解释更清楚 🙈🚀😂:

import "package:flutter/material.dart";
import "package:theme_mode_builder/theme_mode_builder.dart";

class MyCoolApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ThemeModeBuilder(
      builder: (BuildContext context, ThemeMode themeMode) {
        return MaterialApp(
          title: "My Cool App",

          /// 这里是从 `builder` 传递过来的 `themeMode`
          themeMode: themeMode,
          theme: ThemeData(
            colorScheme: ColorScheme.fromSeed(
              brightness: Brightness.light,
              seedColor: Colors.red,
            ),

            /// 在这里放置你的浅色主题数据
          ),
          darkTheme: ThemeData(
            colorScheme: ColorScheme.fromSeed(
              brightness: Brightness.dark,
              seedColor: Colors.deepPurple,
            ),

            /// 在这里放置你的深色主题数据
          ),
          home: Home(),
        );
      },
    );
  }
}

如果你想更改 themeMode,只需调用:

await ThemeModeBuilderConfig.toggleTheme();

只要正确地遵循了上述步骤,主题就会立即更改 🎉。

需要更多自定义?

要切换到深色模式:

await ThemeModeBuilderConfig.setDark();

要切换到浅色模式:

await ThemeModeBuilderConfig.setLight();

要切换到系统模式:

await ThemeModeBuilderConfig.setSystem();

获取当前的主题模式,可以运行:

final ThemeMode themeMode = ThemeModeBuilderConfig.getThemeMode();

最后,检查当前主题是否为深色主题,可以使用简单的调用:

final bool isDarkTheme = ThemeModeBuilderConfig.isDarkTheme();

示例代码

import 'package:flutter/material.dart';
import 'package:theme_mode_builder/theme_mode_builder.dart';
import 'package:theme_mode_builder_example/theme_mode_builder_example_app.dart';

Future<void> main() async {
  /// 确保小部件已初始化
  WidgetsFlutterBinding.ensureInitialized();

  /// 初始化主题模式构建器
  await ThemeModeBuilderConfig.ensureInitialized(
    /// 为了与旧版本向后兼容 :D
    subDir: "Theme Mode Builder Example",
  );

  /// 运行应用 :)
  runApp(ThemeModeBuilderExampleApp());
}

希望这些信息对你有帮助!如果你有任何问题或需要进一步的帮助,请随时提问。


更多关于Flutter主题模式管理插件theme_mode_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter主题模式管理插件theme_mode_builder的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然,以下是一个使用 theme_mode_builder 插件在 Flutter 中管理主题模式的示例代码。theme_mode_builder 插件简化了主题模式(亮色、暗色和系统默认)的管理。以下示例展示了如何设置和使用这个插件。

首先,确保在 pubspec.yaml 文件中添加依赖:

dependencies:
  flutter:
    sdk: flutter
  theme_mode_builder: ^latest_version  # 请替换为最新版本号

然后,运行 flutter pub get 以获取依赖。

接下来,编写 Flutter 应用代码:

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ThemeModeBuilder(
      builder: (context, themeMode) {
        // 定义主题数据
        final ThemeData lightTheme = ThemeData(
          brightness: Brightness.light,
          primarySwatch: Colors.blue,
          // 其他主题配置...
        );

        final ThemeData darkTheme = ThemeData(
          brightness: Brightness.dark,
          primarySwatch: Colors.indigo,
          // 其他主题配置...
        );

        // 根据 themeMode 返回相应的主题
        final ThemeData theme = themeMode == ThemeMode.light
            ? lightTheme
            : themeMode == ThemeMode.dark
                ? darkTheme
                : ThemeData.from(colorScheme: ColorScheme.fromSeed(seedColor: Colors.grey)) // 系统默认主题,这里仅为示例
                    .copyWith(
                      // 根据需要调整系统默认主题
                    );

        return MaterialApp(
          title: 'Flutter Theme Mode Example',
          theme: theme,
          home: HomeScreen(),
        );
      },
      initialThemeMode: ThemeMode.system, // 初始主题模式:系统默认、亮色或暗色
      // storage: ThemeModeStorage(), // 可选:持久化存储主题模式,需要引入相关依赖和配置
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Theme Mode Manager'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ElevatedButton(
              onPressed: () {
                ThemeModeBuilder.of(context).setThemeMode(ThemeMode.light);
              },
              child: Text('Set Light Theme'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                ThemeModeBuilder.of(context).setThemeMode(ThemeMode.dark);
              },
              child: Text('Set Dark Theme'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                ThemeModeBuilder.of(context).setThemeMode(ThemeMode.system);
              },
              child: Text('Set System Theme'),
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中:

  1. 使用 ThemeModeBuilder 包装 MaterialApp,并定义了一个构建函数,根据当前的 themeMode 返回相应的 ThemeData
  2. 定义了 lightThemedarkTheme 两个主题。
  3. HomeScreen 中,通过 ThemeModeBuilder.of(context) 获取 ThemeModeBuilder 实例,并提供按钮来切换主题模式。

这个示例展示了如何使用 theme_mode_builder 插件来管理 Flutter 应用中的主题模式。如果需要持久化存储主题模式,可以使用 ThemeModeStorage(示例中已注释掉,因为需要额外的配置和依赖)。

回到顶部