这篇指南是针对Android开发者的,目的是让一个没有接触过Flutter的Android程序员快速开发出Flutter插件, 所以笔者默认各位读者已经有了JDK、SDK、Android Studio等开发环境和IDE。
Flutter环境搭建
1.下载Flutter SDK
2.解压下载到的压缩包
解压路径如D:\env\flutter,不要解压到Program Files
目录下,因为操作该目录需要更高的权限。
3.安装Flutter
进入flutter根目录,双击flutter_console.bat
,等待flutter安装完成。
tips:
如果想要在一般的cmd中直接使用flutter commands,需要配置环境变量:
将你的flutter\bin
路径添加到环境变量path
中
然后重新打开cmd,运行flutter help
确认结果
4.确认Flutter环境
运行以下命令:
flutter doctor
一般输出如下:
C:\Users\wxj>flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel stable, v1.2.1, on Microsoft Windows [Version 6.1.7601],
locale zh-CN)
[!] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
! Some Android licenses not accepted. To resolve this, run: flutter doctor
--android-licenses
[!] Android Studio (version 2.3)
X Flutter plugin not installed; this adds Flutter specific functionality.
X Dart plugin not installed; this adds Dart specific functionality.
[!] Android Studio (version 3.2)
X Flutter plugin not installed; this adds Flutter specific functionality.
X Dart plugin not installed; this adds Dart specific functionality.
[!] Connected device
! No devices available
! Doctor found issues in 4 categories.
C:\Users\wxj>
可见检查出了4个问题,除了Android Studio没有安装flutter插件的提示外,其他没什么需要注意的。
5.Android Studio安装Flutter插件
- 启动AS
- 进入插件页面 (Preferences > Plugins on macOS, File > Settings > Plugins on Windows & Linux).
- 选择
Browse repositories
, 搜索flutter
,安装Flutter plugin - 安装完成后重启AS
测试Flutter开发环境
创建一个test工程,测试flutter开发环境。
- 选择
File > New Flutter Project
- 选择
Flutter application
作为应用类型 - 在
Flutter SDK Path
一栏指定你的flutter SDK安装路径 - 输入项目名称,点击下一步
- 等待AS创建工程
- 运行
main.dart
(第一次运行需要较长时间的编译)
运行成功后设备上会看到如下页面
说明flutter开发环境已就绪。接下来就可以开发你的flutter插件了。
开发你的Flutter项目
在开始前,首先要确定你是要开发一个dart package还是一个plugin package,我们是要为既存的sdk开发一个flutter插件,所以是plugin package。
创建项目有两种方式:命令行 和 Android Studio/create flutter project,下面是命令行创建,你也可以通过Android Studio的UI创建,注意在创建时选对你要创建Dart package还是plugin package即可。
dart package
Dart package是通过 --template=package 创建的:
flutter create --template=package hello
该命令会创建一个 hello/ 目录,其中包括:
- lib/hello.dart:
该包的Dart代码. - test/hello_test.dart:
该包的单元测试代码.
plugin package
创建package
plugin package是通过 --template=plugin 创建的。
flutter create --org com.example --template=plugin hello
上述命令会创建一个 hello/
文件夹,其内容如下:
- lib/hello.dart:
你要实现的插件的dart api - android/src/main/java/com/example/hello/HelloPlugin.java:
插件api的安卓平台实现 - ios/Classes/HelloPlugin.m:
插件api的ios平台实现 - example/:
flutter的示例应用
默认使用OC和java,如果想使用swift或者kotlin,那么可以指定,ios用-i,android用-a:
flutter create --template=plugin -i swift -a kotlin hello
接下来就可以开发你的flutter plugin了,最后你可能会想要写一些文档,可以参考:
Adding documentation
发布到pub.dartlang.org
开发完成后你可以将你的插件发布到Pub site,方便用户使用。
在发布之前,先确认一下pubspec.yaml
文件中关于plugin的设置是否正确:
# The following section is specific to Flutter.
flutter:
# This section identifies this Flutter project as a plugin project.
# The androidPackage and pluginClass identifiers should not ordinarily
# be modified. They are used by the tooling to maintain consistency when
# adding or updating assets for this project.
plugin:
androidPackage: cn.smssdk.flutter
pluginClass: MobsmsPlugin
这里要指定正确的plugin的包名和类名,androidPackage
只有android用得到,而pluginClass
则是iOS和Android都要用到的,所以类名需要统一。这里的设置会上传到flutter服务器,当用户在线集成你的plugin时,flutter会根据这个设置自动帮用户生成下面这个类:
package io.flutter.plugins;
import io.flutter.plugin.common.PluginRegistry;
import cn.smssdk.flutter.MobsmsPlugin;
/**
* Generated file. Do not edit.
*/
public final class GeneratedPluginRegistrant {
public static void registerWith(PluginRegistry registry) {
if (alreadyRegisteredWith(registry)) {
return;
}
MobsmsPlugin.registerWith(registry.registrarFor("cn.smssdk.flutter.MobsmsPlugin"));
}
private static boolean alreadyRegisteredWith(PluginRegistry registry) {
final String key = GeneratedPluginRegistrant.class.getCanonicalName();
if (registry.hasPlugin(key)) {
return true;
}
registry.registrarFor(key);
return false;
}
}
所以,如果之前没有指定正确的plugin包名和类名, 就会导致自动生成的代码中出现错误。
如果是在flutter项目下直接查看java代码,可能会提示
import cn.smssdk.flutter.MobsmsPlugin
找不到,无法使用相关类,不用在意,你可以"右键flutter项目 → Flutter → Open Android Module in Android Studio",直接打开flutter的安卓项目,AS会自动下载相关依赖(包括插件中的module),在该视图下编译就不会有报错了,并且这两边会自动同步,任意一边运行项目都会产生同一个flutter apk。
- 通过以下命令,验证项目没有问题:
flutter packages pub publish --dry-run
- 通过以下命令发布:
flutter packages pub publish
用户如何使用你的插件
以mobsms插件的集成为例。
1. dart代码集成
在 hello/pubspec.yaml 中添加以下代码:
dependencies:
mobsms: ^0.0.3
在你项目的Dart中添加以下代码:
import 'package:mobsms/mobsms.dart'
这样,就可以在你的main.dart中使用mobsms plugin中定义的dart api了。
2. 平台相关(android/ios)代码集成
Android
在 hello/android/build.gradle中添加:
android {
// lines skipped
dependencies {
provided rootProject.findProject(":mobsms")
}
}
这样就可以在你的hello/android/src
下的类中import cn.smssdk.flutter.MobsmsPlugin
并使用MobsmsPlugin
中的api了。
Java代码仍然建议在Android视图下查看,不要在Flutter视图下查看。
iOS
在hello/ios/hello.podspec
中:
Pod::Spec.new do |s|
# lines skipped
s.dependency 'mob_smssdk'
这样就可以在你的hello/ios/Classes
下的类中#import "MobsmsPlugin.h"
并使用MobsmsPlugin
中的api了。
更多信息可参考 Handling package interdependencies
Demo
如果你是要开发一个Plugin Package,可以参考 mobsms
:
SMSSDK-for-Flutter
如果你要开发一个Dart Package,需要集成第三方Plugin Package,可以参考:
sms_flutter_tester