Flutter适配HarmonyOS实践

大家在知道纯血鸿蒙到来的时候一定很疑惑，使用跨平台语言的到底该怎么办，不管使用Flutter还是使用原生鸿蒙开发，都会考虑到一个成本问题，特别是一些无法支持鸿蒙开发团队，已经使用跨平台开发已经很成熟的公司或者团队。

接下来我将把我团队中怎么把现有flutter项目适配到鸿蒙的分享给大家。

首先我们需要了解纯血鸿蒙系统和原生安卓系统不是一个系统，开发过Flutter项目的同学都知道，每多一个平台，项目结构里都会多一个对应平台的model文件夹，例如：

Flutter适配的鸿蒙系统的内容就都在ohos文件夹里面了，如果要编辑鸿蒙相关的原生内容，可以使用DevEco studio打开ohos，在你通过适配鸿蒙的flutterSDK build之后，ohos就已经是一个独立的鸿蒙项目了，类似于android和iOS文件夹一样，他们都是一个独立的项目。

接下来我将一步步实现如何适配

检查当然flutter项目的SDK版本

因为目前适配鸿蒙的FlutterSDK版本release是3.7.12，为了避免出现大的适配问题，建议现将你的flutter项目先升级或者降级到3.7.12.

如果你的项目也像我的一样高于3.7.12，就需要降级到3.7.12后再去下载安装适配过鸿蒙的flutterSDK

如何使用适配过鸿蒙的flutterSDK

传送门：Flutter SDK 仓库

这个仓库的简介也说了，它是基于Flutter SDK对于OpenHarmony平台的兼容拓展，可支持IDE或者终端使用Flutter Tools指令编译和构建OpenHarmony应用程序

通过文档提示，下载并配置环境

运行 flutter doctor -v 检查环境变量配置是否正确，Futter 与OpenHarmony应都为ok标识，若两处提示缺少环境，按提示补上相应环境即可，如果环境都通过你会看到以下界面：

开始创建项目，通过命令创建你的项目

flutter create --platforms ohos <projectName>

到这一步，就已经成功了50%啦，打开创建好的项目，将项目里的ohos文件夹复制，然后贴到你的flutter项目中和Android，iOS文件夹平级的地方。

将IDE里的flutter，dart的SDK路径替换成下载的flutter_flutter

然后在IDE里执行flutter clean，清理掉之前的build文件，再执行 flutter pub get

调试运行

如果有更新了HarmonyOSNext的手机，你可以直接链接手机，点击IDE的run运行，如果你能顺利运行并且打开APP，恭喜你成功了40%

通过DevEco打开ohos文件夹，我们发现Index.ets入口是打开FlutterPage,这就是新的SDK为我们做的，不需要编写鸿蒙原生代码就能实现flutter项目在鸿蒙设备上运行，FlutterPage 是一个用于在鸿蒙应用中集成Flutter页面的类。

适配Flutter插件库

其实到这里大部分项目是根本无法运行的，或者运行后只有个别页面能打开，这是因为flutter项目里用到了很多插件库，但是这些库的地址是没有适配，我们需要到插件库去找，看看有没有适配：OpenHarmony平台已兼容库，例如我们需要集成：device_info_plus

1搜索插件库名称：

2.点击后面的库名称，回跳转到对应的git仓库

3.添加适配仓库地址：这时候需要在flutter项目中的pubspec.yaml文件中，在dependency_overrides下添加适配库的地址

cs 复制代码

dependency_overrides:


  device_info_plus:
    git:
      url: "https://gitee.com/openharmony-sig/flutter_plus_plugins.git"
      path: "packages/device_info_plus/device_info_plus"

  webview_flutter:
    git:
      url: "https://gitee.com/openharmony-sig/flutter_packages.git"
      path: "packages/webview_flutter/webview_flutter"
  permission_handler:
    git:
      url: "https://gitee.com/openharmony-sig/flutter_permission_handler.git"
      path: "permission_handler"

然后执行flutter pub get ,会发现我们的功能可以正常使用了。

眼尖的同学也注意到了，为什么我上面的3个适配库的url都不一样，这是因为不同的适配库，在不同的项目里，如果只是在https://gitee.com/openharmony-sig/flutter_packages.git 这一个地址找，就会出现，找不到库地址的错误。

将项目中所有的插件库在适配库地址里过一遍，基本上flutter官方的库都适配了，另外纯dart插件库不需要适配鸿蒙