好久没写系列长文了~~~
今天借着近期深入研究flutter插件的这股热情,着手把flutter插件的从0到1的整体流程进行梳理,并考虑以文档的方式予以留存,一方面方便和诸位网络大神的交流,也方便自己未来用的时候可随取随用,大家一样哈~~
一.flutter插件简单介绍
1.flutter跨平台
在介绍flutter插件之前,有必要提一下flutter,flutter是google在2015年推出的免费开源跨平台开发框架,2018年12月5日发布1.0版本,一开始主要是服务App端的跨平台,即兼容iOS和安卓2种平台,但随着2022年以来3.0版本的发布,已逐步支持Windows,macOS,以及Linux环境,实现了真正的跨平台开发。
至此,同其他的React(React Native),Vue,小程序等主要专注于如手机端,PC端的跨平台技术,那可真的可称为带头大哥了,试想以后,一套代码写完,可跑iOS,安卓,小程序,PC网页,Windows,MacOS,Linux几乎所有主流平台,那
如此情境下,小伙伴们,还能不赶紧学习,嗨起来!
当然,也不要着急,好消息是一套代码可跑多个平台,但坏消息是为了适应这些平台,不同平台编写代码为了和各平台底层交互的心酸历程,那可真是个酸爽!
幸好,编程代码就是去解决这些重复性工作,所以本篇的flutter插件就是为了解决flutter与原生的交互功能。
2.flutter插件是什么
如前所述,flutter是解决跨平台的开发框架,而flutter插件是具体的跨平台功能实现,即类似于连接flutter和原生通信的中间桥梁。
当然,按照flutter官方的描述,广义的flutter插件指的是flutter 的包,即Package和本篇要聊的flutter插件,即plugin,狭义的来说是本篇的plugin。
那么二者到底有什么区别呢,简单来说,即Package是对flutter相关功能的封装,类似于iOS的三方库,安卓的library库,其本质还是flutter的dart语言库;而plugin则是flutter为了获取原生的一些功能,需要实现的库,比如官方的获取版本号,获取原生的摄像头,本地相册等上层flutter无法获取到的功能,所以plugin中会既包含dart代码,也会包含原生的java(android)或oc(iOS)的代码。
3.工程目录介绍
接下来,我们来聊聊flutter插件的工程目录介绍
3.1.项目创建的2种方法
方法1:命令行创建
使用以下命令
flutter create --org com.example --template=plugin --platforms=android,ios -a java -i objc flutter_first_demo
可以创建一个dart插件工程,其中--org com.example是你的插件生成的原生的包名(安卓)和iOS的BoundId 的前缀;
后面的 --platforms=android,ios是指定该插件支持的平台,
-a java指的是项目支持安卓的语言,用-a java,代表原生安卓支持语言为java;用-a kotlin 代表原生支持kotlin语言;
同理-i objc 支持iOS的OC语言,-i swift支持Swift语言。
若不指定原生语言,默认安卓的插件支持的Kotlin 编写,iOS代码支持的是Swift语言进行编写。
方法2:安卓Studio创建(推荐省事)
打开安卓Studio后,选择如下选项框
按照提示选择Flutter 本地安装的路径后,跳转如下页面
按照顺序输入插件的名称,选择Project type为Plugin类型,然后选择合适的原生平台后点击Finish,稍等片刻,即可完成插件的创建
需要注意的是在Project location路径下不要有其他项目,不然通过安卓Studio中创建的插件,将会和其他项目出现你中有我,我中有你的尴尬,具体可以一试哈!
至此,我们的第一个插件项目就创建好了,为了后续开发使用的方便,将主要以安卓Studio来对插件进行后续的使用和讲解说明。
3.2.工程目录介绍
如下所示为我们的插件工程文件结构图
如上图所示的
根目录下的android目录是我们编写原生安卓的文件,其中红色箭头指向的FlutterPluginDemo2Plugin
是一个java类
根目录下的iOS目录下是我们编写原生iOS的文件,同样红色箭头指向的FlutterPluginDemo2Plugin.h 和 FlutterPluginDemo2Plugin.m 文件毫无疑问是我们OC的类
而example类则是给我们提供的一个flutter层调用原生的一个示例代码,
如下我们再次打开example文件夹,尝试分析一下整体的调用流程是怎样的。
即在根目录下的example中的main.dart文件中调用 根目录下的lib文件夹下的FlutterPluginDemo2.dart类后,如上如以调用iOS原生为例,即该中间类去通过MethodChannel调用到原生的FlutterPluginDemo2Plugin.h和FlutterPluginDemo2Plugin.m文件来实现flutter调用原生的机制流程,安卓同理也是由FlutterPluginDemo2.dart去通过MethodChannel调用到原生的FlutterPluginDemo2Plugin.java类完成flutter调用原生的通信工作。
那么问题来了,MethodChannel是什么玩意,还有flutter调用原生不可能只是调用,还得传值,还得有回应,而且大部分使用场景也不是一调用就有立刻有回应,这些问题插件要如何处理呢,
后续我们再聊,今天咱们就先来个开胃菜压压惊!