Flutter插件支持鸿蒙系统实践

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/binPATH # command-line-tools/ohpm/bin export PATH=$TOOL_HOME/tools/hvigor/binPATH # command-line-tools/hvigor/bin export PATH=$TOOL_HOME/tools/node/binPATH # 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）。

1. ohos:
2.   package: com.example.image_gallery_saver
3.   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每次执行都会覆盖这内里的代码。
好比我现在写完代码，会使用以下下令把代码自动复制到插件的真实目次

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

复制代码

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

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

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

开始编写插件代码

查看image_gallery_saver/lib/image_gallery_saver.dart
发现这个插件就两个方法

1. static FutureOr<dynamic> saveImage(Uint8List imageBytes,
2.     {int quality = 80,
3.     String? name,
4.     bool isReturnImagePathOfIOS = false})
5.    
6. static Future saveFile(String file,
7.     {String? name, bool isReturnPathOfIOS = false})   

复制代码

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

git push

修改完之后，把代码push到本身的git堆栈
使用插件

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

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

复制代码

总结

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

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。