FlutterPlugin支持鸿蒙Next

一. 环境配置

1.基础准备

下载工具

developer.huawei.com/consumer/cn...

JDK 17

链接：pan.baidu.com/s/1tJvw6R4a... 提取码：470i

文档

Flutter官方SDK并不支持Harmony Next,所以才有了下边这个库.

Flutter SDK 仓库 OpenHarmony-SIG/flutter_flutter

本仓库是基于Flutter SDK对于OpenHarmony平台的兼容拓展，可支持IDE或者终端使用Flutter Tools指令编译和构建OpenHarmony应用程序。

这个文档只是介绍Flutter SDK,并不是特别详细,另一个文档很详细:鸿蒙版Flutter环境搭建指导.

这个库中有一些samples可以查看.

flutter_samples

这个库中还有一些其他相关的文档,可以扩展.

gitee.com/openharmony...

2.开始配置

按照文档安装开发工具,我这里环境为windows,后文也都是用windows介绍,其他环境也是类似.

安装好DevEco,基操略过.

需要jdk17,链接在上边,安装好后配置环境变量,基操略过.

SDK, node, ohpm, hvigor 这几个环境变量需要配置下,后边编译时要用到,按文档配置上.

ini 复制代码

 # windows环境
 TOOL_HOME = D:\devecostudio-windows\DevEco Studio
 DEVECO_SDK_HOME=%TOOL_HOME%\sdk
 PATH=%TOOL_HOME%\tools\ohpm\bin
 PATH=%TOOL_HOME%\tools\hvigor\bin
 PATH=%TOOL_HOME%\tools\node

bash 复制代码

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

git checkout -b dev origin/dev

这里我是切换到了 dev分支, 配置环境变量.

以上环境变量就配置好了 flutter doctor -v 检查环境变量配置是否正确，Futter 与OpenHarmony应都为ok标识，若两处提示缺少环境，按提示补上相应环境即可。

首次执行flutter命令时,会下载 flutter Engine 构建产物,这里如果不同引擎编译出FlutterPlugin.Har能否互相兼容还未可知,如有大佬知晓,可以留言指正.

二. 创建支持Harmony Next的Flutter项目

按文档,创建项目

lua 复制代码

flutter create --platforms ohos flutter_ohos_proj

创建的flutter项目只支持ohos,目录如下图:

如果需要创建支持Android,IOS,Harmony Next的项目,可以使用:

lua 复制代码

flutter create flutter_proj

使用打开D:\hm_workspace\demos\flutter_proj\ohos 这个目录,这个就是fluter中harmony项目目录,我这里用的真机

直接运行会报错,缺少这个fluter.har,类似于android中flutter.so.通过这个鸿蒙版的FlutterSDK创建的的每个新建的flutter项目都缺少这个fluter.har.

需要按文档,先build,就会生成fluter.har,或者从编译过的项目中复制也行.

css 复制代码

flutter build hap --debug

还是报错:

按照文档给项目签名:

然后直接run,就算跑起来了,这个页面应该比较熟悉了:

这里如果用模拟器的话比较坑,不能跑flutter项目.

三. 创建支持Harmony Next的Flutter Plugin项目

创建flutter 或者三端通用plugin:

lua 复制代码

flutter create -t plugin --platforms ohos,ios,android flutter_plugin_proj

此处可以看到,生成了plugin和example,这其中example也是一个flutter项目,而且已经默认集成了刚创建的plugin,可以打开看下,同样也是打开example的ohos目录,还是缺少fluter.har,这回光复制过来还不行,因为看项目最外侧的pubspec.yaml文件,flutter项目中的配置文件,它是一个三端插件:flutter_plugin_proj

然后看example中pubspec.yaml文件,example项目依赖了flutter_plugin_proj,而example中的ohos项目还没有依赖,

所以还是要编译一下example:

css 复制代码

flutter build hap --debug

这回flutter.har和flutter_plugin_proj.har就都有了

再把签名配置上,example的ohos就能run起来了:

四. 支持Harmony Next的Flutter项目集成Flutter Plugin

其实仔细看example是如何依赖flutter_plugin_proj的,就应该可以让flutter_proj项目依赖flutter_plugin_proj插件,熟悉的同学可以跳过这段自己搞下.

先分析flutter_plugin_proj的example: pubspec.yaml文件中已经引用了插件flutter_plugin_proj,用的相对路径

插件名:flutter_plugin_proj 很重要,这个是插件中定义的,

在example的ohos中, oh-package.json5 也依赖了flutter_plugin_proj.har

复习一下flutter插件原理:

一个完整的Flutter应用程序实际上包括原生代码和Flutter代码两部分。Flutter 中提供了平台通道（platform channel）用于Flutter和原生平台的通信，平台通道正是Flutter和原生之间通信的桥梁，它也是Flutter插件的底层基础设施。

Flutter与原生之间的通信本质上是一个远程调用（RPC），通过消息传递实现：

应用的Flutter部分通过平台通道（platform channel）将调用消息发送到宿主应用。
宿主监听平台通道，并接收该消息。然后它会调用该平台的API，并将响应发送回Flutter。

从data层面分析,example的lib下的main.dart,这是主页面, 可以看到创建了插件对象,并调用了方法getPlatformVersion,得到的结果赋值给_platformVersion,然后绘制到控件上,

arduino 复制代码

FlutterPluginProj 来自于 flutter_plugin_proj.dart
import 'package:flutter_plugin_proj/flutter_plugin_proj.dart';

查看plugin中flutter_plugin_proj.dart,发现又调用了FlutterPluginProjPlatform:

查看plugin_platform_interface.dart,发现只是个接口类:

实现类是flutter_plugin_proj_method_channel.dart

原来数据是从一个名为"flutter_plugin_proj"的channel中调用getPlatformVersion获取的.经此一系列操作flutter接口已经屏蔽了android/ios/harmony-next的区分,不关心具体实现.

先看鸿蒙中的实现:

在example中的EntryAbility,把插件注册到引擎中,

具体在example\ohos\entry\src\main\ets\plugins路径生成了GeneratedPluginRegistrant.ets,这个类只要是flutter依赖了插件,不管是安卓还是鸿蒙,都会生成这个文件并注册了插件

FlutterPluginProjPlugin这个类在插件中,看具体实现就是注册了一个名为"flutter_plugin_proj"的channel,和dart层对应上了,并且实现了getPlatformVersion方法,返回"OpenHarmony ^ ^ " 就和前面截图中数据一致.

再看Android中的实现: 和鸿蒙中类似,在example\android\app\src\main\java\io\flutter\plugins中生成了GeneratedPluginRegistrant.java文件,向Flutter引擎中注册了插件

FlutterPluginProjPlugin类的具体实现,同样注册名称"flutter_plugin_proj"的插件,实现了"getPlatformVersion"方法

整体关系如下图:

flutter 依赖插件原理基本就是这样.

现在我们自己尝试,修改刚才的flutter_proj项目依赖flutter_plugin_proj插件. 在pubspec.yaml文件中引入依赖:flutter_plugin_proj

flutter pub get一下,可以看到flutter_plugin_proj插件引了过来,

arduino 复制代码

flutter pub get

所以还是要编译一下flutter_proj,才能让ohos项目引用plugin,以及生成插件har包:

css 复制代码

flutter build hap --debug

完成之后,可以看到生成了flutter_plugin_proj.har,并且ohos中也自动依赖了.

GeneratedPluginRegistrant.ets中也自动把插件注册到Flutter引擎了,之前没依赖插件的时候,try这里是空的

最后修改main.dart,可以参考example中的main.dart文件,调用FlutterPluginProj插件中的getPlatformVersion方法

还可以在插件中创建ets文件,然后再鸿蒙ets中调用插件,这里就不细说了.