欢迎关注微信公众号:FSA全栈行动 👋
BiliBili: www.bilibili.com/video/BV1mt…
一、概述
Pigeon
是一个可以帮助我们生成 Flutter
与 原生
的通信代码的工具,我们只需要关注其两侧主要的数据处理逻辑即可,从而提升效率。
Flutter
端对于视频缓存功能主要还是依赖原生端比较成熟的实现方案,如下两个开源库
其功能是:丢给它一个视频链接,它将生成一个具备缓存功能的播放代理链接。
接下来我们一起看看,如何使用 Pigeon
并结合上述两个库来实现视频缓存插件。
二、创建 Plugin
使用如下命令生成插件项目,这里我指定iOS使用的是 Swift
,安卓使用的是 Kotlin
1 | shell复制代码flutter create --template=plugin --platforms=android,ios -i swift -a kotlin 项目名 |
三、原生依赖
iOS
打开在 ios
目录下的 podspec
文件(这里是 video_cache.podspec
),添加相关的第三方库依赖,比如我这里依赖的是 KTVHTTPCache
。
1 | diff复制代码# |
安卓
打开在 android
目录下的 build.gradle
文件,添加
1 | diff复制代码... |
然后在 example/android
目录下的 build.gradle
和 settings.gradle
文件添加如下 maven
,否则会找不到依赖库
1 | diff复制代码// build.gradle |
1 | diff复制代码// settings.gradle |
四、Pigeon
添加依赖
在 pubspec.yaml
的 dev_dependencies
下添加 pigeon
依赖
1 | yaml复制代码dev_dependencies: |
定义通信接口
在 lib
目录外创建一个用来定义通信接口的 dart
文件。
这里我们新建了一个与 lib
目录同级的 pigeons
文件夹,来存放与 Pigeon
相关的文件
1 | shell复制代码. |
cache.dart
就是我用来定义视频缓存功能相关的通信接口的文件。
1 | dart复制代码import 'package:pigeon/pigeon.dart'; |
生成交互代码
再执行如下命令,指定根据 cache.dart
来生成相应的繁杂且重要的交互代码。
1 | shell复制代码flutter pub run pigeon --input pigeons/cache.dart |
坑点
一定一定,一定要自定义 kotlinOptions
里的 errorClassName
,不然它会给你生成默认的 FlutterError
,单单自己的插件编译可能不会怎样,但是一旦集成的项目里也有用到其它用 Pigeon
生成了 FlutterError
的插件时,就会报如下错误了
1 | shell复制代码Type FlutterError is defined multiple times |
自定义 kotlinOptions
里的 errorClassName
:
1 | dart复制代码@ConfigurePigeon(PigeonOptions( |
五、编写原生代码
iOS
进入到 example/ios
目录下,安装依赖
1 | shell复制代码cd example/ios |
使用 Xcode
打开 Runner.xcworkspace
开始编写原生代码
1 | swift复制代码// VideoCachePlugin.swift |
安卓
使用 AndroidStudio
打开 example/android
,找到外层的 android
项目开始编写原生代码
1 | kotlin复制代码package com.lxf.video_cache |
六、开源库
上述视频缓存插件已开源,并发布至 GitHub
:github.com/LinXunFeng/…
你可以通过如下步骤集成使用:
在 pubspec.yaml
中添加 video_cache
依赖
1 | yaml复制代码dependencies: |
使用
1 | dart复制代码// 导入 |
然后把转换后的 url
丢给播放器就可以了~
七、结尾
以上就是 Flutter
与原生交互拿到代理 url
的例子,使用的是 @HostApi
,而如果你如果在原生端去调用 Flutter
的 api
,则使用 @FlutterApi
去标注相关抽象类即可,使用方法是差不多的。
需要注意的是,当你使用 Swift
去写插件,且使用了 @FlutterApi
去生成相应的原生代码后编译,可能会遇到这个错误
1 | bash复制代码type 'FlutterError' does not conform to protocol 'Error' |
添加如下拓展即可
1 | swift复制代码// https://github.com/flutter/flutter/issues/136081 |
八、资料
如果文章对您有所帮助, 请不吝点击关注一下我的微信公众号:FSA全栈行动, 这将是对我最大的激励. 公众号不仅有
iOS
技术,还有Android
,Flutter
,Python
等文章, 可能有你想要了解的技能知识点哦~
本文转载自: 掘金