小編給大家分享一下Flutter如何適配深色模式DarkMode，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

專注于為中小企業(yè)提供網(wǎng)站建設(shè)、成都做網(wǎng)站服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)金壇免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了近千家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。

1.起因

最近在做適配深色模式（DarkMode），也可以說(shuō)是實(shí)現(xiàn)夜間模式的功能。

相信許多iOS的同學(xué)最近都比較關(guān)注，畢竟iOS 13上個(gè)月推送更新了。

說(shuō)適配的原因是因?yàn)樵趇OS 13 和 Android 10系統(tǒng)上它都屬于新特性。適配的目的是為了達(dá)到應(yīng)用的主題隨著系統(tǒng)主題模式的切換而變化，給用戶更好的一致性體驗(yàn)。與它類似的就是系統(tǒng)語(yǔ)言的設(shè)置，當(dāng)系統(tǒng)設(shè)置某種語(yǔ)言時(shí)，應(yīng)用內(nèi)的文字也相應(yīng)變化。

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

2.準(zhǔn)備工作

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

3.適配開始

1.全局調(diào)整

Flutter 在 MaterialApp中提供了theme 與 darkTheme兩個(gè)入口讓我們?cè)O(shè)置兩種模式下的顏色及文字樣式。接收的ThemeData中近乎涵蓋了所有Material Widget中所使用的顏色及主題。（Cupertino系列組件官方還在適配中，所以Flutter版本1.9.1暫不支持。）

通過(guò)配置theme 與 darkTheme可以讓我們省去很多的判斷代碼，比如我的分割線在不同模式下是兩種不同顏色，我不可能每使用一次，就在使用的地方去判斷一次。通過(guò)配置全局dividerTheme，我們就可以直接使用Divider()或者BorderSide。

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

同樣我們的頁(yè)面背景色、文字樣式都可以這樣配置。以下就是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,  // 頁(yè)面背景色
  scaffoldBackgroundColor: isDarkMode ? Colours.dark_bg_color : Colors.white,  // 主要用于Material背景色
  canvasColor: isDarkMode ? Colours.dark_material_bg : Colors.white,  // 文字選擇色（輸入框復(fù)制粘貼菜單）
  textSelectionColor: Colours.app_main.withAlpha(70),
  textSelectionHandleColor: Colours.app_main,
  textTheme: TextTheme(    // TextField輸入文字顏色
    subhead: isDarkMode ? TextStyles.textDark : TextStyles.text,    // Text默認(rèn)文字樣式
    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()
);

當(dāng)然有些Widget沒有使用到，所以也就沒有去適配。以上這些color、theme具體的使用地方需要自己去翻看源碼及注釋才能知道，所以這是一個(gè)比較費(fèi)力的過(guò)程。

其實(shí)這里你也可以利用某些“坑位”，比如應(yīng)用內(nèi)的另外一種功能文字在字號(hào)、顏色上都與主文字不一樣，使用的地方還很多，每次使用再判斷也很麻煩，這樣就可以設(shè)置到未使用的屬性上，比如上面代碼中的subtitle。這樣使用時(shí)就可以通過(guò)調(diào)用Theme.of(context).textTheme.subtitle來(lái)實(shí)現(xiàn)。

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

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

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

比如你指定的文字樣式與全局配置相同時(shí)，就需要?jiǎng)h除它。

如果文字顏色相同，但是字號(hào)不同。那就刪除顏色配置信息，保留字號(hào)設(shè)置：

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

因?yàn)門ext的源碼中就是通過(guò)merge方法來(lái)合并全局配置與局部配置。merge中其實(shí)就是調(diào)用copyWith來(lái)實(shí)現(xiàn)的。所以也可以這樣寫：

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

顏色不同。因?yàn)樯钌Ｊ街饕褪穷伾兓钥梢钥紤]上面的“subtitle”方案。如果僅有幾處，可以封裝一些方法統(tǒng)一判斷處理。
2.局部調(diào)整
在經(jīng)過(guò)全局的配置后，大多數(shù)適配問(wèn)題得到了解決。但可能還有一些細(xì)節(jié)要調(diào)整，比如圖標(biāo)、個(gè)別的文字顏色、背景色。這時(shí)需要的就是如何判斷深色模式：

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

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

Tips:

有些純色的小圖標(biāo)可以直接使用Image.asset的color來(lái)修改。

Button的 textColor屬性最好還是局部處理，因?yàn)樵创a中“非黑即白”，我很痛苦?。?/p>

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

補(bǔ)充：

如果啟動(dòng)頁(yè)需要適配的話，要考慮應(yīng)用啟動(dòng)時(shí)短暫的白屏現(xiàn)象。（比如啟動(dòng)時(shí)白屏，啟動(dòng)頁(yè)為黑色背景，這樣會(huì)不和諧）最優(yōu)的方式是使用Android、iOS原生的方式處理應(yīng)用啟動(dòng)與啟動(dòng)頁(yè)的過(guò)渡。

這里我介紹一下簡(jiǎn)易版的方式：

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>

這樣在深色模式下，會(huì)使用對(duì)應(yīng)的顏色背景。（當(dāng)然要保證你的默認(rèn)樣式使用到了此文件）

iOS端：

修改Background 為 System Background Color：

3.功能拓展

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

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

這里暫時(shí)有個(gè)問(wèn)題，在iOS手機(jī)上開啟深色模式，當(dāng)我應(yīng)用內(nèi)關(guān)閉深色模式后，狀態(tài)欄文字無(wú)法變?yōu)楹谏?/p>

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

這個(gè)問(wèn)題Flutter的issues中也有人反饋了，期待官方的適配修復(fù)吧。

上述這些，基本就是適配深色模式主要內(nèi)容了。本身沒有什么復(fù)雜的，主是是個(gè)細(xì)心活。

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

以上是“Flutter如何適配深色模式DarkMode”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

網(wǎng)站標(biāo)題：Flutter如何適配深色模式DarkMode
本文路徑：http://aaarwkj.com/article2/psoooc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供企業(yè)網(wǎng)站制作、網(wǎng)站策劃、軟件開發(fā)、營(yíng)銷型網(wǎng)站建設(shè)、品牌網(wǎng)站制作、Google

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)