深色模式(Dark Mode),也被称为暗黑模式,是一种高对比度,或者反色模式的显示模式,开启之后在夜间可以缓解疲劳,更易于阅读,同时也能在一定程度上达到省电的效果。iOS 和安卓分别从 iOS 13 和 Android 10(不同厂商不尽相同,部分 Android 9 也支持) 开始加入深色模式的支持,各大浏览器纷纷开始支持深色模式,强如微信也终于在 iOS 客户端 7.0.12、Android 客户端 7.0.13 支持了深色模式,等网页端适配深色模式后将更进一步提高用户体验的一致性。
Flutter 作为一个先进的跨平台框架,自然也考虑到了深色模式的使用,我在上一篇文章《Flutter 主题切换——让你的 APP 也能一键换肤》的结尾提到了Brightness brightness属性可用于适配跟随系统的 DarkMode,我们可以直接在MaterialApp的darkTheme选项中使用
MaterialApp( theme: ThemeData( brightness: Brightness.light, primaryColor: Colors.blue, ), darkTheme: ThemeData( brightness: Brightness.dark, ), ); 也可以写成:
darkTheme: ThemeData.dark() 这样写的好处是,用户无需单独设置深/浅色模式,完全根据系统设置来切换。
但白天不懂夜的黑,有的人就是喜欢一套深色主题用一天,这时就需要用户可以手动开启深色模式了。
我们先来看下实现的效果:
手动开启深色模式 其实思路和上一篇文章类似,通过shared_preferences保存用户设置,通过Provider实现状态管理,这两个依赖的使用我在上一篇文章中已经介绍了,这里就不多说了。详情点击 👉Flutter 主题切换——让你的 APP 也能一键换肤。
添加依赖 我们在pubspec.yaml文件中添加如下内容:
provider: ^4.0.5 flustars: ^0.2.6+1 深色模式状态管理类 import 'package:flustars/flustars.dart'; import 'package:flutter/material.dart'; import 'package:flutterchallenge/constant.dart'; class DarkModeProvider with ChangeNotifier { /// 深色模式 0: 关闭 1: 开启 2: 随系统 int _darkMode; int get darkMode => _darkMode; void changeMode(int darkMode) async { _darkMode = darkMode; notifyListeners(); SpUtil.putInt(SpConstant.DARK_MODE, darkMode); } } 我们通过changeMode()函数来进行模式的切换,其中notifyListeners();用于通知顶层容器状态的变化,SpUtil.putInt(SpConstant.DARK_MODE, darkMode);用于保存用户设置。
...