HarmonyOS 鸿蒙Next 怎么解决Flutter引入三方库报错问题

HarmonyOS 鸿蒙Next 怎么解决Flutter引入三方库报错问题

创建完模板工程后，引入三方库webview_flutter报错。

报错如下图所示：

【背景知识】

1. Flutter三方库类型

• 纯 Dart 库：用纯Dart编写的三方库 ，这种类型可以直接在鸿蒙Flutter上使用，不需要适配。
• Plugin插件：这类三方库用到了原生平台能力，需要编写原生代码进行适配。上面提到的webview就是这种，不能直接在鸿蒙Flutter上使用，而是需要使用鸿蒙化的版本。
• FFI 插件：FFI插件提供了调用C/C++的能力。

2. Flutter三方库引用

Flutter框架通过pubspec.yaml配置文件管理三方依赖，例如：

dependencies:
  flutter:
    sdk: flutter
  webview_flutter: ^4.4.2
  url_launcher:
    git:
      url: "https://gitee.com/openharmony-sig/flutter_packages.git"
      path: "./packages/url_launcher/url_launcher"
  url_launcher_platform_interface: ^2.0.3

主要有三种引入方式

（1）中心仓引入：

dependencies:
   url_launcher: '>=5.4.0 <6.0.0'

（2）git引入：

dependencies:
   url_launcher:
     git:
       url:"https://gitee.com/openharmony-sig/flutter_packages.git"
       path: "./packages/url_launcher/url_launcher"

（3）本地引入：

dependencies:
   packageA:
     path: ../packageA/

因为当前三方库主要由华为和开源社区自行适配的，相当于独立分支，归档在git仓上，所以鸿蒙Flutter引用三方库主要采用git引入方式。

【定位思路】

1. 直接定位

查看错误信息，发现关键错误信息A platform implementation for webview_flutter has not been set.，可能是该三方库未进行鸿蒙适配，无法创建鸿蒙平台的对象实例。

检查pubspec.yaml发现，采用的是中心仓引入方式，由于引用的是未做鸿蒙适配的版本，导致报错。

dependencies:
   webview_flutter: ^4.4.2  // 会从中心仓下载，该版本未作鸿蒙适配

【解决方案】

替换成已鸿蒙适配的三方库，在pubspec.yaml中按如下修改，引入已适配鸿蒙的webview。

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

执行命令flutter pub get，成功运行，如下图所示：

【总结】

1 、如何引入鸿蒙Flutter三方库

以上述webview_flutter三方库为例，说明鸿蒙Flutter引入三方库的一般方法。注意需提前配置好鸿蒙Flutter环境。

（1）查看该插件官方代码仓的pubsepc.yaml文件，查找platforms字段，存在说明该插件依赖平台能力，需要做鸿蒙适配；若无该字段，说明插件是纯Dart编写，可以直接采用中心仓引用方式，直接使用。

flutter:
  plugin:
    platforms:
      android:
        default_package: webview_flutter_android
      ios:
        default_package: webview_flutter_wkwebview
      macos:
        default_package: webview_flutter_wkwebview

（2）通过咨询鸿蒙技术支持人员，查询三方库的适配计划，得知webview_flutter已经适配完成，根据技术支持人员提供的仓库地址进行依赖配置。

（3） 配置pubsepc.yaml文件。

dependencies:
   webview_flutter:
    git:
       url:"https://gitee.com/openharmony-sig/flutter_packages.git"
       path: "packages/webview_flutter/webview_flutter"  // 插件在git仓中的相对路径

注意：git仓库里存放了多个插件，需要配置正确插件的具体路径，配置到path字段。

（4）执行flutter pub get下载；

（5）对于自研三方库，可以参考开发ohos平台的Flutter三方库，自行适配后引用。