flutter插件基础之基本介绍和工程目录介绍(一)

好久没写系列长文了~~~

封面配图.jpg

今天借着近期深入研究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几乎所有主流平台,那

如此情境下,小伙伴们,还能不赶紧学习,嗨起来!

每天最痛苦的事情就是上班,每天最开心的事情就是学习~~哈哈.jpeg

当然,也不要着急,好消息是一套代码可跑多个平台,但坏消息是为了适应这些平台,不同平台编写代码为了和各平台底层交互的心酸历程,那可真是个酸爽!

幸好,编程代码就是去解决这些重复性工作,所以本篇的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)的代码。

flutter插件各类语言占比.png

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后,选择如下选项框

androidstudio创建插件步骤1.png

按照提示选择Flutter 本地安装的路径后,跳转如下页面

安卓创建插件步骤2.png

按照顺序输入插件的名称,选择Project type为Plugin类型,然后选择合适的原生平台后点击Finish,稍等片刻,即可完成插件的创建

需要注意的是在Project location路径下不要有其他项目,不然通过安卓Studio中创建的插件,将会和其他项目出现你中有我,我中有你的尴尬,具体可以一试哈!

至此,我们的第一个插件项目就创建好了,为了后续开发使用的方便,将主要以安卓Studio来对插件进行后续的使用和讲解说明。

3.2.工程目录介绍

如下所示为我们的插件工程文件结构图

插件总目录解析.png

如上图所示的

根目录下的android目录是我们编写原生安卓的文件,其中红色箭头指向的FlutterPluginDemo2Plugin

是一个java类

根目录下的iOS目录下是我们编写原生iOS的文件,同样红色箭头指向的FlutterPluginDemo2Plugin.h 和 FlutterPluginDemo2Plugin.m 文件毫无疑问是我们OC的类

而example类则是给我们提供的一个flutter层调用原生的一个示例代码,

如下我们再次打开example文件夹,尝试分析一下整体的调用流程是怎样的。

插件example目录解析.png

即在根目录下的example中的main.dart文件中调用 根目录下的lib文件夹下的FlutterPluginDemo2.dart类后,如上如以调用iOS原生为例,即该中间类去通过MethodChannel调用到原生的FlutterPluginDemo2Plugin.h和FlutterPluginDemo2Plugin.m文件来实现flutter调用原生的机制流程,安卓同理也是由FlutterPluginDemo2.dart去通过MethodChannel调用到原生的FlutterPluginDemo2Plugin.java类完成flutter调用原生的通信工作。

那么问题来了,MethodChannel是什么玩意,还有flutter调用原生不可能只是调用,还得传值,还得有回应,而且大部分使用场景也不是一调用就有立刻有回应,这些问题插件要如何处理呢,

后续我们再聊,今天咱们就先来个开胃菜压压惊!

推荐阅读更多精彩内容