Flutter Dark Mode 在 OpenHarmony 系统中的适配实践

欢迎加入开源鸿蒙跨平台社区：
https://openharmonycrossplatform.csdn.net

Flutter Dark Mode 在 OpenHarmony 系统中的适配实践

前言

最近在做 Flutter for OpenHarmony 项目时，深色模式适配这块花的时间比我预想中要多。

一开始我以为：

Flutter 本身已经支持 ThemeMode 了，适配暗黑模式应该不复杂。

结果真正接入 OpenHarmony 真机之后，还是遇到了一堆细节问题。

包括：

• 系统深色模式切换后页面不更新
• 部分组件颜色异常
• 状态栏颜色不统一
• 页面切换时闪白
• 图片资源不适配暗色主题

尤其是多个页面叠加后，颜色管理会越来越乱。

后面我重新整理了一套主题管理方案，整体体验才稳定下来。

这篇文章主要记录一下我这次在 OpenHarmony 项目里的 Dark Mode 适配过程。

一、为什么现在必须适配 Dark Mode

现在大部分系统都已经默认支持深色模式。

包括：

• Android
• iOS
• OpenHarmony

如果应用完全不适配：

用户体验会比较割裂。

尤其晚上使用时：

亮白页面会特别突兀。

我项目里的实际场景

当前项目包括：

• 首页
• 商品列表
• IM 聊天
• 用户中心
• WebView 页面

很多页面一开始都是直接写死颜色：

Container( color: Colors.white, )

结果系统切暗黑模式后：

页面直接“半黑半白”。

二、Flutter ThemeMode 基础接入

Flutter 本身已经提供了主题切换方案。

MaterialApp 配置

MaterialApp( theme: lightTheme, darkTheme: darkTheme, themeMode: ThemeMode.system, )

这里：

ThemeMode.system

表示：

跟随系统主题。

三、浅色主题与深色主题拆分

后面我把所有主题单独拆了。

light_theme.dart

final ThemeData lightTheme = ThemeData( brightness: Brightness.light, scaffoldBackgroundColor: Colors.white, appBarTheme: const AppBarTheme( backgroundColor: Colors.white, ), );

dark_theme.dart

final ThemeData darkTheme = ThemeData( brightness: Brightness.dark, scaffoldBackgroundColor: Colors.black, appBarTheme: const AppBarTheme( backgroundColor: Colors.black, ), );

这样后面维护会轻松很多。

四、不要直接写死颜色

这个是我这次适配里踩得最多的坑。

之前的代码

Text( "用户信息", style: TextStyle( color: Colors.black, ), )

暗黑模式下：

文字直接看不见。

后来的方案

统一改成：

Text( "用户信息", style: TextStyle( color: Theme.of(context) .colorScheme .onBackground, ), )

或者：

Theme.of(context).textTheme

统一从主题读取颜色。

后面适配会轻松很多。

五、OpenHarmony 上的一个实际问题

这个问题我在鸿蒙真机上复现得挺明显。

问题现象

系统已经切成暗黑模式。

但 Flutter 页面：

没有实时更新。

需要：

• 重启应用
• 或重新进入页面

主题才生效。

后来的处理方式

监听页面亮度变化。

WidgetsBindingObserver

监听：

didChangePlatformBrightness()

@override void didChangePlatformBrightness() { final brightness = WidgetsBinding.instance .platformDispatcher .platformBrightness; print(brightness); }

然后主动更新 ThemeMode。

这个在 OpenHarmony 上会稳定很多。

六、状态栏颜色适配

这个问题很多人容易忽略。

问题

页面已经切暗色。

但状态栏：

还是黑字。

结果顶部直接看不清。

解决方案

SystemChrome.setSystemUIOverlayStyle( const SystemUiOverlayStyle( statusBarColor: Colors.transparent, statusBarIconBrightness: Brightness.light, ), );

浅色模式：

Brightness.dark

深色模式：

Brightness.light

这个在 OpenHarmony 真机里效果挺明显。

七、图片资源适配

这个也是后面项目里很容易出问题的地方。

问题

深色模式下：

原本的黑色图标直接“消失”。

例如：

• 返回按钮
• tab 图标
• 功能按钮

后来的方案

分别维护：

icon_dark.png icon_light.png

根据主题切换。

isDark ? "dark/icon.png" : "light/icon.png"

虽然麻烦一点。

但实际效果会好很多。

八、页面切换闪白问题

这个问题在 OpenHarmony 上我复现概率挺高。

问题现象

暗黑模式下：

页面 push/pop 时：

偶发白色闪屏。

原因

部分页面：

Scaffold

背景色没配置。

Flutter 默认会使用浅色背景。

解决方式

统一配置：

scaffoldBackgroundColor

同时：

页面不要直接：

Container(color: Colors.white)

这个优化后：

闪白问题减少很多。

九、Provider 管理主题状态

后面我把主题统一放到了 Provider。

ThemeProvider

class ThemeProvider extends ChangeNotifier { ThemeMode themeMode = ThemeMode.system; void changeTheme( ThemeMode mode) { themeMode = mode; notifyListeners(); } }

页面切换：

context .read<ThemeProvider>() .changeTheme( ThemeMode.dark, );

后面：

• 设置页
• 系统跟随
• 手动切换

都方便很多。

十、缓存主题状态

这个我建议一定做。

为什么

否则：

每次重新打开 App。

主题都会恢复默认。

我的方案

使用：

shared_preferences

保存：

await prefs.setString( "theme", "dark", );

启动时恢复。

目前在 OpenHarmony 上没发现问题。

十一、实际效果

优化前：

优化后：

目前这套方案已经在项目里稳定用了挺长时间。

十二、总结

这次做 Flutter Dark Mode 在 OpenHarmony 下的适配，一个比较明显的感受是：

深色模式真正麻烦的地方：

其实不是 ThemeMode。

而是：

• 全局颜色管理
• 页面细节统一
• 图标资源
• 状态栏
• 页面生命周期

尤其项目越来越大之后：

如果前期没有统一主题规范。

后面补 Dark Mode 会非常痛苦。

我现在项目里的原则基本是：

• 不直接写死颜色
• 所有颜色统一 Theme 管理
• 图标区分明暗资源
• 页面背景统一配置
• 状态栏跟随主题变化

整体体验会稳定很多。

后面我还准备继续研究：

• Material 3 动态主题
• OpenHarmony 系统主题同步
• Flutter 动态换肤
• 多主题架构设计

希望这篇文章能给正在做 Flutter for OpenHarmony 开发的同学一点参考。