HarmonyOS next 之 Flutter 插件支持鸿蒙系统实践

问题

Flutter Plugin 主要用来桥接原生代码，调用原生系统 SDK， 比如拍照，选择相册，文件选择等。

目前 [pub.dev/]中的插件，都没有对鸿蒙系统的支持，不过鸿蒙现在也做了部分常用第三方插件的支持(例如：[gitee.com/openharmony…] 如果鸿蒙官方做了，我们可以直接使用，但是会存在不少插件，鸿蒙官方来不及做或者优先级比较低，但是我们的项目中又需要，这就要求我们要学会在已有插件的基础上新增支持鸿蒙系统原生代码。

搭建环境(macOS M2 为例)

下载鸿蒙支持的Flutter

下载结束之后切换到dev分支；鸿蒙针对 Flutter 的支持，是在基于的官方 Flutter 版本 3.7.12 上修改的，总体来说，这个版本稳定性比较高。然后就是配置 Flutter 命令行环境变量，把 Flutter 命令行指向鸿蒙支持的 Flutter 版本。保证在终端可以正常执行flutter doctor -v命令。

当然更加建议使用[fvm]来管理Flutter版本，可以把鸿蒙支持的 Flutter 版本代码 git clone 到fvm管理目录的versions文件夹下，并flutter_flutter改名为3.7.12-ohos

这样就可以直接使用fvm global 3.7.12-ohos 命令在切换本地不同的 Flutter 版本了

下载鸿蒙开发工具和配置环境变量

资源地址：[developer.huawei.com/consumer/cn…]

我这边目前下载的DevEco Studio版本是5.0.3.502, 大家可以下载最新版本就行。

commandline-tools(可选): commandline-tools-mac-arm64-5.0.3.404.zip， 最新的 DevEco 开发工具内部其实已经包含了 commandline-tools 工具集

配置环境变量

export TOOL_HOME=/Applications/DevEco-Studio.app/Contents # mac环境 export DEVECO_SDK_HOME=$TOOL_HOME/sdk # command-line-tools/sdk export PATH=$TOOL_HOME/tools/ohpm/bin:$PATH # command-line-tools/ohpm/bin export PATH=$TOOL_HOME/tools/hvigor/bin:$PATH # command-line-tools/hvigor/bin export PATH=$TOOL_HOME/tools/node/bin:$PATH # command-line-tools/tool/node/bin

如何在已有插件中新增鸿蒙系统支持

举一个例子，在 Flutter 中，我们想把图片保存到相册，一般会到这个库image_gallery_saver，现在我们期望这个库也支持在鸿蒙系统中把图片保存到相册中。

我这边建议使用以下步骤

fork 源码

fork 一下源码，fork 结束之后，代码就到自己账号下的仓库中，我操作结束之后的[地址]。

clone 到本地

git clone https://github.com/zingwin/image_gallery_saver

新增 ohos 插件

执行以下命令(不推荐)，表明在已存在的插件中新增鸿蒙系统。

flutter create -t plugin *--platforms ohos*

但是有些项目可能改过名或者以下配置，执行失败也没有关系，而且个人也不太建议按照以上方式新增插件，因为他会给 iOS 和 Android 也生成部分代码，以及插件接口代码，对之前的插件项目有一定程度的干扰，不嫌麻烦的话，直接删除也行。

【**推荐**】更推荐的做法是在一个空目录执行创建插件命令

flutter create -t plugin *--platforms ohos,ios,android image_gallery_saver*

上面的命令会生成一个全新的插件，里面包含了iOS,android, ohos文件夹，代表插件支持的平台原生代码。然后把生成两个的ohos文件夹复制到原项目（第 2 步）中对应的目录，一定别搞错了。

修改 pubspes.yaml 文件

使用Android Studio打开第二步中 clone 的项目。双击pubspes.yaml文件。

新增ohos插件支持。其中的package可以同android的package,

pluginClass: 不要填错了。一般情况都是这个目录中可以找到（image_gallery_saver``/ohos/src/main/ets/components/plugin/ImageGallerySaverPlugin.ets）。

ohos:  package: com.example.image_gallery_saver  pluginClass: ImageGallerySaverPlugin

执行Flutter pub get

接下来，就可以执行flutter pub get，成功之后链接鸿蒙模拟器或者鸿蒙系统真机执行flutter run进行调试了

准备鸿蒙插件代码

接下来使用DevEco打开example/ohos下面的鸿蒙项目。

进入oh_modules目录下，找到刚生产的插件原生代码，目前可以在这编辑代码，但是记住，这个目前每次flutter run都会重新生成，请确保编辑的代码及时同步到image_gallery_saver``/ohos/src/main/ets/components/plugin/目录中，不然可能会变成消失的代码。

因为oh_modules目录下面得代码就鸿蒙项目存放第三方模块的目录，flutter run每次执行都会覆盖这里面的代码。

比如我目前写完代码，会使用以下命令把代码自动复制到插件的真实目录

 cp *.ets /个人目录前缀/image_gallery_saver/ohos/src/main/ets/components/plugin/

相信在未来的版本中，鸿蒙官方会解决这个问题。

上图中我们可以看到生成到的鸿蒙插件代码，并且在插件中还实现了getPlatformVersion默认方法。

另外一个细节，请确保鸿蒙插件中的MethodChannel和Flutter侧中的MethodChannel字符串一致。

开始编写插件代码

查看image_gallery_saver/lib/image_gallery_saver.dart

发现这个插件就两个方法

static FutureOr<dynamic> saveImage(Uint8List imageBytes,    {int quality = 80,    String? name,    bool isReturnImagePathOfIOS = false})    static Future saveFile(String file,    {String? name, bool isReturnPathOfIOS = false})    

我们参考其他平台，取插件接口参数，然后做相应的逻辑

git push

修改完之后，把代码 push 到自己的 git 仓库

使用插件

把image_gallery_saver这个库，指向我们自己的地址即可，就是第 1 步 fork 之后的地址。

image_gallery_saver:  git:    url: https://gitee.com/openharmony-sig/flutter_flutter.git    ref: 431cf6867ba533770292f2e42305e58a8474b0ae

总结

以上就是在已有 Flutter 插件中新增鸿蒙系统支持的大致流程。