已有Flutter项目如何支持鸿蒙系统

背景

开整

配置Flutter环境

git clone https://gitee.com/openharmony-sig/flutter_flutter.git

export PATH="$PATH":"/pathtoflutter/bin"

开始实操

在github随便找了一个项目为例， 还行先把项目clone下来

git clone https://github.com/jayden320/flutter_shuqi
cd flutter_shuqi

在一个空白目录执行以下命令，创建一个同名的项目

flutter create --platforms ohos,ios,android flutter_shuqi

cd flutter_shuqi

进入新项目的目录，发现多了一个鸿蒙系统代码的文件夹，然后把这个ohos复制到第一步clone下来的目录

再回到第一步使用Android Studio打开的项目，可以发现多了一个ohos文件夹。

链接鸿蒙系统真机或者模拟器，执行flutter run

可能有些伙伴会有疑问，为什么把文件夹复制过来就可以正常运行了，那是因为我们目前使用的是鸿蒙提供了Flutter， 他们对Flutter Tools进行了修改，当使用flutter pub get、flutter run等命令。这些命令行的内部已经帮我们做了这些事情，他会去自动查找ohos目录，并生成相应的代码和.har包，从而确保可以支持鸿蒙系统。

这个时候，正常会报签名错误。看下面的截图可以发现，修复方式，就是使用DevDco Studio打开flutter_shuqi/ohos项目就行自动化签名即可。

开始自动签名

进入下面的操作面板，使用自己华为开发者账号登录之后勾选自动生成签名即可。

再次flutter run

签名成功之后在回到Android Stuido，再链接鸿蒙系统真机flutter run。这就说明已经成功跑起来了。

正常情况下会遇到一些问题，导致项目可以在鸿蒙系统上跑起来，但是显示空白。

解决页面空白

修改environment中的sdk版本

因为OpenHarmony SIG是基于Flutter 3.7.12版本修改的，如果有些项目中使用了更高的版本，需要修改pubspec.yaml文件，把sdk环境最低版本降到2.19.6以下就行。

environment:
sdk: '>=2.17.0 <3.0.0'

2. ### 如何判断是鸿蒙系统

import 'dart:io';

static bool get isOHOS => Platform.operatingSystem == "ohos" 

3. ### 第三方库没有支持鸿蒙系统，怎么办？

比如常见的shared_preferences,device_info,path_provider,这些库一般的Flutter项目都会使用,所以OpenHarmony SIG组织已经对这些库做了一些支持。大家可以点击查看。

然后如下方式进行修改就行。修改完了之后执行 flutter pub get更新本地代码。

改了上面的shared_preferences库，就可以正常进入项目了，不过显示图片还有点问题。

图片显示不出来，一般都是path_provider的问题，因为图片需要缓存到本地沙盒，相应改一下就行，不过有时候，有些库相互引用，导致修改比较麻烦，好在Flutter提供了提供了dependency_overrides方式，可以覆盖第三方库的最终地址。里面覆盖了path_provider、package_info_plus、permission_handler、device_info_plus、connectivity_plus。这些库都是鸿蒙开源组织已经修改好了的。

dependency_overrides:
path_provider:
git:
url: https://gitee.com/openharmony-sig/flutter_packages.git
path: "packages/path_provider/path_provider"
package_info_plus:
git:
url: https://gitee.com/openharmony-sig/flutter_plus_plugins.git
path: packages/package_info_plus/package_info_plus
ref: a1347adcca3a46346a6ddd127cebcec9970cad6c
permission_handler:
git:
url: https://gitee.com/openharmony-sig/flutter_permission_handler.git
path: permission_handler
device_info_plus:
git:
url: https://gitee.com/openharmony-sig/flutter_plus_plugins.git
path: packages/device_info_plus/device_info_plus
ref: a1347adcca3a46346a6ddd127cebcec9970cad6c
connectivity_plus:
git:
url: https://gitee.com/openharmony-sig/flutter_plus_plugins
path: packages/connectivity_plus/connectivity_plus
ref: a1347adcca3a46346a6ddd127cebcec9970cad6c

flutter pub get之后，再次运行，基本上就可以使用。本来想放视频演示下，结果上传视频比较麻烦，就截了视频里面的几张图片，可以大致看看效果。想自己跑的话，下文也把源码push到gitee了。

支持鸿蒙的仓库已经提交到该地址。感谢原作者，我拿过来只是为了演示项目。

总结

大概花了不到半天的时间，就可以把一个已有的Flutter项目来支持原生鸿蒙系统，这个迁移成本还是不太高的，对于一些纯Dart写的第三方库可以直接使用，也无需适配。当然还会有一些其他的问题，比如鸿蒙没有覆写的第三方插件库，还有一些鸿蒙系统专属特性，这就需要我们自己去写一些鸿蒙原生代码，但是其实难度也不高。