Flutter外掛開發

nerdMoss發表於2019-09-12
Flutter

前言

使用Flutter進行應用開發時，為實現一些功能（比如WebView載入網頁、實現視訊控制元件等）我們會引入三方外掛，這些外掛我們都可以在pub.dartlang.org/flutter網站中進行查詢，然後在flutter工程中配置pubspec.yaml檔案來引入。那麼，如果我們需要實現的功能對應的外掛在該網站上沒有怎麼辦呢，這時候就需要我們自己來開發特定的外掛了。本篇我們就來介紹一下如何開發自己的外掛和如何在專案中使用。

開發Flutter外掛

建立外掛專案

首先，我們建立一個指定資料夾demo_0414，然後在終端命令列中該資料夾下使用以下flutter命令根據外掛模板建立一個外掛專案

flutter create -t plugin flutter_plugin_demo
複製程式碼

執行完成後，會在demo_0414目錄下生成一個flutter plugin專案，使用Android Studio開啟專案目錄結構如下

Flutter外掛開發

目錄結構中我們可以看到比平常建立的flutter專案多了一個example目錄，這個就是對應外掛的例子工程，它是一個flutter application專案，當我們外掛專案的功能開發完成後，可以通過example工程寫一些plugin api的具體使用例項，以便釋出後讀者通過example能夠更快速的學習該外掛的使用方法。

我們看到外掛專案的lib目錄下有一個模板生成的dart檔案，該檔案包含的FlutterPluginDemo就是一個外掛類，其內部實現了一個獲取平臺系統版本的方法，該方法是通過實現的Platform Channel來獲取版本號資訊的，我們檢視外掛工程內的android和ios目錄中確實有對應的Platform Channel實現。

外掛功能開發

建立好的外掛專案中已經為我們實現好了一個獲取平臺系統版本號的外掛類，那麼，我們如果想實現自己所需要的功能該如何編寫對應的程式碼呢？

安卓平臺程式碼新增

在新增安卓平臺程式碼之前，需要確保外掛程式碼通過example工程被構建過一次（這很重要），可以執行以下命令進行構建

//首先執行
cd flutter_plugin_demo/example/

//然後執行
flutter build apk
複製程式碼

example工程中構建安卓apk包完成後，可以通過Android Studio開啟example專案中的安卓工程，編輯器中的專案結構如下

Flutter外掛開發

我們可以看到以android專案目錄結構展示外掛對應的java類程式碼位於flutter_plugin_demo/java/com.example.flutter_plugin_demo/目錄下，此時我們就可以編輯該類檔案新增外掛功能了。

iOS平臺程式碼新增

在新增iOS平臺程式碼之前，同安卓一樣，也要確保外掛程式碼通過example工程被構建過一次，可以執行以下命令進行構建

//首先執行
cd flutter_plugin_demo/example/

//然後執行
flutter build ios --no-codesign
複製程式碼

構建完成後，我們可以使用Xcode開啟example工程中iOS專案，找到ios目錄下的Runner.xcworkspace並開啟，編輯器中的專案結構如下

Flutter外掛開發

我們可以看到外掛程式碼位於Pods/Development Pods/flutter_plugin_demo/../../example/ios/.symlinks/plugins/目錄下，此時我們就可以編輯FlutterPluginDemoPlugin類來新增外掛功能了。

dart api程式碼新增

dart api程式碼新增就簡單多了，直接在外掛專案的lib下的dart檔案中新增即可

外掛的使用

自有外掛開發完成後如何使用呢，有三種引用方式

  1. 將外掛釋出到pub上，就可以使用常規的引用方式（釋出pub上即公開，大家都可以使用，如果是私有的不要這樣做）；
dependencies:
  dio: 2.1.x
複製程式碼
  1. 將外掛工程上傳到git庫上，可以通過指定git地址的方式引用；
dependencies:
  dio:
    git:
      url: git://github.com/flutterchina/dio.git
複製程式碼
  1. 可以通過相對路徑的方式引入本地外掛；
// 比如example工程中的pubspec.yaml中引入我們的demo外掛的方式
dependencies:
  flutter_plugin_demo:
    path: ../
    
// 如果建立一個與外掛目錄平級目錄的flutter專案，引入外掛則在pubspec.yaml中配置
dependencies:
  flutter_plugin_demo:
    path: ../flutter_plugin_demo
複製程式碼

外掛引入之後，我們就可以在自己的flutter專案中通過dart api使用外掛開發的功能了。

總結

Flutter plugin的開發流程其實挺簡單，一定要注意新增外掛程式碼之前要使用example工程對平臺程式碼構建一次，這樣才會在example工程目錄中正常顯示外掛檔案以供編輯。

通過以上步驟即可完成flutter外掛專案的建立和外掛功能的新增，如果外掛功能實現時需要依賴三方外掛，那麼外掛專案中同樣可以通過pubspec.yaml引入三方外掛。後續我們在開發分享功能時如果找不到實現好的分享外掛，自己就可以來實現了，如果你想公開供大家使用還可以釋出到pub上分享出來。

說明：

文章轉載自對應的“Flutter程式設計指南”微信公眾號，更多Flutter相關技術文章開啟微信掃描二維碼關注微信公眾號獲取。

Flutter外掛開發

相關文章