一特石、引言
使用 flutter 從零開始開發(fā) App 是一件輕松愜意的事情，但對于一些成熟的產(chǎn)品來說鳖链，完全摒棄原有 App 的歷史沉淀姆蘸，全面轉向 Flutter 是不現(xiàn)實的。因此使用 Flutter 去統(tǒng)一 Android芙委、iOS 技術棧逞敷，把它作為已有原生App 的擴展能力，通過有序推進來提升移動終端的開發(fā)效率灌侣。 目前推捐，想要在已有的原生 App 里嵌入一些 Flutter 頁面主要有兩種方案。一種是將原生工程作為 Flutter 工程的子工程侧啼，由 Flutter 進行統(tǒng)一管理牛柒，這種模式稱為統(tǒng)一管理模式。另一種是將 Flutter 工程作為原生工程的子模塊痊乾，維持原有的原生工程管理方式不變皮壁，這種模式被稱為三端分離模式，三端模式如下圖符喝；
image.png
二闪彼、各端集成方式：
首先需要確保當前 Flutter 項目是 module 工程，假設我們的項目路徑為 some/path/my_flutter；
（一）iOS 接入 Flutter
方案 A：
- 在 Flutter 項目根目錄下執(zhí)行打包操作：
cd some/path/my_flutter
flutter build ios-framework --output=../flutter_framework
Building with sound null safety
Building frameworks for com.example.wallpaper in debug mode...
├─Copying Flutter.xcframework... 392ms
├─Building App.xcframework... 38.2s
├─Building plugins... 63.7s
└─Moving to flutter_framework/Debug 375ms
Building frameworks for com.example.wallpaper in profile mode...
├─Copying Flutter.xcframework... 416ms
├─Building App.xcframework... 81.8s
├─Building plugins... 71.1s
└─Moving to flutter_framework/Profile 335ms
Building frameworks for com.example.wallpaper in release mode...
├─Copying Flutter.xcframework... 1,728ms
├─Building App.xcframework... 94.3s
├─Building plugins... 65.8s
└─Moving to flutter_framework/Release 317ms
Frameworks written to some/path/my_flutter/flutter_framework.
2.打包完成后畏腕，所有 framework 文件會保存到 flutter_framework 文件夾缴川，文件目錄如下：
some/path/my_flutter/
└── flutter_framework/
├── Debug/
│ ├── Flutter.xcframework
│ ├── App.xcframework
│ ├── FlutterPluginRegistrant.xcframework (only if you have plugins with iOS platform code)
│ └── example_plugin.xcframework (each plugin is a separate framework)
├── Profile/
│ ├── Flutter.xcframework
│ ├── App.xcframework
│ ├── FlutterPluginRegistrant.xcframework
│ └── example_plugin.xcframework
└── Release/
├── Flutter.xcframework
├── App.xcframework
├── FlutterPluginRegistrant.xcframework
└── example_plugin.xcframework
3. 可以直接將編譯產(chǎn)物中的所有 framework 拖到項目中就可以使用了，這邊就不贅述了描馅，這里主要講解遠端 pod 依賴的模式把夸；
其實只有 Release 的 framework 是需要上傳到遠程的，所以我們將 Release 文件夾下的所有文件上傳到專門存儲 framework 的 gitlab 倉庫里铭污；
4.在 spec 倉庫中創(chuàng)建一個 Flutter-wallpaper.podspec 文件恋日，并放到相對應的版本文件夾下，文件內(nèi)容如下：
Pod::Spec.new do |s|
s.name = 'Flutter-wallpaper'
s.version = '1.0.11'
s.summary = 'flutter 壁紙組件'
s.description = <<-DESC
TODO: Add long description of the pod here.
DESC
s.homepage = 'https://xxx/xxx/ios_sdk/iOS_frameworks'
s.license = { :type => 'MIT', :file => 'LICENSE' }
s.author = { 'xxx@xxx.com' => 'xxx@xxx.com' }
s.source = { :git => 'git@xxx/xxx/ios_sdk/iOS_frameworks.git'}
s.ios.deployment_target = '9.0'
s.ios.vendored_frameworks = 'flutter-lib/wallpaper/1.0.11/App.xcframework',
'flutter-lib/wallpaper/1.0.11/FMDB.xcframework',
'flutter-lib/wallpaper/1.0.11/Flutter.xcframework',
'flutter-lib/wallpaper/1.0.11/FlutterPluginRegistrant.xcframework',
'flutter-lib/wallpaper/1.0.11/Reachability.xcframework',
'flutter-lib/wallpaper/1.0.11/Toast.xcframework',
'flutter-lib/wallpaper/1.0.11/connectivity.xcframework',
'flutter-lib/wallpaper/1.0.11/device_info.xcframework',
'flutter-lib/wallpaper/1.0.11/fluttertoast.xcframework',
'flutter-lib/wallpaper/1.0.11/image_gallery_saver.xcframework',
'flutter-lib/wallpaper/1.0.11/package_info_plus.xcframework',
'flutter-lib/wallpaper/1.0.11/path_provider.xcframework',
'flutter-lib/wallpaper/1.0.11/sqflite.xcframework',
'flutter-lib/wallpaper/1.0.11/vibration.xcframework'
end
5.上面步驟都完成后嘹狞，我們就可以通過 pod 來引用 flutter 模塊了岂膳，在 Podfile 文件里面添加上 flutter 模塊的版本描述：
pod 'Flutter-wallpaper', '1.0.11'
6.展示 FlutterViewController :
FlutterEngine *flutterEngine = [[FlutterEngine alloc] initWithName:@"io.flutter" project:nil];
[flutterEngine runWithEntrypoint:nil];
// 該方法要放到 runWithEntrypoint 之后
[GeneratedPluginRegistrant registerWithRegistry:self.flutterEngine];
FlutterViewController *flutterViewController = [[FlutterViewController alloc] initWithEngine:self.flutterEngine nibName:nil bundle:nil];
[self.navigationController pushViewController:flutterViewController animated:YES]
（二）android 接入 Flutter
集成方案：
方案 A （Google推薦的打包AAR方式）：
- 在 flutter 項目根目錄下執(zhí)行打包操作：
<pre>cd some/path/my_flutter
flutter build aar
2.打包完成后，命令行會輸出如下集成步驟磅网，幫助集成 flutter 模塊谈截；
Building without sound null safety
For more information see https://dart.dev/null-safety/unsound-null-safety
Running Gradle task 'assembleAarDebug'...
Running Gradle task 'assembleAarDebug'... Done 42.3s
? Built build/host/outputs/repo.
Running Gradle task 'assembleAarProfile'...
Running Gradle task 'assembleAarProfile'... Done 70.8s
? Built build/host/outputs/repo.
Running Gradle task 'assembleAarRelease'...
Running Gradle task 'assembleAarRelease'... Done 82.0s
? Built build/host/outputs/repo.
Consuming the Module
1\. Open <host>/app/build.gradle
2\. Ensure you have the repositories configured, otherwise add them:
String storageUrl = System.env.FLUTTER_STORAGE_BASE_URL ?: "https://storage.googleapis.com"
repositories {
maven {
url '/Users/yoser/Desktop/work/Business/wallpaper/build/host/outputs/repo'
}
maven {
url "$storageUrl/download.flutter.io"
}
}
3\. Make the host app depend on the Flutter module:
dependencies {
debugImplementation 'com.example.wallpaper:flutter_debug:1.0'
profileImplementation 'com.example.wallpaper:flutter_profile:1.0'
releaseImplementation 'com.example.wallpaper:flutter_release:1.0'
}
4\. Add the `profile` build type:
android {
buildTypes {
profile {
initWith debug
}
}
}
To learn more, visit https://flutter.dev/go/build-aar
主要分為三個步驟：
（1）在 app/build.gradle 文件中添加倉庫索引；
（2）在 app/build.gradle 文件中添加庫依賴涧偷；
（3）通過 profile 來控制打包所使用的依賴包簸喂；
打包完成后的文件目錄如下，其實就是一個本地的 maven 倉庫燎潮，可以將該倉庫發(fā)布到遠程服務器上引入喻鳄，下面為了方便，我采用的是本地倉庫的方式确封；
build/host/outputs/repo
└── com
└── example
└── my_flutter
├── flutter_release
│ ├── 1.0
│ │ ├── flutter_release-1.0.aar
│ │ ├── flutter_release-1.0.aar.md5
│ │ ├── flutter_release-1.0.aar.sha1
│ │ ├── flutter_release-1.0.pom
│ │ ├── flutter_release-1.0.pom.md5
│ │ └── flutter_release-1.0.pom.sha1
│ ├── maven-metadata.xml
│ ├── maven-metadata.xml.md5
│ └── maven-metadata.xml.sha1
├── flutter_profile
│ ├── ...
└── flutter_debug
└── ...
3.由于我使用的是最新的項目除呵，所以倉庫路徑配置放在 settings.gradle 中設置：
String storageUrl = System.env.FLUTTER_STORAGE_BASE_URL ?: "https://storage.googleapis.com"
dependencyResolutionManagement {
repositoriesMode.set(RepositoriesMode.FAIL_ON_PROJECT_REPOS)
repositories {
google()
mavenCentral()
// s repository is going to shut down soon
// 本地倉庫路徑
maven {
url '/Users/yoser/Desktop/work/Business/wallpaper/build/host/outputs/repo'
}
// flutter.so 和 flutter_embedding.jar 所在的遠端倉庫
maven {
url "$storageUrl/download.flutter.io"
}
}
}
rootProject.name = "FlutterDemo"
include ':app'
4.然后在 app/build.gradle 中添加 Flutter 庫依賴；
dependencies {
implementation 'com.example.wallpaper:flutter_debug:1.0'
}
因為用的是模擬器爪喘，而且沒有配置 profile 去控制引用的包類型竿奏，所以直接用 debug 來運行代碼，因為只有 debug 的庫有包含 x86 架構腥放，到這一步，flutter 已經(jīng)集成到項目中绿语；
展示頁面
（1）添加 FlutterActivity 到 AndroidManifest.xml 中：
<activity
android:name="io.flutter.embedding.android.FlutterActivity"
android:theme="@style/LaunchTheme"
android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale|layoutDirection|fontScale|screenLayout|density|uiMode"
android:hardwareAccelerated="true"
android:windowSoftInputMode="adjustResize"
/>
（2）普通跳轉 FlutterActivity：
myButton.setOnClickListener {
startActivity(
FlutterActivity.createDefaultIntent(this)
)
}
（3）設置路由的方式跳轉：
myButton.setOnClickListener {
startActivity(
FlutterActivity
.withNewEngine()
.initialRoute("/my_route")
.build(this)
)
}
（4）緩存 Flutter 引擎方式跳轉：
class MyApplication : Application() {
lateinit var flutterEngine : FlutterEngine
override fun onCreate() {
super.onCreate()
// Instantiate a FlutterEngine.
flutterEngine = FlutterEngine(this)
// Configure an initial route.
flutterEngine.navigationChannel.setInitialRoute("your/route/here");
// Start executing Dart code to pre-warm the FlutterEngine.
flutterEngine.dartExecutor.executeDartEntrypoint(
DartExecutor.DartEntrypoint.createDefault()
)
// Cache the FlutterEngine to be used by FlutterActivity or FlutterFragment.
FlutterEngineCache
.getInstance()
.put("my_engine_id", flutterEngine)
}
}
myButton.setOnClickListener {
startActivity(
FlutterActivity
.withCachedEngine("my_engine_id")
.build(this)
)
}
參考：
