怎么在Flutter中适配深色模式

本篇文章给大家分享的是有关怎么在Flutter中适配深色模式，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。

成都创新互联公司服务项目包括兴安盟乌兰浩特网站建设、兴安盟乌兰浩特网站制作、兴安盟乌兰浩特网页制作以及兴安盟乌兰浩特网络营销策划等。多年来，我们专注于互联网行业，利用自身积累的技术优势、行业经验、深度合作伙伴关系等，向广大中小型企业、政府机构等提供互联网行业的解决方案，兴安盟乌兰浩特网站推广取得了明显的社会效益与经济效益。目前，我们服务的客户以成都为中心已经辐射到兴安盟乌兰浩特省份的部分城市，未来相信会继续扩大服务区域并继续获得客户的支持与信任！

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: Theme.of(context).textTheme.subtitle
)

需要注意的是： 毕竟是全局配置，尽量保持通用，不要影响其他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:

1. 有些纯色的小图标可以直接使用 Image.asset 的 color 来修改。

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

以上就是怎么在Flutter中适配深色模式，小编相信有部分知识点可能是我们日常工作会见到或用到的。希望你能通过这篇文章学到更多知识。更多详情敬请关注创新互联行业资讯频道。