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.rhkb.cn/news/1977.html

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

相关文章

每日学习30分轻松掌握CursorAI:Cursor插件系统与扩展功能

Cursor插件系统与扩展功能 一、课程概述 今天我们将学习Cursor AI的插件系统&#xff0c;了解如何通过插件扩展和增强IDE功能。由于Cursor AI基于VS Code开发&#xff0c;我们可以利用丰富的VS Code插件生态系统。 1.1 学习目标 了解插件系统原理掌握插件安装管理使用常用开…

第G1周:生成对抗网络(GAN)入门

>- **&#x1f368; 本文为[&#x1f517;365天深度学习训练营]中的学习记录博客** >- **&#x1f356; 原作者&#xff1a;[K同学啊]** 本人往期文章可查阅&#xff1a; 深度学习总结 基础任务 1.了解什么是生成对抗网络2.生成对抗网络结构是怎么样的3.学习本文代码&am…

浅谈云计算03 | 云计算的技术支撑(云使能技术)

云计算的技术支撑 一、定义与内涵1.1 定义与内涵 二、云计算使能技术架构2.1 宽带网络和 Internet 架构2.2 数据中心技术2.3 虚拟化技术2.4 Web 技术2.5 多租户技术2.6 服务技术 一、定义与内涵 1.1 定义与内涵 云计算技术包含一些基础的关键技术&#xff0c;这里称为使能技术…

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…

【数字化】华为-用变革的方法确保规划落地

导读&#xff1a;华为在数字化转型过程中&#xff0c;深刻认识到变革的必要性&#xff0c;并采用了一系列有效的方法确保转型规划的有效落地。华为认为&#xff0c;数字化转型不仅仅是技术层面的革新&#xff0c;更是企业运作模式、流程、组织、文化等深层次的变革。数字化转型…

Vue2+OpenLayers给标点Feature添加信息窗体(提供Gitee源码)

目录 一、案例截图 二、安装OpenLayers库 三、代码实现 3.1、信息窗体DOM元素 3.2、创建Overlay 3.3、创建一个点 3.4、给点初始化点击事件 3.5、完整代码 四、Gitee源码 一、案例截图 二、安装OpenLayers库 npm install ol 三、代码实现 初始化变量&#xff1a; d…

CRMEB多商户商城系统JAVA版 B2B2C商家入驻平台系统独立版全开源

系统框架 基于Java vueuni-app开发&#xff0c;并采用业界主流开发框架SpringBoot; 前端开发中&#xff0c;Web PC管理端使用vue element山&#xff0c;移动端使用uni-app框架&#xff0c;前后端分离开发;

【Linux】进程状态

一、概念 我们需要知道进程的不同状态。一个进程可以有几个状态&#xff08;在Linux内核里&#xff0c;进程有时候也叫做任务&#xff09; 在操作系统原理中&#xff1a;运行状态分为以下三种&#xff1a;运行状态&#xff08;执行&#xff09;、阻塞状态、就绪状态 1. 运行状…

UE材质节点Fresnel

Fresnel节点 ExponentIn 控制边缘透明度 BaseReflectFractionIn 控制中心透明度

LeetCode100之搜索二维矩阵(46)--Java

1.问题描述 给你一个满足下述两条属性的 m x n 整数矩阵&#xff1a; 每行中的整数从左到右按非严格递增顺序排列。每行的第一个整数大于前一行的最后一个整数。 给你一个整数 target &#xff0c;如果 target 在矩阵中&#xff0c;返回 true &#xff1b;否则&#xff0c;返回…

“AI 自动化效能评估系统:开启企业高效发展新征程

在当今数字化飞速发展的时代&#xff0c;企业面临着日益激烈的市场竞争&#xff0c;如何提升效率、降低成本成为了企业生存与发展的关键。AI 自动化效能评估系统应运而生&#xff0c;它如同一把智能钥匙&#xff0c;为企业开启了高效发展的新征程。 AI 自动化效能评估系统&…

primitive 编写着色器材质

import { nextTick, onMounted, ref } from vue import * as Cesium from cesium import gsap from gsaponMounted(() > { ... })// 1、创建矩形几何体&#xff0c;Cesium.RectangleGeometry&#xff1a;几何体&#xff0c;Rectangle&#xff1a;矩形 let rectGeometry new…

提供的 IP 地址 10.0.0.5 和子网掩码位 /26 来计算相关的网络信息

网络和IP地址计算器 https://www.sojson.com/convert/subnetmask.html提供的 IP 地址 10.0.0.5 和子网掩码位 /26 来计算相关的网络信息。 子网掩码转换 子网掩码 /26 的含义二进制表示:/26 表示前 26 位是网络部分&#xff0c;剩下的 6 位是主机部分。对应的子网掩码为 255…

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

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

6.1 MySQL数字函数和条件函数

以前我们在课程中使用过一些mysql的内置函数&#xff0c;比如说四舍五入的round函数&#xff0c;做日期计算的data, datediff函数等等。那么本次课程咱们就来系统的学习一下mysql的这些内置函数&#xff0c;我们使用编程语言写程序的时候&#xff0c;通常会把某一项业务功能封装…

【如何从0到1设计测试用例使用Fiddler完成弱网测试】

&#x1f308;个人主页&#xff1a;努力学编程’ ⛅个人推荐&#xff1a; c语言从初阶到进阶 JavaEE详解 数据结构 ⚡学好数据结构&#xff0c;刷题刻不容缓&#xff1a;点击一起刷题 &#x1f319;心灵鸡汤&#xff1a;总有人要赢&#xff0c;为什么不能是我呢 ⭐⭐⭐测试用…

Oracle EBS GL定期盘存WIP日记账无法过账数据修复

系统环境 RDBMS : 12.1.0.2.0 Oracle Applications : 12.2.6 问题症状 用户反映来源为“定期盘存”和类别为“WIP”的日记账无法过账,标准日记账的界面上的过账按钮灰色不可用。但是,在超级用户职责下,该日记账又可以过账,细心检查发现该业务实体下有二个公司段值15100和…

【Axure视频教程】中继器表格——拖动排序

今天教大家在Axure用中继器制作拖动排序效果的原型模板&#xff0c;我们可以通过拖动的方式&#xff0c;将对应的行摆放到任意位置&#xff0c;效果如下图所示&#xff1a; 这个原型模板是用中继器制作的&#xff0c;所以使用也很简单&#xff0c;只需要在中继器表格里填写对应…

python学opencv|读取图像(三十一)缩放图像的三种方法

【1】引言 前序学习进程中&#xff0c;我们至少掌握了两种方法&#xff0c;可以实现对图像实现缩放。 第一种方法是调用cv2.resize()函数实现&#xff0c;相关学习链接为&#xff1a; python学opencv|读取图像&#xff08;三&#xff09;放大和缩小图像_python opencv 读取图…

Elasticsearch:使用全文搜索在 ES|QL 中进行过滤 - 8.17

8.17 在 ES|QL 中引入了 match 和 qstr 函数&#xff0c;可用于执行全文过滤。本文介绍了它们的作用、使用方法、与现有文本过滤方法的区别、当前的限制以及未来的改进。 ES|QL 现在包含全文函数&#xff0c;可用于使用文本查询过滤数据。我们将回顾可用的文本过滤方法&#xf…