Flutter主题管理插件flutter_theme_manager的使用

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

Flutter主题管理插件flutter_theme_manager的使用

控制您的浅色和深色主题非常简单。

功能

该包处理白天与夜晚（浅色与深色）的主题。

开始使用

如何使用

在应用的根部使用此组件代替MaterialApp。

return themeManager(
  themeBuilder: (ThemeData) {
    return MaterialApp(theme: ThemeData);
  }
);

使用此方法在整个应用中传递颜色：

color: AppTheme.theme(context: context, lightTheme: Color(0xffffffff), darkTheme: Colors.black)

使用示例

以下是一个完整的示例，展示了如何使用flutter_theme_manager插件来管理主题。

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  [@override](/user/override)
  Widget build(BuildContext context) {
    return themeManager(
        themeBuilder: (ThemeData) {
          return MaterialApp(
            theme: ThemeData,
            home: const Home(),
          );
        }
    );
  }
}

/// 通过调用AppTheme.theme并传递context、lightTheme颜色和darkTheme颜色来为应用提供主题。
class Home extends StatefulWidget {
  const Home({Key? key}) : super(key: key);

  [@override](/user/override)
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {

  bool changeTheme = false;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return Scaffold(
      /// backgroundColor: AppTheme.theme(context: context, lightTheme: //传递浅色颜色, darkTheme: //传递深色颜色),
      appBar: AppBar(
        backgroundColor: AppTheme.theme(context: context, lightTheme: Colors.red, darkTheme: Colors.blue),
        title: Text(
          "AppBar",
          style: TextStyle(
              color: AppTheme.theme(
                  context: context, darkTheme: Colors.black, lightTheme: Colors.black)),
        ),
      ),
      body: Column(mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Center(child: Text(" Flutter.dev ",style: TextStyle(color:AppTheme.theme(context: context,lightTheme: Color(0xffffffff),darkTheme:Colors.black ) ),)),
        ],
      ),
    );
  }
}

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

1 回复

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


当然，下面是一个关于如何使用 flutter_theme_manager 插件来管理 Flutter 应用主题的具体代码示例。

安装flutter_theme_manager

首先，在你的 pubspec.yaml 文件中添加 flutter_theme_manager 依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_theme_manager: ^x.y.z  # 请替换为最新版本号

然后运行 flutter pub get 来安装依赖。

使用flutter_theme_manager管理主题

以下是一个完整的 Flutter 应用示例，展示了如何使用 flutter_theme_manager 来管理应用的主题。

main.dart

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

void main() {
  // 初始化主题管理
  ThemeManager.initialize(
    defaults: Brightness.light,
    builder: (context, theme) => MyApp(theme: theme),
  );

  runApp(ThemeManager(child: Builder(builder: (context) {
    // 获取当前主题
    final ThemeData theme = ThemeManager.of(context).theme;
    return MaterialApp(
      title: 'Flutter Theme Manager Example',
      theme: theme,
      darkTheme: theme.copyWith(brightness: Brightness.dark),
      home: MyHomePage(),
    );
  })));
}

class MyApp extends StatelessWidget {
  final ThemeData theme;

  MyApp({required this.theme});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: theme,
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Theme Manager'),
        actions: <Widget>[
          IconButton(
            icon: Icon(
              ThemeManager.of(context).brightness == Brightness.light
                  ? Icons.dark_mode
                  : Icons.light_mode,
            ),
            onPressed: () {
              ThemeManager.of(context).setBrightness(
                ThemeManager.of(context).brightness == Brightness.light
                    ? Brightness.dark
                    : Brightness.light,
              );
            },
          ),
        ],
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              'You have pushed the button this many times:',
            ),
            Text(
              'Theme Mode: ${ThemeManager.of(context).brightness == Brightness.light ? "Light" : "Dark"}',
              style: Theme.of(context).textTheme.headline4,
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

解释

  1. 初始化主题管理：在 main 函数中，我们使用 ThemeManager.initialize 方法来初始化主题管理。这里我们指定了默认主题为亮色模式，并设置了构建器函数。

  2. 包裹应用：我们使用 ThemeManager 包裹整个应用，这样我们就可以在应用的任何地方访问主题管理器。

  3. 获取当前主题：在 MaterialApp 的构建函数中，我们通过 ThemeManager.of(context) 获取当前的主题。

  4. 切换主题：在 MyHomePage 中，我们添加一个 IconButton 来切换主题。点击按钮时，根据当前主题模式（亮色或暗色），切换到另一种模式。

注意事项

  • 确保你已经正确安装并导入了 flutter_theme_manager 插件。
  • 你可以在 ThemeManager.initialize 中指定更多默认设置，比如默认的语言环境、文本方向等。
  • flutter_theme_manager 还支持持久化主题设置，可以通过 ThemeManager.save() 和 ThemeManager.load() 方法来实现。

这个示例展示了基本的主题管理功能，你可以根据需要进一步扩展和自定义。

回到顶部