Flutter適配深色模式的方法（DarkMode）

來源：本站原創(chuàng)|時間：2020-01-10|欄目：Android|點擊：次

1.瞎叨叨

也不知道寫點什么，本來想寫寫Flutter的集成測試。因為前一陣子給flutter_deer寫了一套，不過感覺也沒啥內容，寫不了幾句話就放棄了。(其實本篇內容也不多。。。)

那就寫寫最近在做的事情。沒錯，就是文章標題提到的適配深色模式（DarkMode），也可以說是實現(xiàn)夜間模式的功能。相信許多iOS的同學最近都比較關注，畢竟iOS 13上個月推送更新了。

說適配的原因是因為在iOS 13 和 Android 10系統(tǒng)上它都屬于新特性。適配的目的是為了達到應用的主題隨著系統(tǒng)主題模式的切換而變化，給用戶更好的一致性體驗。與它類似的就是系統(tǒng)語言的設置，當系統(tǒng)設置某種語言時，應用內的文字也相應變化。

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

2.準備工作

下面我就說說我在適配 flutter_deer 中的經驗， Flutter版本1.9.1。

首先是規(guī)范問題，標題、副標題、分割線、各種背景等顏色，以及深色模式下相對應的顏色一定要先規(guī)范起來。否則你自己不僅被這些顏色搞得眼冒金星，同時應用也沒有一個統(tǒng)一的風格。

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 來實現(xiàn)。

Text(
 "文字", 
 style: Theme.of(context).textTheme.subtitle
)

需要注意的是：畢竟是全局配置，盡量保持通用，不要影響其他widget也是要考慮的地方。

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

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

如果文字顏色相同，但是字號不同。那就刪除顏色配置信息，保留字號設置：

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

因為Text的源碼中就是通過 merge 方法來合并全局配置與局部配置。 merge 中其實就是調用 copyWith 來實現(xiàn)的。所以也可以這樣寫：

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

顏色不同。因為深色模式主要就是顏色變化，所以可以考慮上面的“subtitle”方案。如果僅有幾處，可以封裝一些方法統(tǒng)一判斷處理。

2.局部調整

在經過全局的配置后，大多數適配問題得到了解決。但可能還有一些細節(jié)要調整，比如圖標、個別的文字顏色、背景色。這時需要的就是如何判斷深色模式：

 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;
 }

3.功能拓展

如果你適配好了深色模式，其實可以稍微拓展一下這個功能。我想到了微信中的多語言功能，在多語言這類功能中，默認選項是“跟隨系統(tǒng)”，當然你也可以指定某種語言。

按照這個思路我在設置中添加了“夜間模式”的功能，默認也是跟隨系統(tǒng)，當然你也可以手動的開啟和關閉。

這里暫時有個問題，在iOS手機上開啟深色模式，當我應用內關閉深色模式后，狀態(tài)欄文字無法變?yōu)楹谏?/p>

問題主要還是Flutter 1.9.1的版本并沒有適配iOS 13 Status Bar增的UIStatusBarStyleDarkContent 。

這里暫時有個問題，在iOS手機上開啟深色模式，當我應用內關閉深色模式后，狀態(tài)欄無法變?yōu)楹谏?。這個問題Flutter的issues中也有人反饋了，期待官方的適配修復吧。

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

說了這么多，最后放幾張適配的效果圖給大家看看：

詳細的代碼以及實現(xiàn)細節(jié)，可以參看flutter_deer 的代碼。深色模式相關的設計圖也已經同步更新了。希望對大家的學習有所幫助，也希望大家多多支持我們。

上一篇：Android使用MediaCodec將攝像頭采集的視頻編碼為h264

欄目：Android

下一篇：Android MediaPlayer 音頻倍速播放調整播放速度問題