Flutter是基于主题构建的，因此处理OS级暗模式非常简单。但这不是那么简单。您还必须：
- 使自定义窗口小部件（或渐变或阴影之类的装饰）和非平台颤动窗口小部件（例如来自Google Maps的程序包）在所有主题中都可以接受。
- 确保自定义窗口小部件（或装饰）在用户更改设备上的主题时正确更新。
- 对于在较旧版本的操作系统上运行的用户以及更喜欢在单个应用程序上设置主题的用户，请进行适当的降级。
本文将讨论如何处理这些问题。我将提供示例代码。
本文中的信息来自许多来源，包括本文由马特-卡罗尔，这也解释了颤如何支持深色模式本身在Android上。我希望在iOS 13发布后不久，即可在iOS上获得本机支持。它还包括Matthias Schuyten的这篇文章中的信息，其中详细介绍了如何设置Flutter Google Maps Plugin地图的样式。
黑暗模式就在这里；您的应用必须调整
iOS和Android的最新版本均具有暗模式。在测试为家人编写的Android / iOS NYC公交应用程序时，我不得不处理黑暗模式。当我第一次编写它时，系统范围内的暗模式并不是什么问题，而该应用程序是海洋或明亮的色彩。虽然该应用程序在iPhone和Android上均可正常运行，但在暗模式下的手机上使用该应用程序却令人震惊，尤其是在夜间户外。尽管Flutter进行了自动更新以支持暗模式的应用程序，但外部包装和自定义组件并不容易。在这种情况下，扑朔迷离的Google Maps包不会（也不应）通过平台级主题更改自动切换主题。应用程序中的彩色小部件需要针对不同的模式进行一些其他的重新设计。
除非您的应用是单色的，否则处理浅色或深色主题会很棘手，尤其是在彩色背景下的文本。请记住，当用户选择深色主题时，他们希望所有主要元素都变暗，而所有对比元素（例如文本和图标）都变亮。添加颜色使其变得棘手。我怀疑这就是Google移除应用程序所有品牌着色的原因（例如，中等深红色，＃D44638和深红色辅助口音＃B23121表示gmail），这是支持深色模式的第一步。将文本保持黑色以切换为浅色主题会产生难以阅读的标题：
让我们从确定暗模式对我们的应用程序的工作开始。我认为最好从一个角度进行研究：哪种方法最适合我们的用户？
应该如何运作？
除非用户特别关心，否则这不是您的用户应该考虑的事情；它应该易于理解和以他们期望的方式工作；并且应该隐藏任何复杂的逻辑。我们有一个适用于Google日历等生产应用程序的模型：主题首选项交叉的最简单版本很清楚：LIGHT，DARK和SYSTEM，默认为system。
我建议默认为系统有以下三个原因。首先，大多数关心明暗模式的用户已经使用该系统选择了首选模式。用户的默认首选项已定义。其次，对于有选择权而又不在乎的用户，系统的其他每个部分都使用系统值（通常为灯光模式）。第三，在不支持亮/暗主题的较旧版本的OS上运行时，它的作用与其他应用一样。
我们如何实现呢？让我们看一些Flutter代码。
（在Android上）暗模式已经可以在Flutter中工作
但是，您必须做一些工作才能启用它。如果在应用程序中使用MaterialApp类，则允许您自定义明暗主题作为应用程序定义的一部分。这些主题将链接到系统的明/暗模式设置。
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'App title',
theme: ThemeData(),
darkTheme: ThemeData.dark(),
home: MyHomePage(),
);
}
您可以自定义每个主题的颜色和字体：
Widget build(BuildContext context) {
return MaterialApp(
title: 'BusWatch',
theme: ThemeData(
brightness: Brightness.light,
primarySwatch: Colors.orange,
),
darkTheme: ThemeData(
brightness: Brightness.dark,
primarySwatch: Colors.orange
),
home: MyHomePage(),
);
}
如您所见，您可以根据需要修改默认主题，Flutter窗口小部件将进行自我更新以匹配系统。但这对自定义和自定义窗口小部件没有帮助。如果我们有一个带有深红色背景的小部件，并且在其顶部有一个文本小部件，该怎么办？当用户选择灯光模式时，默认的黑色文本将变得不可读。我们如何知道用户选择了什么亮度？
查询系统亮度
如果用户使用的是最新版本的Android，iOS或Fuschia，则我们想知道设备在平台级别上显示的主题。最安全的方法是使用上下文的媒体查询数据。如果返回Brightness.dark，则表示选择了暗模式。
final Brightness brightnessValue = MediaQuery.of(context).platformBrightness;
bool isDark = brightnessValue == Brightness.dark;
如果要查询该级别的值，也可以直接从系统窗口获取平台亮度。您可以使用类似于以下代码
Window window = WidgetsBinding.instance.window;
（您永远不必真正执行此操作。如果您发现自己直接使用Window，则可能是做错了，还有一种更好的方法可以简化模拟和无头测试。在这种情况下，您可能应该使用MediaQuery。）
您可以在小部件初始化上检查并适当设置小部件值。但是，当用户更改为亮或暗模式（或者它在预定的时间自动发生，例如日落）时该怎么办？大多数小部件都会自动处理这些问题，但是您的自定义组件又如何，例如嵌入式地图或将不会更新的自定义装饰呢？他们怎么知道什么时候更新？
监听黑暗模式的变化
我们通常必须在应用程序的主要部分中，在平台级别上亲自听取主题更改。您可以在有状态的小部件中使用WidgetsBinding，该小部件将抽象的WidgetsBindingObserver子类化（作为混合）。
WidgetsBinding使您可以钩住通常的窗口小部件生命周期方法之外的更改，例如旋转电话或用户更改设备字体大小（例如，将手机交给需要较大字体的亲戚）。对于这种情况，它为平台亮度的变化提供了一个契机。您将小部件添加为initState（）中的侦听器。当通过覆盖dispose（）从窗口小部件树中永久删除窗口小部件的状态对象时，这确实需要释放引用。例如：
class _MyHomePageState extends State<MyHomePage> with WidgetsBindingObserver {
@override
void initState() {
super.initState();
WidgetsBinding.instance.addObserver(this);
}
@override
void dispose() {
WidgetsBinding.instance.removeObserver(this);
super.dispose();
}
@override
void didChangePlatformBrightness() {
final Brightness brightness =
WidgetsBinding.instance.window.platformBrightness;
//inform listeners and rebuild widget tree
}
Flutter的小部件会自动运行，我们可以安全地设置自定义小部件的值。但是外部小部件呢？我们如何定制它们？我将使用一个常见的软件包：Google Maps for Flutter。
在嵌入式Google地图中实现暗模式
Flutter最大的优势之一就是其开放的，受支持的软件包系统。通常，每种需求都有编写良好且维护良好的软件包。最好的之一（我已经在包括该项目在内的多个项目中使用过）是google maps软件包。默认的地图视图非常明亮，不会自动更新为主题更改。幸运的是，地图允许主题化。可以在这里找到关于这方面的优秀文章。
Google提供了一个主题化网络工具，可在https://mapstyle.withgoogle.com/上生成地图主题。
我使用该工具生成默认的明暗地图主题。地图使用json格式保存地图样式。您可以使用浮动资产加载实时加载地图定义。
首先，使用网络工具生成浅色和深色json样式的文件。将它们保存在资产文件夹中。您可以使用rootBundle将文件作为字符串加载：
@override
void initState() {
super.initState();
rootBundle.loadString('assets/dark_map_style.json').then((string) {
_darkMapStyle = string;
});
rootBundle.loadString('assets/normal_map_style.json').then((string) {
_normalMapStyle = string;
});
加载地图并设置地图控制器后（通过onMapCreated设置），您可以在构建地图小部件时安全地使用样式：
@override
Widget build(BuildContext context) {
bool isDark = MediaQuery.of(context).platformBrightness == Brightness.dark;
if (mapController != null ) {
if (isDark) {
mapController.setMapStyle(_darkMapStyle);
}
else {
mapController.setMapStyle(_normalMapStyle);
}
}
//...
现在，地图会动态更新其样式以匹配系统。
因此，我们已负责更新应用程序以匹配设备的主题。但是，想要独立于系统设置应用程序主题的用户或使用旧版本操作系统的用户呢？我们如何独立设置主题？
独立于系统更改主题
独立设置主题实际上是两个选择（暗/亮），是我上面提到的三个选择的子集。在这种情况下，简单的UI效果很好。
但是我们要保存用户在会话之间的选择。有几种方法可以从属性文件，sqlite或远程执行此操作。在设计时就考虑到了这种用例。我建议使用“ 共享首选项”插件。（我不会远程存储亮/暗模式首选项；它是每个设备的首选项。）
保存主题首选项
要使用共享首选项，请导入“首选项”插件并创建一种安全获取引用的方法，您可以在应用启动时实例化该引用（可能在主窗口小部件状态的initState（）中）。为主题值使用一个枚举。
其次，如果您想让系统主题更新的监听器，请定义一种方法来接收这些更新。在这种情况下，我使用了typedef PrefsListener。
在这种情况下，我关心的首选项是应用程序的主题：
static const String THEME_PREF = “AppTheme”;
然后，为其他类创建一个钩子，以侦听主题更新并注销（addListener（）和removeListener（））。
示例首选项实现如下：
import 'package:shared_preferences/shared_preferences.dart';
enum Themes {
DARK, LIGHT, SYSTEM
}
class Prefs {
static const Map<Themes, String> themes = {
Themes.DARK: "Dark", Themes.LIGHT : "Light", Themes.SYSTEM : "System"
};
Map<String, List<PrefsListener>> _listeners;
factory Prefs.singleton() {
return _instance;
}
static final Prefs _instance = Prefs._internal();
SharedPreferences _prefs;
bool _initialized = false;
static const String THEME_PREF = "AppTheme";
Prefs._internal() {
_listeners = Map<String, List<PrefsListener>>();
_getPrefs().then((prefs) {
_initialized = true;
for (String key in _listeners.keys) {
List<PrefsListener> listeners = _listeners[key];
if(listeners != null && listeners.isNotEmpty) {
Object value = prefs.get(key);
for (PrefsListener listener in listeners) {
listener(key, value);
}
}
}
});
}
void addListenerForPref(String key, PrefsListener listener) {
List<PrefsListener> list = _listeners[key];
if (list == null) {
list = List<PrefsListener>();
_listeners[key] = list;
}
list.add(listener);
}
Future<SharedPreferences> _getPrefs() async {
if (_prefs == null) {
_prefs = await SharedPreferences.getInstance();
}
return _prefs;
}
String getTheme() {
if (_initialized) {
String theme = _prefs.getString(THEME_PREF);
if (theme != null) {
return theme;
}
else {
_prefs.setString(THEME_PREF, themes[Themes.SYSTEM]); //ok not to wait
return themes[Themes.SYSTEM];
}
}
else {
return themes[Themes.SYSTEM];
}
}
//called when the user updates the operating system theme
//(by choosing light or dark mode)
void systemThemeUpdated(Brightness brightness) {
if (isSystemTheme()) {
String theme = getTheme();
List<PrefsListener> listenerList = _listeners[THEME_PREF];
if (listenerList != null) {
for (PrefsListener listener in listenerList) {
listener(THEME_PREF, theme);
}
}
}
}
///set the app's theme preference from the
///app's own UI
void setTheme(String theme) {
_getPrefs().then((prefs) {
prefs.setString(THEME_PREF, theme);
});
List<PrefsListener> listenerList = _listeners[THEME_PREF];
if (listenerList != null) {
for (PrefsListener listener in listenerList) {
listener(THEME_PREF, theme);
}
}
}
}
typedef PrefsListener(String key, Object value);
翻译自：https://medium.com/@pmutisya/dark-mode-in-flutter-3742062f9f59
网友评论