這篇指南是針對Android開發(fā)者的层亿，目的是讓一個沒有接觸過Flutter的Android程序員快速開發(fā)出Flutter插件烟号，所以筆者默認(rèn)各位讀者已經(jīng)有了JDK、SDK盾似、Android Studio等開發(fā)環(huán)境和IDE。

Flutter環(huán)境搭建

起步

1.下載Flutter SDK

Flutter SDK Archive

2.解壓下載到的壓縮包

解壓路徑如D:\env\flutter雪标，不要解壓到Program Files目錄下零院，因?yàn)椴僮髟撃夸浶枰叩臋?quán)限。

3.安裝Flutter

進(jìn)入flutter根目錄村刨，雙擊flutter_console.bat告抄，等待flutter安裝完成。

tips：

如果想要在一般的cmd中直接使用flutter commands嵌牺，需要配置環(huán)境變量：
將你的flutter\bin路徑添加到環(huán)境變量path中
然后重新打開cmd打洼，運(yùn)行flutter help確認(rèn)結(jié)果

4.確認(rèn)Flutter環(huán)境

運(yùn)行以下命令：


flutter doctor

一般輸出如下：


C:\Users\wxj>flutter doctor

Doctor summary (to see all details, run flutter doctor -v):

[a??] 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
進(jìn)入插件頁面 (Preferences > Plugins on macOS, File > Settings > Plugins on Windows & Linux).
選擇Browse repositories, 搜索flutter，安裝Flutter plugin
安裝完成后重啟AS

測試Flutter開發(fā)環(huán)境

創(chuàng)建一個test工程僻弹，測試flutter開發(fā)環(huán)境阿浓。

選擇File > New Flutter Project
選擇Flutter application作為應(yīng)用類型
在Flutter SDK Path一欄指定你的flutter SDK安裝路徑
輸入項目名稱，點(diǎn)擊下一步
等待AS創(chuàng)建工程
運(yùn)行main.dart(第一次運(yùn)行需要較長時間的編譯)

運(yùn)行成功后設(shè)備上會看到如下頁面

說明flutter開發(fā)環(huán)境已就緒蹋绽。接下來就可以開發(fā)你的flutter插件了芭毙。

開發(fā)你的Flutter項目

開發(fā)Packages和插件

在開始前，首先要確定你是要開發(fā)一個dart package還是一個plugin package卸耘，我們是要為既存的sdk開發(fā)一個flutter插件退敦，所以是plugin package。

創(chuàng)建項目有兩種方式：命令行和 Android Studio/create flutter project鹊奖，下面是命令行創(chuàng)建苛聘，你也可以通過Android Studio的UI創(chuàng)建，注意在創(chuàng)建時選對你要創(chuàng)建Dart package還是plugin package即可忠聚。

dart package

Dart package是通過 --template=package 創(chuàng)建的:


flutter create --template=package hello

該命令會創(chuàng)建一個 hello/ 目錄设哗，其中包括:

lib/hello.dart:

該包的Dart代碼.

test/hello_test.dart:

該包的單元測試代碼.

plugin package

創(chuàng)建package

plugin package是通過 --template=plugin 創(chuàng)建的。


flutter create --org com.example --template=plugin hello

上述命令會創(chuàng)建一個 hello/ 文件夾两蟀，其內(nèi)容如下：

lib/hello.dart:

你要實(shí)現(xiàn)的插件的dart api

android/src/main/java/com/example/?hello/HelloPlugin.java:

插件api的安卓平臺實(shí)現(xiàn)

ios/Classes/HelloPlugin.m:

插件api的ios平臺實(shí)現(xiàn)

example/:

flutter的示例應(yīng)用

默認(rèn)使用OC和java网梢，如果想使用swift或者kotlin，那么可以指定赂毯，ios用-i战虏，android用-a：


flutter create --template=plugin -i swift -a kotlin hello

接下來就可以開發(fā)你的flutter plugin了拣宰，最后你可能會想要寫一些文檔，可以參考：

Adding documentation

發(fā)布到pub.dartlang.org

Publishing packages

開發(fā)完成后你可以將你的插件發(fā)布到Pub site烦感，方便用戶使用巡社。

在發(fā)布之前，先確認(rèn)一下pubspec.yaml文件中關(guān)于plugin的設(shè)置是否正確：


# 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都要用到的，所以類名需要統(tǒng)一绿渣。這里的設(shè)置會上傳到flutter服務(wù)器朝群，當(dāng)用戶在線集成你的plugin時，flutter會根據(jù)這個設(shè)置自動幫用戶生成下面這個類：


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包名和類名姜胖，就會導(dǎo)致自動生成的代碼中出現(xiàn)錯誤。

如果是在flutter項目下直接查看java代碼淀散，可能會提示import cn.smssdk.flutter.MobsmsPlugin找不到右莱，無法使用相關(guān)類，不用在意档插，你可以"右鍵flutter項目 → Flutter → Open Android Module in Android Studio"隧出，直接打開flutter的安卓項目，AS會自動下載相關(guān)依賴（包括插件中的module）阀捅，在該視圖下編譯就不會有報錯了胀瞪，并且這兩邊會自動同步，任意一邊運(yùn)行項目都會產(chǎn)生同一個flutter apk饲鄙。

1. 通過以下命令凄诞，驗(yàn)證項目沒有問題：


flutter packages pub publish --dry-run

2. 通過以下命令發(fā)布：


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. 平臺相關(guān)（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

如果你是要開發(fā)一個Plugin Package窖剑，可以參考 mobsms：

SMSSDK-for-Flutter

如果你要開發(fā)一個Dart Package，需要集成第三方Plugin Package戈稿，可以參考：

sms_flutter_tester

Android與Flutter橋接指南