Flutter动态主题切换插件easy_dynamic_theme的使用

Easy Dynamic Theme

这是一个新的、简单的Flutter主题处理方式。

它能自动获取操作系统定义的主题（动态），强制使用你偏好的主题（浅色/深色），并在设备上持久化你的选择。

Easy peasy, don’t you think? ;)

Demo

Getting Started

有关如何开始使用Flutter的帮助，请查看我们的在线文档，其中提供了教程、示例、移动开发指南和完整的API参考。

Minimum Requirements

• Dart SDK: >=2.12.0 <3.0.0
• Flutter: >= 1.20.0

Installation and Usage

熟悉Flutter后，可以通过在pubspec.yaml文件中添加easy_dynamic_theme来安装此包：

dependencies:
  flutter:
    sdk: flutter
  easy_dynamic_theme: ^2.2.0

然后在控制台运行命令flutter packages get。

Examples of Use

所有魔法都在你的main.dart文件中发生：

import 'package:flutter/material.dart';
import 'package:easy_dynamic_theme/easy_dynamic_theme.dart';
import 'home.dart';

void main() async {
  runApp(
    EasyDynamicThemeWidget(
      child: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  final String title = 'EDT - Example';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: title,
      theme: ThemeData.light(),
      darkTheme: ThemeData.dark(),
      themeMode: EasyDynamicTheme.of(context).themeMode,
      home: MyHomePage(title: title),
    );
  }
}

How to use predefined Themes

可以在themes.dart文件中定义自己的主题：

import 'package:flutter/material.dart';

var lightThemeData = ThemeData(
  primaryColor: Colors.blue,
  textTheme: TextTheme(button: TextStyle(color: Colors.white70)),
  brightness: Brightness.light,
  accentColor: Colors.blue,
);

var darkThemeData = ThemeData(
  primaryColor: Colors.blue,
  textTheme: TextTheme(button: TextStyle(color: Colors.black54)),
  brightness: Brightness.dark,
  accentColor: Colors.blue,
);

然后在main.dart文件中导入并使用这些主题：

import 'package:flutter/material.dart';
import 'package:easy_dynamic_theme/easy_dynamic_theme.dart';
import 'theme.dart';
import 'home.dart';

void main() async {
  runApp(
    EasyDynamicThemeWidget(
      child: const MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  final String title = 'EDT - Example';

  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: title,
      debugShowCheckedModeBanner: false,
      theme: lightThemeData,
      darkTheme: darkThemeData,
      themeMode: EasyDynamicTheme.of(context).themeMode,
      home: MyHomePage(
        title: title,
      ),
    );
  }
}

How to change the ThemeMode in your app

可以使用changeTheme函数从应用程序的任何地方更改主题模式。该函数有两个可选参数：dynamic和dark。如果dynamic的值为true，则它优先于dark。

EasyDynamicTheme.of(context).changeTheme();

How to get your app current theme

Current app ThemeMode

ThemeMode themeMode = EasyDynamicTheme.of(context).themeMode;

这将返回一个枚举值，对应于MaterialApp的ThemeMode，有以下几种可能：

• system：根据用户在系统设置中的选择使用浅色或深色主题。
• light：始终使用浅色模式，不考虑系统偏好。
• dark：始终使用深色模式（如果有），不考虑系统偏好。

Current Context brightness

Brightness brightness = Theme.of(context).brightness;

或者，如果你想判断你的widget是否基于深色模式，你可以这样做：

bool isDarkModeOn = Theme.of(context).brightness == Brightness.dark;

What about some out-of-the-box widgets?

目前我们有以下开箱即用的小部件：

• EasyDynamicThemeBtn：类似于FlatButton，根据应用当前主题显示图标，并允许你在它们之间切换。
• EasyDynamicThemeSwitch：基于上下文当前主题亮度的Switch小部件，允许你在浅色/深色主题之间切换。
• EasyDynamicThemeAutoSwitch：基于应用当前主题的Switch小部件，允许你优先（或不优先）操作系统定义的亮度。

以上是关于easy_dynamic_theme插件的完整介绍和使用方法，希望对您有所帮助！