記得去年9月份的時候谷歌在上海有一次開發者大會，去參加的時候關注到了flutter，隨後沒過多久就釋出了1.0版本。18年底的時候用flutter做了個小專案，發現flutter確實挺好用的。於是嘗試在公司找個小專案上馬，進行混合開發試試。
方案選擇
目前主流的混合開發方案有兩種整合方式：
原始碼整合： 也就是谷歌官方提供的方案[https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps]
產物整合： Flutter專案單獨開發，開發完成後釋出成aar包或者iOS的framework形式，原生專案依賴flutter輸出的製品即可。具體可以參考閒魚的文章
兩種方式各有優劣，其實產物整合更好一些，不過即使是進行產物整合，也需要弄懂原始碼整合的方式，因為當有很多和原生互動的功能進行開發的時候，原始碼整合的方式可以直接除錯會方便很多。
根據目前我們的情況：
1.參與人員都要進行flutter開發、
2.持續釋出和構建我可以修改控制
我們現在這個專案選擇了原始碼整合的方式。
為原生專案整合flutter
整個的整合方案是參考谷歌方法：[https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps]，但是有一些不一樣，我是建立了一個flutter專案後，在原生的專案中使用git submodule的形式進行管理的。
1.建立flutter module project
我們假定已經有了原生的專案Native-iOS和Native-Android；現在我們需要建立我們的flutter專案。
-
把我們的flutter的channel切換到master(master分支下是flutter的preview版本)
flutter channel master -
建立flutter模組的專案
flutter create -t module {moduleName}我這裡建立一個flutter的模組專案叫
flutter_module➜ flutter create -t module flutter_module Creating project flutter_module... flutter_module/test/widget_test.dart (created) ... ... flutter_module/.idea/workspace.xml (created) Running "flutter packages get" in flutter_module... 7.2s Wrote 12 files. All done! Your module code is in flutter_module/lib/main.dart. 複製程式碼建立成功後我們可以看一下目錄結構
➜ flutter_module git:(master) ✗ tree -L 2 -a . ├── .android │ ├── Flutter │ ├── app │ ├── ... ├── .gitignore ├── .ios │ ├── Config │ ├── Flutter │ ├── ... │ └── Runner.xcworkspace ├── lib │ └── main.dart ├── pubspec.lock ├── pubspec.yaml └── test └── widget_test.dart 複製程式碼在flutter的模組專案中包含有一個隱藏的
.android和.ios目錄這個目錄下是可執行的Android和iOS專案，我們的flutter程式碼還是在lib下編寫，注意在.android和.ios目錄下都有一個Flutter目錄，這個是我們flutter的庫專案了。也就是Android用來生成aar，iOS用來生產framework的庫。如果我們用flutter create xxx生成的純flutter專案是沒有這個Flutter目錄的。 -
把該專案使用git管理起來，稍後我們要在native專案中以子模組的形式新增進去。
➜ cd flutter_module ➜ git init Initialized empty Git repository in /Users/zhiqiangdeng/Documents/ProjectSource/FlutterProject/flutter_module/.git/ ➜ flutter_module git:(master) ✗ 複製程式碼
初始化git倉庫後我們先編輯一下專案下的.gitignore檔案，當前這個檔案是把專案下的--.ios和.android忽略掉的。這個兩個專案我們需要跟蹤一下，大家可以去github上找一下iOS和Android的gitignore模版檔案，然後新增到這個兩個目錄中，然後把頂層目錄的檔案作出如下修改，刪除.android和.ios新增.ios/Flutter/Generated.xcconfig
.gitignore檔案:
-.android/
-.ios/
+.ios/Flutter/Generated.xcconfig
複製程式碼上面的內容做一些更正，不需要編輯.gitignore檔案使用自動生成的即可。.android和.ios目錄在每次執行flutter packages get命令會自動生成（團隊其他成員拉取程式碼後沒有.android和.ios執行一下flutter packages get即可）
-
提交你的flutter模組專案到你的git伺服器(我提交到github上了[https://github.com/zakiso/flutter-module-demo.git]大家可以參考)
git remote add origin {你的flutter module的倉庫地址} git push origin master 複製程式碼
2.給iOS專案整合flutter
1.進入我們原生的iOS專案根目錄中，為它新增一個git submodule，把我們的flutter專案拉取下來.
git submodule add {你的flutter module的倉庫地址}
git submodule update
複製程式碼2.在專案的Podfile檔案中新增下面的程式碼，在每次執行pod install會執行podhelper.rb
platform :ios, '8.0'
use_frameworks!
target 'MyApp' do
pod 'AFNetworking', '~> 2.6'
xxxx
end
#新增如下兩行程式碼，路徑修改為我們的fluter module的路徑
flutter_application_path = './flutter-module-demo'
eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding)
複製程式碼3.開啟Xcode關閉bitcode配置Build Settings->Build Options->Enable Bitcode
4.新增編譯指令碼，開啟Xcode在 Build Phases中新增New Run Script Phase在裡面填入如下指令碼
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" build
"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh" embed
複製程式碼5.專案的配置完成現在需要生成一些配置檔案
a. 進入原生專案的flutter模組目錄中執行flutter packages get命令
b. 回到原生專案根目錄執行pod install
➜ cd flutter-module-demo
➜ flutter-module-demo git:(master) flutter packages get
Running "flutter packages get" in flutter-module-demo... 0.4s
➜ flutter-module-demo git:(master) cd ..
➜ FlutterNativeiOS git:(master) ✗ pod install
Analyzing dependencies
Fetching podspec for `Flutter` from `./flutter-module-demo/.ios/Flutter/engine`
Fetching podspec for `FlutterPluginRegistrant` from `./flutter-module-demo/.ios/Flutter/FlutterPluginRegistrant`
Downloading dependencies
Using AFNetworking (2.6.3)
Installing Flutter (1.0.0)
Installing FlutterPluginRegistrant (0.0.1)
Generating Pods project
Integrating client project
Sending stats
Pod installation complete! There are 3 dependencies from the Podfile and 3 total pods installed.
複製程式碼到此為止我們的原生專案就已經整合好了flutter專案了。
5.在原生專案中使用flutter，下面以swift專案為例
修改AppDelegate.swift:注意AppDelegate是整合自FlutterAppDelegate
import UIKit
import Flutter
import FlutterPluginRegistrant // Only if you have Flutter Plugins.
@UIApplicationMain
class AppDelegate: FlutterAppDelegate {
var flutterEngine : FlutterEngine?;
// Only if you have Flutter plugins.
override func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
self.flutterEngine = FlutterEngine(name: "io.flutter", project: nil);
self.flutterEngine?.run(withEntrypoint: nil);
GeneratedPluginRegistrant.register(with: self.flutterEngine);
return super.application(application, didFinishLaunchingWithOptions: launchOptions);
}
}
複製程式碼修改Controller程式碼
import UIKit
import Flutter
class ViewController: UIViewController {
override func viewDidLoad() {
super.viewDidLoad()
let button = UIButton(type:UIButtonType.custom)
...
self.view.addSubview(button)
}
@objc func handleButtonAction() {
let flutterEngine = (UIApplication.shared.delegate as? AppDelegate)?.flutterEngine;
let flutterViewController = FlutterViewController(engine: flutterEngine, nibName: nil, bundle: nil)!;
self.present(flutterViewController, animated: true, completion: nil)
}
複製程式碼- RUN….
3.iOS專案整合過程梳理
整個的整合過程其實總得來說是如下三個步驟：
1.將flutter專案放入原生專案的資料夾下
2.在podfile中新增podhelper.rb配置
3.在Xcode的build phases新增"$FLUTTER_ROOT/packages/flutter_tools/bin/xcode_backend.sh"iOS編譯指令碼。
其中podhelper.rb檔案位於我們flutter模組專案的.ios/Flutter/podhelper.rb下，大家檢視它的原始碼可以發現，它有下面幾個作用：
1.把Flutter（flutterEngine）和FlutterPluginRegistrant兩個庫用pod給原生專案匯入進入
2.如果flutter專案有用到flutter plugin外掛，把外掛用pod匯入
3.匯入Generated.xcconfig的相關配置資訊，在podhelper.rb同級別的目錄下還有一個Generated.xcconfig檔案，這個檔案在使用flutter create xx、flutter run xxx、flutter packages get命令的時候如果該檔案不存在則會生成這個檔案。這個檔案內容如下：
// This is a generated file; do not edit or check into version control.
FLUTTER_ROOT=/Users/zhiqiangdeng/.flutter_wrapper/1.2.2-pre.43
FLUTTER_APPLICATION_PATH=/Users/zhiqiangdeng/Documents/ProjectSource/XcodeProject/lianhua-order-iOS/order-check-module-flutter
FLUTTER_TARGET=lib/main.dart
FLUTTER_BUILD_DIR=build
SYMROOT=${SOURCE_ROOT}/../build/ios
FLUTTER_BUILD_NAME=1.0.0
FLUTTER_BUILD_NUMBER=1
複製程式碼他記錄了當前flutter sdk的目錄位置，以及版本號，還有專案模組的目錄位置。這個檔案的內容在執行pod install的時候會被寫入到xcode build setting中，在執行完pod install之後，可以在原生專案根目錄使用xcodebuild -showBuildSettings|grep flutter 檢視相關的資訊。
最後一步就是執行程式，執行程式的時候在Build phase新增了xcode_backend.sh該指令碼會使用到上面pod install給xcode build setting設定的那些環境變數，然後找到專案目錄生成AppFramework。
4.給原生Android專案整合Flutter
Android的文章很多，這裡不再詳細描述了
1.在原生Android專案中新增子模組，將上面建立的flutter module專案拉取到原生安卓專案中
git submodule add {你的flutter module的倉庫地址}
git submodule update
複製程式碼2.在根目錄的settings.gradle中新增如下配置
setBinding(new Binding([gradle: this]))
evaluate(new File(
'{xxxxx你的flutter module目錄}/.android/include_flutter.groovy'
))
複製程式碼3.在原生專案的app目錄下的build.gradle檔案中新增Flutter庫的依賴
dependencies {
implementation project(':flutter')
}
複製程式碼4.在原生程式碼中整合flutter跳轉到flutter頁面
我使用了一個新的Activity進行跳轉。具體可以參看原始碼
Button open = findViewById(R.id.openBtn);
open.setOnClickListener(new View.OnClickListener() {
@Override
public void onClick(View v) {
Intent intent = new Intent();
intent.setClass(MainActivity.this, MyFlutterActivity.class);
startActivity(intent);
}
});
複製程式碼public class MyFlutterActivity extends AppCompatActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
setContentView(R.layout.activity_flutter);
final FlutterView flutterView = Flutter.createView(
this,
getLifecycle(),
"route1"
);
final FrameLayout layout = findViewById(R.id.flutter_container);
layout.addView(flutterView);
final FlutterView.FirstFrameListener[] listeners = new FlutterView.FirstFrameListener[1];
listeners[0] = new FlutterView.FirstFrameListener() {
@Override
public void onFirstFrame() {
layout.setVisibility(View.VISIBLE);
}
};
flutterView.addFirstFrameListener(listeners[0]);
}
}
複製程式碼5.團隊中其他同事協同開發
- 拉取專案原始碼
git clone xxxxx{專案地址} - 初始化專案中的子模組
git submodule init && git submodule update - 執行
flutter packages get(有時候可能出現無法執行可以進入.ios和.android中分別執行pod install 和 gradle assembleDebug,或者flutter build ios,flutter build apk等命令構建一次) - Run...
Android從原生跳到Flutter模組的黑屏問題，在網上看到很多說設定透明主題的但是沒有用，後來看到一種先隱藏顯示，等待渲染好第一幀後才顯示flutter頁面的方法。這裡要注意一點要在佈局中先把flutter的Container佈局設定為InVisible狀態，不要使用Gone，用gone的話是不顯示也不渲染，用InVisible不顯示但是會渲染介面佔位置，等待渲染完成後再設定為Visible即可。
6.flutter的版本管理
在我們的開發過程中遇到了一個問題，就是各個開發者使用的flutter sdk版本不一致，導致一些庫無法執行，在網上也遇到有相同問題的人，提出了模仿gradle wrapper來做一個flutter_wrapper的思路。於是我根據自己的需要寫了一個flutter_wrapper的小工具。它的主要作用是統一開發人員的本地flutter環境。
使用說明
- 在你的專案根目錄中執行命令下載指令碼
curl -O https://raw.githubusercontent.com/zakiso/flutterw/master/flutterw && chmod 755 flutterw - 下載好指令碼後在根目錄中使用
./flutterw init
該命令會收集你當前系統中的flutter版本，並將相關資訊寫入flutter_wrapper.properties檔案中，團隊中所有成員都會以該版本號做為該專案的標準版本 - 將flutterw檔案和flutter_wrapper.properties檔案新增到git中提交到倉庫裡
- 其他成員拉取程式碼後在專案中使用
flutter命令的地方使用./flutterw代替，如果使用ide請選擇home目錄下對應版本的sdk包
flutterw做了什麼？
- 使用flutterw的時候會獲取當前目錄下的flutter_wrapper.properties檔案中的版本號
- 去使用者的
${HOME}/flutter_wrapper/{版本號}/目錄下查詢是否有該版本sdk - 如果沒有該版本sdk會下載下來，然後使用該目錄下的sdk執行命令
注意事項
如果flutter版本是preview的版本是直接使用master的最新程式碼來管理的。大家可以檢視原始碼很簡單，根據自己的需要定製。
專案demo我已經傳到github中：有遇到問題的可以參考專案原始碼
-
原生Android整合Flutter專案：
- https://github.com/zakiso/flutter-native-android.git
-
原生iOS整合Flutter專案：
- https://github.com/zakiso/flutter-native-ios.git
-
Flutter模組專案：
- https://github.com/zakiso/flutter-module-demo.git
-
Flutter_Wrapper:
- https://github.com/zakiso/flutterw.git