阅读 436

Flutter插件iOS端开发教程

学习flutter没多久,因为新的需求涉及到原生,所以需要制作插件,学习的过程中详细记录一下,本篇博客主要介绍的是iOS端详细步骤,不涉及Android

原理

个人理解,这种与原生通信的设计模式都差不多,flutter这边的叫Method Channel。跟之前搞的Cordova很像,都有一个plugin类来处理与原生的通信。

深入理解推荐阅读Flutter与iOS通信原理

步骤

创建插件工程

  1. Android Studio创建
    AS创建插件工程
    点击Next,修改Project名字继续Next,
    创建插件设置
    红框部分选择是否支持SwiftKotlin
  2. 终端创建
    flutter create --org com.example --template=plugin 插件名字
复制代码

如果需要支持Swift或者Kotlin

flutter create --template=plugin -i swift -a kotlin 插件名字

复制代码

到这里,插件工程就已经创建好了。

目录结构

插件工程目录
android:安卓插件代码添加的地方

example:插件示例工程

ios:iOS原生代码添加的地方

lib:插件的Dart代码

flutter与原生通信

Dart调用原生插件的地方:

Dart调用原生
原生接收调用的插件类:
原生接收通信
通过method来区分不通的方法调用,传参在arguments中
FlutterMethodCall

编写iOS原生代码

首先需要在example工程下,执行fLutter build ios,主要是需要pod install,生成xxx.workspace. 然后如下图所示打开Xcode,

使用Xcode打开工程
使用example目录下的ios目录打开也一样。 Xcode工程打开后,在如下图所示位置添加编写原生代码。
添加iOS代码的位置

添加文件或者本地库

添加文件
同时在podsepc文件里面加上:

  s.source_files = 'Classes/**/*'
  s.public_header_files = 'Classes/**/*.h'
  # 第三方.a文件
  s.vendored_libraries = 'Classes/**/*.a'
  # 第三方framework
  s.vendored_frameworks = 'Classes/**/*.framework'
  s.dependency 'Flutter'
复制代码

podspec文件
更加详细的podspec文件语法,请戳podspec文件语法

使用

pubspec.yaml文件dependencies下添加:

cool_ui:
    git:
      url: http://code.zhilun.com/frontend/cool_ui.git
      ref: develop
# ref指定分支
复制代码

如果是放在本地也可以使用path参数。

flutter_webview_plugin:
    path: ../flutter_webview_plugin-0.3.10
复制代码

遇到的问题

运行example工程时,一直报library not found,这个问题还不是一直有,有时候报错有时候不报错,尤其Xcode能运行打开Android Studio运行就显示找不到库文件。搞了好久,请教了很多人,最后发现是Android Studio不能识别大写Lib开头的.a文件,一定要小写。

关注下面的标签,发现更多相似文章
评论