快速適配 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/…