Flutter適配深色模式（DarkMode）：看！你要的黑是這個黑嗎？

1.原由

最近在作適配深色模式（DarkMode），也能夠說是實現夜間模式的功能。

相信許多iOS的同窗最近都比較關注，畢竟iOS 13上個月推送更新了。

說適配的緣由是由於在iOS 13 和 Android 10系統上它都屬於新特性。適配的目的是爲了達到應用的主題隨着系統主題模式的切換而變化，給用戶更好的一致性體驗。與它相似的就是系統語言的設置，當系統設置某種語言時，應用內的文字也相應變化。

好在Flutter也提供了適配的入口，使得咱們能夠一次適配兩個平臺。我手上的小米mix2s雖然是Android 9 的，沒想到也能適配。

2.準備工做

首先是規範問題，標題、副標題、分割線、各類背景等顏色，以及深色模式下相對應的顏色必定要先規範起來。不然你本身不只被這些顏色搞得眼冒金星，同時應用也沒有一個統一的風格。

###3.適配開始

1.全局調整

Flutter 在 MaterialApp中提供了theme 與 darkTheme兩個入口讓咱們設置兩種模式下的顏色及文字樣式。接收的ThemeData中近乎涵蓋了全部Material Widget中所使用的顏色及主題。（Cupertino系列組件官方還在適配中，因此Flutter版本1.9.1暫不支持。）

經過配置theme 與 darkTheme可讓咱們省去不少的判斷代碼，好比個人分割線在不一樣模式下是兩種不一樣顏色，我不可能每使用一次，就在使用的地方去判斷一次。經過配置全局dividerTheme，咱們就能夠直接使用Divider()或者BorderSide。

ThemeData(
         dividerTheme: DividerThemeData(
            color: isDarkMode ? Colours.dark_line : Colours.line,
            space: 0.6,
            thickness: 0.6
         )
       );

一樣咱們的頁面背景色、文字樣式均可以這樣配置。如下就是deer中最終整理的配置。

ThemeData(
  errorColor: isDarkMode ? Colours.dark_red : Colours.red,
  brightness: isDarkMode ? Brightness.dark : Brightness.light,
  primaryColor: isDarkMode ? Colours.dark_app_main : Colours.app_main,
  accentColor: isDarkMode ? Colours.dark_app_main : Colours.app_main,
  // Tab指示器顏色
  indicatorColor: isDarkMode ? Colours.dark_app_main : Colours.app_main,
  // 頁面背景色
  scaffoldBackgroundColor: isDarkMode ? Colours.dark_bg_color : Colors.white,
  // 主要用於Material背景色
  canvasColor: isDarkMode ? Colours.dark_material_bg : Colors.white,
  // 文字選擇色（輸入框複製粘貼菜單）
  textSelectionColor: Colours.app_main.withAlpha(70),
  textSelectionHandleColor: Colours.app_main,
  textTheme: TextTheme(
    // TextField輸入文字顏色
    subhead: isDarkMode ? TextStyles.textDark : TextStyles.text,
    // Text默認文字樣式
    body1: isDarkMode ? TextStyles.textDark : TextStyles.text,
    // 這裏用於小文字樣式
    subtitle: isDarkMode ? TextStyles.textDarkGray12 : TextStyles.textGray12,
  ),
  inputDecorationTheme: InputDecorationTheme(
    hintStyle: isDarkMode ? TextStyles.textHint14 : TextStyles.textDarkGray14,
  ),
  appBarTheme: AppBarTheme(
    elevation: 0.0,
    color: isDarkMode ? Colours.dark_bg_color : Colors.white,
    brightness: isDarkMode ? Brightness.dark : Brightness.light,
  ),
  dividerTheme: DividerThemeData(
    color: isDarkMode ? Colours.dark_line : Colours.line,
    space: 0.6,
    thickness: 0.6
  )
);

使用：

MaterialApp (
  title: 'Flutter Deer',
  theme: getTheme(),
  darkTheme: getTheme(isDarkMode: true),
  home: TestPage()
);

固然有些Widget沒有使用到，因此也就沒有去適配。以上這些color、theme具體的使用地方須要本身去翻看源碼及註釋才能知道，因此這是一個比較費力的過程。

其實這裏你也能夠利用某些「坑位」，好比應用內的另一種功能文字在字號、顏色上都與主文字不同，使用的地方還不少，每次使用再判斷也很麻煩，這樣就能夠設置到未使用的屬性上，好比上面代碼中的subtitle。這樣使用時就能夠經過調用Theme.of(context).textTheme.subtitle來實現。

Text(
  "僅保留不一樣信息",
  style: const TextStyle(
    fontSize: 12.0,
  )
)

須要注意的是：畢竟是全局配置，儘可能保持通用，不要影響其餘widget也是要考慮的地方。

這部分配置完成後，你須要的是"去同存異"。

好比你指定的文字樣式與全局配置相同時，就須要刪除它。

若是文字顏色相同，可是字號不一樣。那就刪除顏色配置信息，保留字號設置：

Text(
  "僅保留不一樣信息",
  style: const TextStyle(
    fontSize: 12.0,
  )
)

由於Text的源碼中就是經過merge方法來合併全局配置與局部配置。merge中其實就是調用copyWith來實現的。因此也能夠這樣寫：

Text(
  "僅保留不一樣信息",
  style: Theme.of(context).textTheme.body1.copyWith(fontSize: 12.0)
)

顏色不一樣。由於深色模式主要就是顏色變化，因此能夠考慮上面的「subtitle」方案。若是僅有幾處，能夠封裝一些方法統一判斷處理。
2.局部調整
在通過全局的配置後，大多數適配問題獲得瞭解決。但可能還有一些細節要調整，好比圖標、個別的文字顏色、背景色。這時須要的就是如何判斷深色模式：

bool isDarkMode(BuildContext context){
    return Theme.of(context).brightness == Brightness.dark;
  }

這裏的brightness就是上面在全局配置ThemeData中指定的brightness。

Tips:

有些純色的小圖標能夠直接使用Image.asset的color來修改。

Button的 textColor屬性最好仍是局部處理，由於源碼中「非黑即白」，我很痛苦啊！

/// The foreground color of the [button]'s text and icon.
  ///
  /// If [button] is not [MaterialButton.enabled], the value of
  /// [getDisabledTextColor] is returned. If the button is enabled and
  /// [buttonTextColor] is non-null, then [buttonTextColor] is returned.
  ///
  /// Otherwise the text color depends on the value of [getTextTheme]
  /// and [getBrightness].
  ///
  ///  * [ButtonTextTheme.normal]: [Colors.white] is used if [getBrightness]
  ///    resolves to [Brightness.dark]. [Colors.black87] is used if
  ///    [getBrightness] resolves to [Brightness.light].
  ///  * [ButtonTextTheme.accent]: [colorScheme.secondary].
  ///  * [ButtonTextTheme.primary]: If [getFillColor] is dark then [Colors.white],
  ///    otherwise if [button] is a [FlatButton] or an [OutlineButton] then
  ///    [colorScheme.primary], otherwise [Colors.black].
  Color getTextColor(MaterialButton button) {
    if (!button.enabled)
      return getDisabledTextColor(button);

    if (button.textColor != null)
      return button.textColor;

    switch (getTextTheme(button)) {
      case ButtonTextTheme.normal:
        return getBrightness(button) == Brightness.dark ? Colors.white : Colors.black87;

      case ButtonTextTheme.accent:
        return colorScheme.secondary;

      case ButtonTextTheme.primary: {
        final Color fillColor = getFillColor(button);
        final bool fillIsDark = fillColor != null
          ? ThemeData.estimateBrightnessForColor(fillColor) == Brightness.dark
          : getBrightness(button) == Brightness.dark;
        if (fillIsDark)
          return Colors.white;
        if (button is FlatButton || button is OutlineButton)
          return colorScheme.primary;
        return Colors.black;
      }
    }

    assert(false);
    return null;
  }

補充：

若是啓動頁須要適配的話，要考慮應用啓動時短暫的白屏現象。（好比啓動時白屏，啓動頁爲黑色背景，這樣會不和諧）最優的方式是使用Android、iOS原生的方式處理應用啓動與啓動頁的過渡。

這裏我介紹一下簡易版的方式：

Android端：

android -> app -> src -> main -> res 目錄下新建 drawable-night 文件夾，添加launch_background.xml文件。

<?xml version="1.0" encoding="utf-8"?>
<!-- Modify this file to customize your launch splash screen -->
<layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item >
        <color android:color="#FF18191A"/> <-- 具體的顏色色值
    </item>
</layer-list>

這樣在深色模式下，會使用對應的顏色背景。（固然要保證你的默認樣式使用到了此文件）

iOS端：

修改Background 爲 System Background Color：

###3.功能拓展
若是你適配好了深色模式，其實能夠稍微拓展一下這個功能。我想到了微信中的多語言功能，在多語言這類功能中，默認選項是「跟隨系統」，固然你也能夠指定某種語言。

按照這個思路我在設置中添加了「夜間模式」的功能，默認也是跟隨系統，固然你也能夠手動的開啓和關閉。

這裏暫時有個問題，在iOS手機上開啓深色模式，當我應用內關閉深色模式後，狀態欄文字沒法變爲黑色。

問題主要仍是Flutter 1.9.1的版本並無適配iOS 13 Status Bar增的UIStatusBarStyleDarkContent 。

這個問題Flutter的issues中也有人反饋了，期待官方的適配修復吧。

上述這些，基本就是適配深色模式主要內容了。自己沒有什麼複雜的，主是是個細心活。

說了這麼多，最後放幾張適配的效果圖給你們看看：

如今不少公司項目都在用flutter，站坑邊的朋友不要猶豫了，來玩玩耶挺好的。

能夠貢獻一套Flutte學習視頻，私信我領取，也能夠分享出去一塊兒學習

最後但願能夠點贊支持一波！！！