Flutter插件制作、本地/远程依赖及缓存机制深入剖析(原创-附源码)

Flutter插件在开发Flutter项目的过程中扮演着重要的角色,我们从 ​​​​​​https://pub.dev 上下载添加到项目中的第三方库都是以包或者插件的形式引入到代码中的,这些第三方工具极大的提高了开发效率。

深入的了解插件的制作、发布、工作原理和缓存机制,可以让我们对Flutter的插件机制有更深层次的理解,在开发中想自己封装插件或者在使用第三方插件遇到问题的时候,也会有更多的思路去排查问题。

本文将从以下几个方面详细的讲解Flutter插件的相关内容和原理:

  • Flutter插件的类型介绍
  • Flutter插件的详细制作流程
  • 以本地依赖的方式使用制作的Flutter插件
  • 以远程依赖的方式使用制作的Flutter插件
  • 将Flutter插件发布到开放平台
  • Flutter插件的原生层如何引用自定义的Framework
  • Flutter插件的缓存机制及更新原理

一篇文章带你从0开始详细深入的了解Flutter插件的所有知识,让我们开始吧~

一、Flutter插件的类型

引用Flutter中文社区的官方描述

Packages可以包含多种内容:

  • Dart包:其中一些可能包含Flutter的特定功能,因此对Flutter框架具有依赖性,仅将其用于Flutter,例如fluro包。

  • 插件包:一种专用的Dart包,其中包含用Dart代码编写的API,以及针对Android(使用Java或Kotlin)和/或针对iOS(使用ObjC或Swift)平台的特定实现。一个具体的例子是battery插件包。

简单来说,Flutter插件有两种类型:

  1. Package:普通的Dart包,也就是我们常说的Package,里面只包含dart代码
  2. Plugin:也就是我们说的插件包,里面除了dart代码外,还提供了安卓和iOS原生功能调用的支持(插件包其实也是一种特殊的Package,只不过默认提供了调用原生的channel通道的 实现,提供了与原生层通信的示例,使得我们开发与原生层相关的功能时更加便捷)

接下来我将用两个简单的示例来分别讲解两种包是如何制作的

二、Flutter插件的详细制作流程

Flutter插件的制作很简单,我们从头开始,通过两个简单的示例来分别讲解Package插件和Plugin插件的制作过程。

1.Package的制作

新建Flutte项目,项目类型选择Package

然后点击创建,即可完成一个Package包的制作,创建完进入项目目录如下:

进入之后其实可以看到,这是一个非常简单的工程,里面只有一个默认的跟项目同名的test_package文件,里面默认给我们创建了一个演示的类Calculator,我们可以将自己添加的代码添加到lib文件夹内,就可以作为package包提供给其他的项目来使用了。

package的包的创建很简单,我们重点说一下plugin插件制作,也会在plugin插件的制作过程中详细的剖析每个文件的作用的使用方法。

2.Plugin插件的制作

同样新建项目,项目类型我们这次选择plugin,操作如下,我们建立一个test_plugin的项目,后面的演示和深入分析也都以这个项目来作为示例。

创建完成后进入项目如下所示:

我们需要重点关注的就是四个文件夹lib、example、android、iOS以及pubspec.yaml文件

我们挨个来看:

  • pubspec.yaml文件

pubspec.yaml文件在我们日常做Flutter开发的过程中提供了对第三方依赖库和资源文件的管理,但是在plugin插件中他起到了一个非常重要的作用就是对我们的插件进行描述,同时也管理插件内引用的第三方工具和资源。

对应模块功能如下:

pubspec.yaml文件内的plugin模块定义了安卓和iOS原生层面的代码资源:

  • lib文件夹

lib文件夹下有三个文件,从下往上依次为

1.test_plugin_platform_interface.dart

test_plugin_platform_interface.dart 文件内创建了一个抽象类TestPluginPlatform,我们需要关注的是他定义了一个抽象方法,

getPlatformVersion

这个是Flutter默认创建的示例方法,该方法的作用是通过channel来调用原生层代码,分别获取安卓或者iOS端的系统版本号,并返回Flutter层来显示。

2.test_plugin_method_channel.dart

该文件内定义了一个继承了上面定义的抽象类的MethodChannelTestPlugin类,这个类提供了对getPlatformVersion方法的具体实现,同时在该类的内部创建了后面与原生端通信的channel通道。

3.test_plugin.dart

该文件很简单,可以清晰的看到他仅仅提供了一个类,该类有一个示例方法,这个方法就是对第二个文件内方法getPlatformVersion的调用。

通过这三个文件可以看出来,这三个文件其实就是Flutter 给我们创建的演示如何跟原生通道通信的功能,通过一个简单的获取原生系统版本的功能来给我们演示如何与原生层来进行通信的。

既然是与原生的通信,那么必然会有原生的代码与之交互,接下来以iOS为例,我们看一下原生端默认给我们提供了什么实现

  • iOS文件夹

可以看到,iOS文件夹里的内容也很简单,只提供了一对文件

在该文件夹内实现了TestPlugin协议,通过

+ (void)registerWithRegistrar:(NSObject<FlutterPluginRegistrar>*)registrar

方法进行通道名为test_plugin的注册,然后通过

- (void)handleMethodCall:(FlutterMethodCall*)call result:(FlutterResult)result 

方法实现对该通道内方法调用的监听,当监听到对应的方法之后,则获取到本机系统的版本,并将版本数据进行返回,以此在IOS端就实现了与Flutter层通过通道来通信的功能。

iOS文件夹内还有一个重要的文件 test_plugin.podspec

  • test_plugin.podspec

该文件是对iOS原生代码的说明,是个简单的pod库声明文件,详细说明了库内引用了哪些文件以及文件的位置,引用的第三方依赖等,后面我们会引入一个自己制作的Framework来说明如何在插件的原生层内来引用自己制作的库文件。

test_plugin.podspec内部功能如下:

  • Android文件夹

安卓文件夹内的功能与iOS端功能基本一致,核心代码如下

也是注册了通道的监听,然后进行了功能逻辑的实现,并将结果返回,不再赘述。

最后一个是example文件夹

  • example文件夹

example文件夹是Flutter非常贴心的为了方便我们开发插件而制作的一个示例工程,他提供了一个main.dart文件来给我们说明如何使用我们制作的插件

运行界面如下

可以说是非常贴心了,这个示例工程是为了方便我们在开发插件的过程中进行调试,当我们制作完成后,可以将example工程从插件中移除,只需要将插件相关的功能提供出来给其他项目调用就可以了。

三、以本地依赖的方式使用制作的Flutter插件

以我们刚才制作的插件为例,我们演示一下如何以本地依赖的方式来使用我们自己制作的插件。新建一个test_project

然后在工程目录下创建文件夹

将我们刚刚制作的插件放进去

接着我们在测试项目内的pubspec.yaml文件内进行如下配置

然后执行执行flutter pub get

这样,我们就可以将我们制作的插件引入到我们正在开发中的项目中去了,我们来测试一下插件的功能,对main.dart内的文件进行尽可能的精简:

测试结果如下:

点击前:

点击后:

可以看到我们的插件已经通过本地依赖的方式集成到项目中,并已经正常工作了

四、以远程依赖的方式使用制作的Flutter插件

接下来,我们将我们制作的插件放到git上,然后看下如何通过远程依赖的方式来使用我们自己制作的插件,在github上建好仓库,并将我们自己制作的插件放进去,远端仓库建立完成如下,地址为

GitHub - TheRuningAnt/test_plugin: 测试自己制作的flutter插件

建好之后的仓库内容如下:

然后更改测试项目的pubspec.yaml,用下面的方式改为远程依赖我们制作的插件

这里我直接使用的main分支,如果我们使用的是分支 branch/1.0.0,那么将ref改为

ref: branch/1.0.0

即可

使用flutter clean清理项目,然后执行flutter pub get 即可看到我们制作的插件已经是以远端依赖的方式引入到本地了

执行完成后查看项目目录,可以发现此时插件在我们项目中的位置已经是放在External Libraries\Flutter Plugin 文件夹下作为外部插件来引用了。

经过测试,插件在我们的项目中仍然可以正常工作,说明我们通过远程依赖的方式已经成功的将插件集成到了我们项目中去。

五、将Flutter插件发布到开放平台

当我们的插件制作完成之后,就可以发布到 pub.dev 上,供其他的开发者来下载使用了,首先我们通过终端进入到我们的插件目录下

然后执行

flutter pub publish --dry-run

来对插件进行检查

当检查通过之后,就可以执行

flutter pub publish

指令指令将插件发布出去

输入y,然后点击回车,将会开始插件的上传,上传完成之后会给到一个链接地址,复制到浏览器里打开进行登陆授权之后,根据提示即可完成插件的发布。

六、Flutter插件的原生层如何引用自定义的Framework

接下来我们演示如何在插件中的原生层使用我们自定义的框架,以iOS端为例,我们先封装一个简单的SDK,然后将其引入到项目的原生层

我们先制作一个很简单的Framework,里面只包含一对文件.h和.m文件内容分别如下所示

该文件定义了一个类方法,作为测试使用。

创建完成的Framework如下

然后我们看如何将自己制作的Framework引入到Flutter插件的原生层,打开我们的test_plugin插件项目的文件夹,然后打开iOS文件夹

新建一个文件夹名叫Frameworks

然后将我们自己制作的Framework拖进去

接下是比较重要的一步,修改iOS文件夹下的test_plugin.podspec

添加

s.vendored_frameworks = ["Frameworks/*.framework"]

将我们创建的Frameworks文件夹下的自定义库都加载进来

如果要使用指定的第三方库可以这样写

s.dependency 'AFNetworking', '~> 1.0'

编辑完成之后,我们打开辅助开发的iOS项目

先在该目录下执行

pod install

更新一下本地库,然后使用Xcode打开,文件目录如下

可以看到我们创建的Frameworks文件夹已经引入到项目中去了,而且默认给我们创建了一个Development Pods虚拟文件夹,我们开发的IOS端引用的自定义库都放在了这个文件夹下

有一个比较有意思的地方是每个文件前面都有一个快捷方式的剪头

这是因为这些文件是通过引用的方式链接到我们开发的插件库的,show in finder的话会发现我们又回到了我们创建的test_plugin文件夹,这是为了方便我们做开发和调试,同样的,我们对文件的所有修改也会同步到test_plugin插件内的所有文件中去。

我们对iOS的文件做如下修改,将我们创建的库导入进来,并增加测试方法的实现

这样,当iOS层监听到testIOSFramework方法调用的时候,就会去调用我们自定义的框架内的方法

接下来,打开我们的test_plugin插件项目,执行flutter pub get更新本地依赖

然后增加一个flutter层的测试方法来调用我们在IOS层监听的方法

这样我们的test_plugin插件又多提供了一个方法,用来测试我们在iOS端集成的自定义的Framework

(改三个文件很繁琐,实际开发过程中可以考虑简化到一个文件里来管理)

然后将我们修改好的test_plugin插件重新集成到项目中去,这里为了方便演示,直接用本地依赖的方式来演示功能的测试

然后我们在主界面增加一个测试我们iOS Framework的测试方法

运行之后点击测试,可成功调用iOS 内自己制作的Framewrok内部的方法

注:该Framework编译环境为模拟器环境,并未合并真机环境的Framework,所以如果想运行测试请在模拟器环境下测试,否则项目可能无法正常运行

七、Flutter插件原生平台的缓存机制及更新原理

接下来是重点,我们将对Flutter 插件的缓存机制的深入分析和探讨

首先将仓库的引用方式改为远程引用,然后执行flutter pub get更新本地依赖:

然后我们找到远端引用的test_plugin插件,然后show in finder

可以看到,他是被pub-cache管理缓存在git文件夹下的

查看 pubspec.lock文件,可以看到引用的就是缓存内的插件缓存

这个时候,我们对远端仓库的文件做适当修改,增加一个空方法的

然后更新到远端仓库上,查看远端仓库,发现文件已经成功更新

这个时候,我们在flutter的测试项目中执行

flutter clean 

这个时候可以看到本地的插件文件夹已经被清理掉了

然后我们重新执行

flutter pub get

来拉取插件

这个时候可以看到我们的插件文件夹又回来了,我们的插件也被加载出来了

但是,我们查看文件的时候,发现这并不是最新的文件,虽然我们清理了项目 ,也重新拉了依赖,但是文件却没有从远端更新同步

这是因为Pub会通过版本号来判断我们的插件是否需要更新,如果在pub-cache缓存中有对应版本的文件,则不会去远端重新拉取,所以我们有两种方式来实现远端插件的实时更新

1.每次更新完成之后更换不同的版本号,同时更新Flutter项目中的插件配置

2.彻底清理掉pub-cache中的缓存,重新从远端拉取

我们采取清理缓存的方式来处理,右键插件show in finder

然后删除我们的插件缓存

这个时候你会发现flutter中的插件文件夹也会同步更新

然后删除掉pubspec.lock文件

然后重新执行

flutter pub get

从远端拉取插件缓存到本地,并重新创建pubspec.lock文件,这样才可以彻底更新本地依赖的远端插件

可以看到,插件已经成功与远端仓库同步

(直接删除pubspec.lock文件重新拉取也可以实现项目内的插件更新,但为了避免旧插件缓存被其他项目重复使用,建议直接清理掉pub-cache文件夹内缓存)

至此,相关内容已经介绍完毕,文章中使用的示例文件地址如下,有需要请自取:

制作的test_plugin地址:https://github.com/TheRuningAnt/test_plugin.git

测试的test_project项目地址:GitHub - TheRuningAnt/test_project

同时欢迎交流新的想法~

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/67389.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Linux 服务器挖矿木马防护实战:快速切断、清理与加固20250114

Linux 服务器挖矿木马防护实战&#xff1a;快速切断、清理与加固 引言 挖矿木马作为一种常见的恶意软件&#xff0c;对服务器资源和安全构成严重威胁。据安全机构统计&#xff0c;2023 年全球约 45%的 Linux 服务器遭受过挖矿木马攻击&#xff0c;平均每台被感染服务器每月造…

OpenAI推出首个AI Agent!日常事项自动化处理!

2025 年1月15日&#xff0c;OpenAI 正式宣布推出一项名为Tasks的测试版功能 。 该功能可以根据你的需求内容和时间实现自动化处理。比方说&#xff0c;你可以设置每天早晨 7 点获取天气预报&#xff0c;或定时提醒遛狗等日常事项。 看到这里&#xff0c;有没有一种熟悉的感觉&a…

闪豆多平台视频批量下载器

1. 视频链接获取与解析 首先&#xff0c;在哔哩哔哩网页中随意点击一个视频&#xff0c;比如你最近迷上了一个UP主的美食制作视频&#xff0c;想要下载下来慢慢学。点击视频后&#xff0c;复制视频页面的链接。复制完成后&#xff0c;不要急着关闭浏览器&#xff0c;因为接下来…

卷积神经网络的底层是傅里叶变换

1 卷积神经网络的底层是傅里叶变换&#xff0c;傅里叶变换的底层是希尔伯特空间坐标变换_哔哩哔哩_bilibili 卷积神经网络的底层是傅里叶变换&#xff0c;傅里叶变换的底层是希尔伯特空间坐标变换_哔哩哔哩_bilibili从“卷积”、到“图像卷积操作”、再到“卷积神经网络”&…

攻防世界_SQL注入

inget 尝试万能钥匙。 输入?id1or11# supersqli 1.找注入点 输入框 2.判断字符型&#xff0c;数字型 输入1 and 11 和1 and 12&#xff0c;发现两次提交后页面一样&#xff0c;判断出为字符型注入 3.判断闭合符号 输入1&#xff0c;回显正常 输入1&#xff0c;报错 加上…

怎么把文章发表到网上?在平台上投稿文章会有哪些常见问题?

怎么把文章发表到网上&#xff1f;在发表文章的过程中&#xff0c;我们可能会碰到各种各样的问题。这些问题要么导致发表时间被拖长&#xff0c;要么可能导致文章被拒稿。 就让我们来了解下文章发表过程中需要注意的一些细节&#xff0c;知晓怎么顺利地把文章发表到网上。 一、…

检验统计量与p值笔记

一、背景 以雨量数据为例&#xff0c;当获得一个站点一年的日雨量数据后&#xff0c;我们需要估计该站点的雨量的概率分布情况&#xff0c;因此我们利用有参估计的方式如极大似然法估计得到了假定该随机变量服从某一分布的参数&#xff0c;从而得到该站点的概率密度函数&#x…

【Flink系列】6. Flink中的时间和窗口

6. Flink中的时间和窗口 在批处理统计中&#xff0c;我们可以等待一批数据都到齐后&#xff0c;统一处理。但是在实时处理统计中&#xff0c;我们是来一条就得处理一条&#xff0c;那么我们怎么统计最近一段时间内的数据呢&#xff1f;引入“窗口”。 所谓的“窗口”&#xff…

C#轻松实现条形码二维码生成及识别

一、前言 大家好&#xff01;我是付工。 今天给大家分享一下&#xff0c;如何基于C#来生成并识别条形码或者二维码。 二、ZXing.Net 实现二维码生成的库有很多&#xff0c;我们这里采用的是http://ZXing.Net。 ZXing是一个开放源码的&#xff0c;用Java实现的多种格式的一…

OpenCV实现Kuwahara滤波

Kuwahara滤波是一种非线性的平滑滤波技术&#xff0c;其基本原理在于通过计算图像模板中邻域内的均值和方差&#xff0c;选择图像灰度值较为均匀的区域的均值来替代模板中心像素的灰度值。以下是Kuwahara滤波的详细原理说明&#xff1a; 一、基本思想 Kuwahara滤波的基本思想…

24-25-1-单片机开卷部分习题和评分标准

依据相关规定试卷必须按评分标准进行批改。 给分一定是宽松的&#xff0c;能给分一定给&#xff0c;如有疑问也可以向学院教务办申请查卷。 一部分学生期末成绩由于紧张或其他原因导致分数过低&#xff0c;也是非常非常遗憾的。 个人也是非常抱歉的。 开卷考试 简答题 第一…

linux之进程信号(初识信号,信号的产生)

目录 引入一、初识信号(信号预备知识)1.生活中的信号2.Linux中的信号3.信号进程得出的初步结论 二、信号的产生1.通过终端输入产生信号拓展: 硬件中断2.调用系统函数向进程发信号3.硬件异常产生信号4.软件条件产生信号拓展: 核心转储技术总结一下&#xff1a; 引入 一、初识信…

【工具类】获取日出日落时间的Java工具类

博主介绍&#xff1a;✌全网粉丝22W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…

Open FPV VTX开源之betaflight配置

Open FPV VTX开源之betaflight配置 1. 源由2. 配置3. 总结4. 参考资料5. 补充 - 飞控固件版本 1. 源由 飞控嵌入式OSD - ardupilot配置使用betaflight配套OSD图片。 Choose correct font depending on Flight Controller SW. ──> /usr/share/fonts/├──> font_btfl…

Python从0到100(八十三):神经网络-使用残差网络RESNET识别手写数字

前言: 零基础学Python:Python从0到100最新最全教程。 想做这件事情很久了,这次我更新了自己所写过的所有博客,汇集成了Python从0到100,共一百节课,帮助大家一个月时间里从零基础到学习Python基础语法、Python爬虫、Web开发、 计算机视觉、机器学习、神经网络以及人工智能…

docker安装和测试redis步骤

docker安装和测试redis步骤 一、官方推荐安装方式&#xff1a; 1、执行 docker pull redis:4.0.1 命令&#xff0c;下载 redis 镜像&#xff0c;如下所示&#xff1a; 2、执行命令&#xff0c;创建并启动redis容器 docker run - -rm -d - -name redis6379 -p 6379:6379 r…

微信小程序原生与 H5 交互方式

在微信小程序中&#xff0c;原生与 H5 页面&#xff08;即 WebView 页面&#xff09;之间的交互通常有以下几种方式&#xff1a; 1. 使用 postMessage 进行通信 微信小程序的 WebView 页面和原生小程序页面可以通过 postMessage 来进行数据传递。 WebView 页面向原生小程序发…

vue3学习日记5 - 项目起步

最近发现职场前端用的框架大多为vue&#xff0c;所以最近也跟着黑马程序员vue3的课程进行学习&#xff0c;以下是我的学习记录 视频网址&#xff1a; Day2-11.项目起步-静态资源引入和ErrorLen安装_哔哩哔哩_bilibili 学习日记&#xff1a; vue3学习日记1 - 环境搭建-CSDN博…

计算机组成原理--笔记一

目录 一.计算机硬件的基本组成 1.早期冯诺依曼机的结构 2.现代计算机的结构 二.各个硬件的工作原理 1.主存储器 i. 读取数据 ii. 写入数据 1.1 基本组成 2.运算器 3.控制器 一.计算机硬件的基本组成 1.早期冯诺依曼机的结构 “存储程序”&#xff0c;将指令以二进制的形式输入…

漫话架构师|什么是系统架构设计师(开篇)

~犬&#x1f4f0;余~ “我欲贱而贵&#xff0c;愚而智&#xff0c;贫而富&#xff0c;可乎&#xff1f; 曰&#xff1a;其唯学乎” 关注犬余&#xff0c;共同进步 技术从此不孤单