從頭開發一個Flutter外掛(一)開發流程

kinsomy發表於2018-11-05

文章由來

在上一篇分享的文章Flutter 天氣應用裡我介紹了一個用flutter編寫的天氣預報app,裡面有一個需要完善的功能就是根據當前定位所在城市顯示天氣資訊。由於沒有辦法使用gms(google mobile service)的緣故,flutter官方提供的基於Google map的定位package沒有辦法直接引入到專案中使用,因此我就想到基於高德地圖的sdk來做一款相同的外掛,既可以為天氣app服務,也可以以後在其他專案裡直接拿來使用。

再者就是滿足一下能自己發一個flutter package的小願望。

外掛介紹

在flutter中,一個外掛叫做一個package,使用packages的目的就是為了達到模組化,可以建立出可被複用和共享的程式碼,這和大多數程式語言中的模組、包的概念相同。建立出來的package可以在pubspec.yaml中直接依賴。

一個最小化的package包含了兩部分:

  • 一個pubspec.yaml檔案:一個後設資料檔案,宣告瞭宣告瞭package的名稱、版本、作者等資訊。

  • 一個lib資料夾:包含裡package的公開程式碼,資料夾至少需要存在<pakcage-name>.dart這個檔案。

注意:<pakcage-name>.dart這個檔案必須存在,因為這是方便使用的人快速import這個package來使用它,可以把它理解成一種必須要遵守的規則。

package的種類

package可以分為兩種:純dart程式碼的package和帶有特定平臺程式碼的package。

  • Dart packages:這是一個只有dart程式碼的package,裡面包含了flutter的特定功能,所以它依賴於flutter的framework,也決定了它只能用在flutter上。

  • plugin packages:這是一個既包含了dart程式碼編寫的api,又包含了平臺(Android/IOS)特定實現的package,可以被Android和ios呼叫。

上面應該很好理解,可以理解成java jar包和Android sdk的區別。而要開發的定位package就是第二種。

開發plugin pakcage實踐

官方推薦的做法使用命令列建立一個package。

首先是建立一個dart package,這裡不多做講述很簡單,執行以下命令即可。

$ flutter create --template=package hello

建立plugin package

我們使用如下命令建立一個plugin package,template選擇了plugin:

$ flutter create --org com.kinsomy --template=plugin amap_location_plugin

預設情況下,建立的plugin專案是使用objective-c(ios)和java(Android)編寫,如果需要增加對swift和kotlin的支援,可以在命令中新增 -i 和 -a。

$ flutter create --org com.kinsomy --template=plugin amap_location_plugin -i swift -a kotlin hello

因為我是用Android studio開發,因此也可以用Android studio直接建立:選擇新建FLutter project,然後選擇plugin project即可。swift和kotlin的支援在建立介面上勾選即可。

專案結構

建立完成後看到整個plugin專案的結構:

從頭開發一個Flutter外掛(一)開發流程

  • lib/amap_location_plugin.dart 這是plugin package中dart api的程式碼部分,是供使用者在他們自己的flutter專案中呼叫的介面程式碼。

  • AmapLocationPlugin.java 這是plugin package中Android部分的具體實現,要和上面的dart api配合進行開發。

  • ios/ 這裡是plugin package ios部分的具體實現,和上面Android實現類似,編寫ios平臺特定程式碼。

  • example/ 這是用來說明使用plugin package的示例程式碼,裡面原始碼依賴了寫好的plugin。

程式碼實現

細節會在下一篇文章中詳細講述。

先貼上程式碼倉庫地址 github.com/KinsomyJS/l…

目前我的plugin只針對Android平臺開發。對於plugin專案我需要同時編寫java程式碼和dart程式碼,java程式碼寫在android/src/main/java/com/green/kinsomy/application目錄下,主要工作是接入高德定位sdk,同時和dart程式碼進行互動,dart程式碼則在lib目錄下編寫,再次提醒資料夾內至少需要存在<pakcage-name>.dart這個檔案。

釋出packages

當你寫完了自己的plugin專案,並且測試通過後,就可以釋出出去供其他人使用,最好在example裡面編寫示例程式碼。

在釋出之前,檢查pubspec.yaml、README.md以及CHANGELOG.md檔案,pubspec.yaml內的作者,版本號,名稱等資訊是必填的,README.md文件則是描述你的plugin的用處和使用方法,CHANGELOG.md記錄的版本的迭代資訊。

所有的工作都完成之後,執行命令檢check是不是都完整。

$ flutter packages pub publish --dry-run

如果所有工作無誤的話,就可以執行釋出命令了。

$ flutter packages pub publish

然後你就可以在pub庫裡面搜尋自己釋出的package名稱找到他。

從頭開發一個Flutter外掛(一)開發流程

可以在package主頁上看到一個分數標誌,在哪裡會告訴你如何提高你的分數,比如提供更加詳細的說明以及完整的使用文件等等。

github專案地址: github.com/KinsomyJS/l…

參考文件

  1. Developing Packages & Plugins

  2. flutter/plugins git倉庫

  3. Dart packages

相關文章