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

同时欢迎交流新的想法~