Flutter适配深色模式（DarkMode）

最新推荐文章于 2024-05-24 09:47:20 发布

2301_82242499

最新推荐文章于 2024-05-24 09:47:20 发布

阅读量1.3k

点赞数 10

分类专栏：程序员文章标签： flutter 前端 javascript

本文链接：https://blog.csdn.net/2301_82242499/article/details/137547212

版权

程序员专栏收录该内容

179 篇文章 0 订阅

订阅专栏

// 文字选择色（输入框复制粘贴菜单）
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:

有些纯色的小图标可以直接使用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;
}

2020.01.01 补充：

如果启动页需要适配的话，要考虑应用启动时短暂的白屏现象。（比如启动时白屏，启动页为黑色背景，这样会不和谐）最优的方式是使用Android、iOS原生的方式处理应用启动与启动页的过渡。

这里我介绍一下简易版的方式：

Android端：

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

<?xml version="1.0" encoding="utf-8"?> <-- 具体的颜色色值

这样在深色模式下，会使用对应的颜色背景。（当然要保证你的默认样式使用到了此文件）

iOS端：

修改Background 为 System Background Color：

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传