Flutter 如何创建并发布 Plugin (VS Code + GitHub 发布)_MaxCong的专栏文章_微信文章

VS Code IDE 编辑器相对小众？

相信采用 Android Studio 的直接创建 Flutter Plugin 都是由 IDE 直接辅助创建好全部的流程，连 Example 的 run 动作都已经帮助配置好了。但本文是采用 VS Code 进行项目配置并运行，整个流程先从命令行开始创建，一步步的进行。

用过 VS Code 的同学发现她的界面非常简洁，代码函数提示、搜索功能、调试运行快速直接。因我是老 iOS 开发从业8年有余，使用 xcode 的人都会对在 Android Studio 编辑器中那大量无用的按钮而望而生畏，其 Android Studio 的资源浪费、卡顿性让我无法接受。反观 VSCode，其虽不是 google 的亲儿子，有些“拐棍”还是需要用一用的。所以才有了这篇发布 Plugin 的分享。

选择 Flutter 的原因

我在开发《九排》的演艺界专业产品，作为一个全新起步的手机客户端产品，需要从一个能够看得足够长远的开发套件环境对其进行支持，从2018年看到 Flutter 的正式版发布，到2019年对整套 Widget 体系和 Dart 语言环境的深入了解和反复的开发测试、性能测试，我认为 Flutter 对公司产品的将来有着良性推动和发展潜力。

本文的以创建《九排》App 脚手架开发工具包为范例讲解，脚手架开发工具包在下方：

github.com/maxcong/jpk…

一切的开始

Dart语言下包含有两种Package形态：

第一种是 Dart Package，她是一种没有 Android \ iOS 运行环境的纯 Dart 语言包

第二种是 Flutter Plugin，她则是可以运行在 Android \ iOS 的 example 测试项目下插件工程

第一步：创建 Plugin 项目文件

命令行创建 Flutter Plugin 需要打开控制台，进入到具体希望创建包的目录输入以下命令：

flutter create --org com.example --template=plugin plugin_name复制代码

其中 --org 指定的是你需要运行 example 的包标识符，此主要运行在 Andoird 和 iOS 中，而 iOS 中代表 bundle id 所指向的证书域。

后面的 --template=plugin 则是指定创建一个 Flutter plugin

创建好后，可以用 VS Code 打开 Plugin 目录，此时你会发现没有 Android Studio 的辅助，我们很难去运行 Plugin 文件。这种情况下，就要对整个项目工程目录有一个直观的理解：

lib/plugin_name.dart

插件主入口

android/

用于在 Android 中实现的插件包API

ios/

用于在 iOS 中实现的插件包API

example/

一个依赖改插件的 Flutter 可运行程序，主要是调试开发时使用，我们主要用它

第二步：VS Code中如何运行调试

首先用 VS Code 打开 Plugin 项目工程目录后，IDE 会自动的在根目录创建一个隐藏目录：.vscode/ ，这个目录下隐藏着一个 launch.json 文件，我们主要来修改它。

打开 launch.json 文件可以看到自动创建的运行脚本：

{
      "version": "0.2.0",
      "configurations": [
            {
                  "name": "Flutter"
                  "request": "launch",
                  "type": "dart"
            }
      ]
}复制代码

显然这套运行脚本不足以运行工程文件，我们需要配置一下，而配置的主要目标是要运行 example/lib/main.dart 入口文件。

修改 launch.json 进行配置：

{
      "version": "0.2.0",
      "configurations": [
            {
                  "name": "Run Plugin",
                  "program": "example/lib/main.dart", // 修改此处
                  "request": "launch",
                  "type": "dart"
            }
      ]
}复制代码

这样配置完毕，就可以让 VS Code 具备运行能力，我们可以对插件进行开发了。

正常的开发模式和普通的App的开发是完全一样的，下一步就轮到发布 Plugin 了。这里由于 Plugin 的测试时间不希望发布到 pub 平台。那我们有的可选分支发布到 GitHub 上来调试。然后才是发布到 pub 平台。

第三步：验证已经开发 Plugin 的错误

通过执行以下命令，可以在命令行中对此包进行正确性验证：

flutter packages pub publish --dry-run复制代码

发布分支1：发布到 GitHub 上如何使用

我们可以正常的上传自己开发 Plugin 到自己的 GitHub 项目里，并在本地 Push 最新的代码。但如果想要引用，需要在自己的 App 开发项目中修改 pubspec.yaml 文件，以让 packages 管理知道如何安装。修改如下：

dependencies:
    jpkit:
        git: 
            url: https://github.com/maxcong/jpkit.git复制代码

packages 管理对 pubspec.yaml 文件的缩进有严格要求。上面的代码配置告诉让 packages 管理指导 jpkit: 是从 git: 中获取，指向了 url:

注意：此处有如果频繁更新 GitHub 提交时，可能有更新不下来的缓存问题，我是通过等待一小会再次执行 flutter package get 得到最新结果。

发布分支2：发布到 pub 平台

如果你认为自己开发的 Plugin 的版本处于可发布阶段，那么可以发布她到 pub.dartlang.org/ 平台

flutter packages pub publish复制代码

OK，至此已经将 Plugin 发布到外网了，剩下的就是不停完善这个组件，以更好的融入到自己的产品工程文件当中，祝你好运。

本文的 Plugin 《九排》App 脚手架开发工具包

github.com/maxcong/jpk…