已有Flutter项目如何支持鸿蒙系统背景 现在越来越多的项目使用Flutter来做跨平台开发。可以同时支持iOS和安卓

背景

现在越来越多的项目使用Flutter来做跨平台开发。比如我们的FanbookApp，同时支持iOS和安卓客户端， 目前95%以上的代码都是使用Dart来开发的，另外5%是一些原生插件支持，比如图片选择器、拍照、数据库等，使用了ObjectC,Java开发。随着鸿蒙纯血原生系统的推进，有越来越多的应用都在紧锣密鼓的研发支持鸿蒙系统的客户端，当然也包括我们的Fanbook项目。

在技术调研过程中，发现了OpenHarmony SIG组织，用于孵化OpenHarmony相关开源生态项目，他们在很早就开始推进Flutter支持鸿蒙系统的工作。目前项的仓库地址。该仓库是基于Flutter SDK对于OpenHarmony平台的兼容拓展，可支持IDE或者终端使用Flutter Tools指令编译和构建OpenHarmony应用程序。既然这样，我们就没必要使用ArkTs、ArkUI来从零开始研发鸿蒙系统应用。

开整

先定个基调，把原有Flutter项目，新增支持鸿蒙系统，其实比想象简单。

配置Flutter环境

下载OpenHarmony 组织提供的Flutter仓库

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

clone下载完成之后，可以切换到master或者dev分支， dev更新会及时些，现阶段可以作为学习分支。

然后配置环境变量

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

在终端输入命令行 flutter doctor -v， 如果检查成功则代表针对鸿蒙系统的Flutter环境配置没问题。

下载鸿蒙开发工具DevEco Studio, 这个之前的文章提过了，不再多说。

环境搭建好，话不多说，开始写代码

开始实操

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

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

clone成功之后，使用Android Studio打开项目。

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

flutter create --platforms ohos,ios,android flutter_shuqi
cd flutter_shuqi

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

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

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

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

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

1. 开始自动签名

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

1. 再次flutter run

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

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

解决页面空白

1. 修改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写的第三方库可以直接使用，也无需适配。当然还会有一些其他的问题，比如鸿蒙没有覆写的第三方插件库，还有一些鸿蒙系统专属特性，这就需要我们自己去写一些鸿蒙原生代码，但是其实难度也不高。