商务网站内容维护和管理的范围,wordpress建手机站,网站需要服务器吗,wordpress cms 中文版Flutter插件在开发Flutter项目的过程中扮演着重要的角色#xff0c;我们从 https://pub.dev 上下载添加到项目中的第三方库都是以包或者插件的形式引入到代码中的#xff0c;这些第三方工具极大的提高了开发效率。
深入的了解插件的制作、发布、工作原理和缓存机…Flutter插件在开发Flutter项目的过程中扮演着重要的角色我们从 https://pub.dev 上下载添加到项目中的第三方库都是以包或者插件的形式引入到代码中的这些第三方工具极大的提高了开发效率。
深入的了解插件的制作、发布、工作原理和缓存机制可以让我们对Flutter的插件机制有更深层次的理解在开发中想自己封装插件或者在使用第三方插件遇到问题的时候也会有更多的思路去排查问题。
本文将从以下几个方面详细的讲解Flutter插件的相关内容和原理
Flutter插件的类型介绍Flutter插件的详细制作流程以本地依赖的方式使用制作的Flutter插件以远程依赖的方式使用制作的Flutter插件将Flutter插件发布到开放平台Flutter插件的原生层如何引用自定义的FrameworkFlutter插件的缓存机制及更新原理
一篇文章带你从0开始详细深入的了解Flutter插件的所有知识让我们开始吧
一、Flutter插件的类型
引用Flutter中文社区的官方描述 Packages可以包含多种内容 Dart包其中一些可能包含Flutter的特定功能因此对Flutter框架具有依赖性仅将其用于Flutter例如fluro包。 插件包一种专用的Dart包其中包含用Dart代码编写的API以及针对Android使用Java或Kotlin和/或针对iOS使用ObjC或Swift平台的特定实现。一个具体的例子是battery插件包。 简单来说Flutter插件有两种类型
Package普通的Dart包也就是我们常说的Package里面只包含dart代码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:(NSObjectFlutterPluginRegistrar*)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
同时欢迎交流新的想法~
