1. 程式人生 > >Flutter進階—平臺外掛

Flutter進階—平臺外掛

這篇文章我們會學習Flutter應用程式如何與iOS和Android裝置上可用的平臺特定程式碼整合,這包括裝置API,(比如url_launcher和battery)和第三方平臺SDK(比如Firebase)。

使用現有的平臺外掛

Flutter外掛是一種特殊的包,一個外掛包含一個用Dart編寫的API定義,結合Android的平臺特定實現,適用於iOS或兩者相容。

搜尋外掛

現有的Flutter外掛可以在Flutter外掛倉庫查詢,其顯示在pub儲存庫中共享的外掛。因為Flutter仍然是一個年輕的語言,目前在pub上只有一小部分外掛,需要作為Flutter程式設計師的我們開發和釋出新的外掛!

在程式中新增外掛

如果要新增一個外掛“plugin1”到一個應用程式:

  1. 開啟您的應用程式資料夾中的pubspec.yaml檔案,並在dependencies下新增plugin1

  2. 獲取外掛
    在終端中:執行flutter packages get
    在IntelliJ中:在pubspec.yaml頂部的動作功能區中點選“Packages Get”

  3. 構建或執行您的應用程式,作為其中的一部分,Flutter將“插入”平臺特定的程式碼,從外掛到您的應用程式。

演示例項

URL Launcher外掛允許您開啟移動平臺上的預設瀏覽器來顯示給定的URL,它在Android和iOS上均受支援。我們就寫一個使用Flutter URLLauncher外掛啟動瀏覽器的例項。

首先開啟pubspec.yaml,並新增url_launcher外掛:

dependencies:
  flutter:
    sdk: flutter
  url_launcher: "^2.0.2"

新增完成之後記得點選頂部的“Packages Get”,然後再開啟lib/main.dart,並將其全部內容替換為以下程式碼:

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

void main() {
  runApp(new MyApp());
}

class
MyApp extends StatelessWidget {
@override Widget build(BuildContext context) { return new MaterialApp( title: 'Flutter Demo', home: new DemoPage(), ); } } class DemoPage extends StatelessWidget { launchURL() { launch('https://www.baidu.com/'); } @override Widget build(BuildContext context) { return new Scaffold( body: new Center( child: new RaisedButton( onPressed: launchURL, child: new Text('百度首頁'), ) ) ); } }

執行應用程式,當您點選“百度首頁”時,您應該會看到手機的預設瀏覽器開啟,並顯示百度首頁。

建立一個平臺外掛

如果您希望在多個Flutter應用程式中使用特定於平臺的程式碼,將程式碼分離到位於主應用程式之外的目錄中,作為平臺外掛是很好的方案,甚至還能分享給所有Flutter開發人員。

您可以使用–plugin標記與flutter create建立一個外掛專案。使用–org選項指定您的組織,使用反向域名符號,該值用於生成的Android和iOS程式碼中的各種包和包識別符號。

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

這將在hello/資料夾中建立一個包含以下內容的外掛專案:

  • lib/hello.dart
    外掛的Dart API

  • android/src/main/java/com/yourcompany/hello/HelloPlugin.java
    Android平臺具體實現外掛API

  • ios/Classes/HelloPlugin.m
    iOS平臺具體實現外掛API

  • example/
    一個如何使用外掛的Flutter應用程式,外掛的使用說明

預設情況下,該外掛專案使用Objective-C的iOS程式碼和Java的Android程式碼。如果您喜歡Swift或Kotlin,則可以使用-i指定iOS語言或使用-a指定Android語言。

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

編輯外掛的原始碼

外掛API程式碼(.dart)

要編輯Dart外掛API程式碼,需要在IntelliJ IDEA(或者您喜歡的Dart編輯器)中開啟hello/,外掛API位於專案檢視中顯示的lib/main.dart中。

要執行外掛,您需要啟動外掛示例應用程式,這需要定義啟動配置:

  1. 選擇“Run > Edit Configurations…”
  2. 選擇“+”,然後選擇“Flutter”
  3. 在“Dart entrypoint”,輸入<plugin folder>/example/lib/main.dart
  4. 選擇“OK”
  5. 使用“Run”或“Debug”啟動示例應用程式

Android平臺的程式碼(.java/.kt)

在Android Studio中編輯Android平臺程式碼之前,首先要確保程式碼已經構建至少一次,即從IntelliJ執行示例應用程式,或在終端中執行cd hello/example; flutter build apk

接下來,進行以下操作:

  1. 啟動Android Studio
  2. 在“Welcome to Android Studio”對話方塊中選擇“Import project”,或者在選單中選擇“File > New > Import Project…”,然後選擇hello/example/android/build.gradle檔案
  3. 在“Gradle Sync”對話方塊中,選擇“OK”
  4. 在“Android Gradle Plugin Update”對話方塊中,選擇“Don’t remind me again for this project”

您的外掛的Android平臺程式碼位於hello/java/com.yourcompany.hello/HelloPlugin中,您可以通過按▶按鈕從Android Studio執行示例應用程式。

iOS平臺的程式碼(.h+.m/.swift)

在編輯Xcode中的iOS平臺程式碼之前,首先要確保程式碼已經構建至少一次,即從IntelliJ執行示例應用程式,或在終端中執行cd hello/example; flutter build ios

接下來,進行以下操作:

  1. 啟動Xcode
  2. 選擇“File > Open”,然後選擇hello/example/ios/Runner.xcworkspace檔案

外掛的iOS平臺程式碼位於專案導航器中的Pods/Development Pods/hello/Classes/中,您可以通過按▶按鈕執行示例應用程式。

管理從Flutter程式到Flutter外掛的依賴關係

一旦外掛已經發布,您可以依賴它,只需在pubspec.yaml中列出它的名稱,比如上面的例子。在開發尚未釋出的外掛或者不適用於公開發布的私有外掛的開發中,依賴於外掛還有其他的方法:

  • Path依賴:Flutter應用程式可以通過檔案系統路徑依賴path: dependency,該路徑可以是相對的,也可以是絕對路徑。例如,要使用位於應用程式旁邊的目錄中的外掛“plugin1”,請使用以下語法:
dependencies:
  flutter:
    sdk: flutter
  plugin1:
    path: ../plugin1/
  • Git依賴:您還可以依賴於儲存在Git儲存庫中的包,包必須位於報告(Repo)的根部,使用以下語法:
 dependencies:
   flutter:
     sdk: flutter
   plugin1:
     git:
       url: git://github.com/flutter/plugin1.git

釋出平臺外掛

一旦你實現了外掛,你可以在Pub釋出。這使得其他開發人員可以輕鬆地使用它,如同上述UrlLauncher的演示例項。釋出的方法會在以後的文章中詳細講解…