Flutter Packages & Plugins(一)

Flutter Packages & Plugins.

Posted by 杨小狼不吃羊 on 2020-07-16
Words 2.4k and Reading Time 9 Minutes
Viewed Times

Flutter Packages & Plugins(一)

Flutter是谷歌的移动UI框架,可以快速在iOS和Android上构建高质量的原生用户界面,这几年随着Google的大力推广和不断完善,Flutter正在被越来越多的开发者和组织使用.

1. 为什么使用Flutter开发

  • 性能强大,界面美观、流畅
    Flutter与用于构建移动应用程序的其它大多数框架不同,既不使用webView,也不使用操作系统的原生控件,而是使用自己开发的高性能渲染引擎来绘制UI(分别实现了material design和ios风格两套风格)。
  • 热重载
    热重载可以帮助我们再无需重启应用的情况下实现毫秒级的运行最新代码,解决Android修改一点代码,编译运行半天的烦恼
  • 跨平台
    Flutter早期实现了android和ios两个移动平台跨平台开发,随着版本迭代,现已支持fuchsia、macos、windows、linux桌面应用以及Web应用的开发。可以说Flutter真正实现了write once ,run anywhere,Learn onece write anywhere,可可大大介绍跨平台应用开发的难度,让开发者快速具备开发桌面应用和移动设备应用的能力,这也是我最看重的特性。

    2. 问题

  • 但是Flutter毕竟只是一个UI框架,如果我们仅仅只是简单的应用完全可以用纯flutter实现,但是如果涉及到各平台的特性和差异,又或者我们有大量的现成的各平台代码无法切换到dart,如我们公司的统一认证、OCR识别、NFC识别等等,那么怎么办呢?
  • 在Android开发时我们经常会有一些公共的组件库发布到jcenter,或私有的maven仓库供其他项目使用,那在flutter中我们怎么去使用我们的公共组件呢?

幸运的是,flutter提供了调用原生代码的能力,这就是我们今天要讲的主题Flutter的Packages和Plugins的开发。

3. 初识Packages

3.1 认识pub

pub是用来管理dart和flutter的工具,我们可以在该网站查查找google官方和其他开发者发布的packages,在packages的主页里我们可以查看packages是否支持flutter、以及插件支持的客户端平台、使用文档、example、作者信息等
20201103002334-WX20201103-002324

3.2 Packages分类

  • 纯Dart
  • 原生插件

3.3 Packages的使用

3.3.1 添加依赖

打开应用文件夹下的 pubspec.yaml 文件,然后在 pubspec.yaml 下添加依赖,如我之前发布的两个packages,在dependencies对象下添加如下依赖

1
2
xdja_bridge: ^0.0.6
gprs_convert: ^0.0.2

3.3.2 安装&使用

可以通过以下方式安装packages

  • 在命令行运行flutter pub get
  • 在 Android Studio/IntelliJ 中点击pubspec.yaml 文件顶部操作功能区的 Packages get
  • 在 VS Code 中点击位于 pubspec.yaml 文件顶部操作功能区右侧的 Get Packages,或在编辑完pubspec.yaml文件之后使用ctrl+s(command+s),保存文件之后会自动执行flutter pub get命令

安装完成后我们就可以在代码中import相关的包并使用了。

3.3.3 冲突解决

冲突解决分为package自身冲突以及各平台本身依赖的冲突,具体可点击链接查阅相关文档
冲突解决

4. 开发Package

Package 包含以下两种类别:

  • 纯 Dart 库 (Dart packages)
    用 Dart 编写的传统 package,中一些可能包含 Flutter 的特定功能,因此依赖于 Flutter 框架,其使用范围仅限于 Flutter
  • 原生插件 (Plugin packages)
    使用 Dart 编写的,按需使用 Java 或 Kotlin、ObjC 或 Swift 分别在 Android 和/或 iOS 平台实现的 package。

4.1 创建package

想要创建package,我们可以使用带有--template=package 标志的 flutter create 命令:

1
flutter create --template=package hello

执行这个命令会在目录里生成一个名称为hello的纯dart package,当然我们可以通过添加参数来进行更多的自定义,更多的参数说明我们可以通过命令行获知:
1
flutter help create

其中与packgae创建相关的常用参数如下:

  • org 包名
  • template 创建类型,app:应用,module:创建一个module添加至android或ios项目,package:可分享的flutter包,plugin:插件

  • -a:android -i:ios

  • —platforms android

    platforms Flutter 1.20.0 版本之后可用

添加完参数之后,我们常用的命令如下:

1
2
3
4
5
6
7
8
9
10
11
//创建纯dart库的package
flutter create --template=package bridge
//创建包含了example但不包含任何平台实现的package
flutter create --template=plugin bridge
//创建包含了example,并指定包名但不包含任何平台实现的package
flutter create --org com.xdja.flutter.bridge --template=plugin xdja_bridge
//创建android&ios插件项目
flutter create --org com.xdja.flutter.bridge --template=plugin --platforms android -a kotlin -i swift xdja_bridge

//在已有项目创建新平台的实现
flutter create -t plugin --platforms <platforms> .

前两个命令可以创建全新的工程,后一个命令可以在已有的工程添加对新平台的支持。

一个创建好的项目结构如下:
20201103003012-WX20201103-003006

4.2 指定插件支持的平台

插件可以通过向 pubspec.yaml 中的 platforms map 添加 keys 来指定其支持的平台。例如,以下是 xdja_bridge 插件的 flutter: map:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
flutter:
plugin:
platforms:
android:
package: com.xdja.flutter.bridge
pluginClass: BridgePlugin
# macos和web未实现
ios:
pluginClass: BridgePlugin
macos:
pluginClass: BridgePlugin
web:
pluginClass: HelloPlugin
fileName: bridge_web.dart

environment:
sdk: ">=2.1.0 <3.0.0"
# Flutter versions prior to 1.12 did not support the
# flutter.plugin.platforms map.
flutter: ">=1.12.0 <2.0.0"

4.3 实现Package

由于原生插件类型的 package 包含了使用多种编程语言编写的多个平台代码,因此需要一些特定步骤来保证体验的流畅性。

4.3.1 定义 package API(.dart)

原生插件类型 package 的 API 在 Dart 代码中要首先定义好,我们可以使用VS CodeAndroid Studio编辑package目录下lib/xxxx.dart,例如我上面创建的package就可以通过编辑lib/xdja_bridge.dart定义API。
20201102221612-WX20201102-221601

4.3.2 添加Android平台代码

20201102222904-WX20201102-222857

  1. 启动Android Studio;
  2. 在 Android Studio 的欢迎菜单 (Welcome to Android Studio) 对话框中选择打开现有的 Android Studio 项目 (Open an existing Android Studio Project),或在菜单中选择 File > Open,然后选择 xdja_bridge/example/android/build.gradle 文件;
  3. 构建完成后编辑BridgePlugin.kt添加对应API的实现,并运行查看结果

5. 添加文档

20201103003728-WX20201103-003713
为了发布package并方便其他人能够快速了解并使用,我们需要添加以下文档

  1. README.md 文件用来对 package 进行介绍
  2. CHANGELOG.md 文件用来记录每个版本的更改
  3. LICENSE 文件用来阐述 package 的许可条款
  4. API 文档包含所有的公共 API

5.1 生成文档

当我们提交package时,会自动生成API文档并将其提交到 pub.flutter-io.cn/documentation,如果希望在本地开发环境生成API文档,可以按以下步骤

5.1.1 切换至package目录

1
cd ~/dev/mypackage

5.1.2 告知文档工具Flutter SDK所在位置

1
2
3
4
5
# on macOS or Linux (适用于 macOS 或 Linux 操作系统)
export FLUTTER_ROOT=~/dev/flutter

# on Windows (适用于 Windows 操作系统)
set FLUTTER_ROOT="D:\Develop Tools\flutter-sdk\"

windows环境需要注意路径

5.1.3 运行 dartdoc 工具

1
2
3
4
# on macOS or Linux (适用于 macOS 或 Linux 操作系统)
$FLUTTER_ROOT/bin/cache/dart-sdk/bin/dartdoc
# on Windows (适用于 Windows 操作系统)
FLUTTER_ROOT%\bin\cache\dart-sdk\bin\dartdoc

5.2 添加许可证

Flutter package需要添加一个许可证文件,否则发布时可能报错。
每个 LICENSE 文件中的各个许可证应由 80 个短线字符组成的线段进行分割。
如果 LICENSE 文件中包含多个组件许可证,那么每个组件许可证必须以其所在 package 的名称开始,每个 package 名称单独一行显示,并且 package 名称列表与实际许可证内容由空行隔开。(package 名称则需与 pub package 相匹配。比如,一个 package 可能包含多个第三方代码,并且可能需要为每个 package 添加许可证。)

6. 发布Package

6.1 检查package内容是否都通过了分析

通过如下命令,我们可以发现package中存在的问题,如果有问题,会给出相应的提示,例如不存在LICENSE文件、代码错误等,我们需要进行修改,直到不存在任何问题后再进行下一步操作。
20201103003346-WX20201103-003333

1
2
3
flutter pub publish --dry-run

flutter packages pub publish --dry-run --server=https://pub.dartlang.org

6.2 发布

发布是永久性的,在发布前我们需要拥有一个google账户,并确保可以正常登录。必要时我们还需要进行Publisher认证,绑定自己的域名,经过验证的发布者发布的包可以提高可信度,并且方便使用者联系到你。

通过以下命令执行发布:

1
flutter pub publish

因众所周知的原因,中国的开发者在开发时是用了Flutter的镜像,目前所存在的镜像都不能(也不应该)进行 package 的上传。如果你设置了镜像,执行上述发布代码可能会造成发布失败。故我们需要在网络条件具备之后,无需取消中文镜像,执行下述代码可直接上传:

1
flutter packages pub publish --server=https://pub.dartlang.org

This is copyright.

...

...

00:00
00:00