一、Flutter四種工程類型
Flutter工程中瓮顽,通常有以下幾種工程類型围橡,下面分別簡單概述下:
- Flutter Application
標(biāo)準(zhǔn)的Flutter App工程,包含標(biāo)準(zhǔn)的Dart層與Native平臺層 - Flutter Module
Flutter組件工程翁授,僅包含Dart層實現(xiàn),Native平臺層子工程為通過Flutter自動生成的隱藏工程 - Flutter Plugin
Flutter平臺插件工程贮配,包含Dart層與Native平臺層的實現(xiàn) - Flutter Package
Flutter純Dart插件工程炬守,僅包含Dart層的實現(xiàn),往往定義一些公共Widget
二减途、Flutter 組件化實施細(xì)節(jié)
1、了解一下 Plugin 原理
Flutter Plugin 提供Android或者iOS的底層封裝辽剧,在Flutter層提供組件功能税产,使Flutter可以較方便的調(diào)取Native的模塊。
很多平臺相關(guān)性或者對于Flutter實現(xiàn)起來比較復(fù)雜的部分辟拷,都可以封裝成Plugin。其原理如下:
iOS: AppDelegate -> FlutterViewController -> iOS Platform API(及第三方依賴)
Android: Activity -> FlutterView -> Android Platform API(及第三方依賴)
Plugin 中诀紊,F(xiàn)lutter 和 原生的交互也是通過 Platform Method Channel 來實現(xiàn)的隅俘,但是這部分內(nèi)容在最終使用這個Plugin的時候,是隱藏在了Plugin內(nèi)部的为居,使用方不可見。
使用Plugin時贰镣,如果需要獲取一些原生APP關(guān)于業(yè)務(wù)上需要傳遞的信息,比如 Token 之類的八孝,需要通過接口傳入。
- Plugin 和原生直接通過Platform Method Channel 交互,Plugin 會定義好相關(guān)接口祟绊,所支持的平臺(例如Android和iOS)都需要實現(xiàn)這些接口
- dart 中調(diào)用 _channel.invokeMethod 對原生發(fā)起一次請求
- java 在 onMethodCall 中處理請求
- objc 在 handleMethodCall 中處理請求
- Plugin 和Flutter App/Module 直接的交互,直接通過 Plugin 定義的接口進(jìn)行
二嘉熊、創(chuàng)建新的 Plugin
- 1扬舒、直接通過命令行創(chuàng)建:
flutter create --template=plugin --platforms=android,ios -i objc -a java flutter_remac_gateway_fourth - 2、在
lib/remac_connectivity_plugin.dart
文件中定義插件 API,lib/remac_connectivity_plugin_platform_interface.dart
中定義插件內(nèi)和原生交互的 API - 3讲坎、在
android/src/main/java/com.remac.remac_connectivity_plugin/RemacConnectivityPlugin.java
文件中添加 Android 平臺代碼 - 4晨炕、在
ios/Classes/RemacConnectivity.h/.m
文件中添加 iOS 平臺代碼 - 5、README.md 文件用來對 package 進(jìn)行介紹
- 6瓮栗、CHANGELOG.md 文件用來記錄每個版本的更改
- 7、LICENSE 文件用來闡述 package 的許可條款
-8弥激、為配網(wǎng) Plugin 引入第三方Package - 直接在 pubspec.yaml文件中添加就行愿阐,例如:
name: flutter_remac_gateway_fourth
description: A new Flutter plugin project.
version: 0.0.1
homepage:
environment:
sdk: '>=2.19.2 <3.0.0'
flutter: ">=2.5.0"
dependencies:
flutter:
sdk: flutter
plugin_platform_interface: ^2.0.2
flutter_picker: ^2.1.0
flutter_remac_foundation:
path: ../flutter_remac_foundation/
dev_dependencies:
flutter_test:
sdk: flutter
flutter_lints: ^2.0.0
三、Flutter中間件引入子組件
在yaml文件中添加依賴:
flutter_remac_gateway_fourth:
path: ../flutter_plugins/flutter_remac_gateway_fourth/