快速适配 Flutter 之深色模式

深色模式（Dark Mode），也被称为暗黑模式，是一种高对比度，或者反色模式的显示模式，开启以后在夜间能够缓解疲劳，更易于阅读，同时也能在必定程度上达到省电的效果。iOS和安卓分别从 iOS 13 和 Android 10（不一样厂商不尽相同，部分 Android 9 也支持） 开始加入深色模式的支持，各大浏览器纷纷开始支持深色模式，强如微信也终于在 iOS 客户端 7.0.十二、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);用于保存用户设置。

修改MaterialApp

接下来咱们须要在顶层容器中配置咱们的状态管理类，和上文相似，这里一样使用了MultiProvider

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
      providers: [
        ChangeNotifierProvider.value(value: DarkModeProvider()),
      ],
      child: Consumer<DarkModeProvider>(
        builder: (context, darkModeProvider, _) {
          return darkModeProvider.darkMode == 2
              ? MaterialApp(
                  title: 'Flutter Demo',
                  theme: ThemeData(
                    primarySwatch: Colors.blue,
                  ),
                  darkTheme: ThemeData.dark(),
                  home: MyHomePage(title: 'Flutter Challenge Demo'),
                )
              : MaterialApp(
                  title: 'Flutter Demo',
                  theme: darkModeProvider.darkMode == 1
                      ? ThemeData.dark()
                      : ThemeData(
                          primarySwatch: Colors.blue,
                        ),
                  home: MyHomePage(title: 'Flutter Challenge Demo'),
                );
        },
      ),
    );
  }
}
复制代码

若是手动控制是否开启夜间模式，能够设置MaterialApp的theme选项为ThemeData.dark()

theme: ThemeData.dark()
复制代码

由于须要同时保留随系统自动切换与手动切换，而darkTheme选项和theme又有冲突，因此这里须要根据darkModeProvider.darkMode的取值来渲染不一样的MaterialApp，若是是手动模式再根据darkModeProvider.darkMode的取值来渲染不一样的theme。

选择深色模式

接下来若是想要切换深色模式，咱们只须要执行下面这行代码便可。

Provider.of<DarkModeProvider>(context, listen: false).changeMode(1);
复制代码

其中，0表示浅色，1表示深色，2表示跟随系统。

至此，本文内容结束，这里咱们头脑风暴一下，可否将上文中提到的主题选择和本文的深色模式结合起来呢？欢迎各位在评论区留言。

最后

这里说下最近遇到的一件很不痛快的事情，在以前的文章中，示例代码须要关注个人公众号才可得到，结果就被某我的评论说我割韭菜。

我不知道他是白嫖习惯了仍是怎么的，代码是我本身付出努力写的，从头至尾我就没说过代码是开源的，凭什么要平白无故给你白嫖代码？

说这些其实也是但愿看到这里的读者不要养成老是白嫖他人的习惯，若是以为个人文章对你有所帮助，不妨给个赞 👍 或者关注支持一下。

对了，本期的代码👉：github.com/YueYongDev/…