原生App項目集成flutter混合開發詳細指南
記得去年9月份的時候谷歌在上海有一次開發者大會，去參加的時候關注到了flutter，隨後沒過多久就發佈了1.0版本。18年末的時候用flutter作了個小項目，發現flutter確實挺好用的。因而嘗試在公司找個小項目上馬，進行混合開發試試。java
方案選擇
目前主流的混合開發方案有兩種集成方式：android
源碼集成： 也就是谷歌官方提供的方案[github.com/flutter/flu…]ios
產物集成： Flutter項目單獨開發，開發完成後發佈成aar包或者iOS的framework形式，原生項目依賴flutter輸出的製品便可。具體能夠參考閒魚的文章git
兩種方式各有優劣，其實產物集成更好一些，不過即便是進行產物集成，也須要弄懂源碼集成的方式，由於當有不少和原生交互的功能進行開發的時候，源碼集成的方式能夠直接調試會方便不少。github
根據目前咱們的狀況：shell
1.參與人員都要進行flutter開發、swift
2.持續發佈和構建我能夠修改控制xcode
咱們如今這個項目選擇了源碼集成的方式。ruby
爲原生項目集成flutter
整個的集成方案是參考谷歌方法：[github.com/flutter/flu…]，可是有一些不同，我是建立了一個flutter項目後，在原生的項目中使用git submodule的形式進行管理的。bash
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上了[github.com/zakiso/flut…]你們能夠參考)
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項目：
-
原生iOS集成Flutter項目：
-
Flutter模塊項目：
-
Flutter_Wrapper:
最後：
Everything 用flutter開發的一款App，把記帳本日記本，行程，待辦等等都裝進一個App裏
everythings.app/
- 1. Android原生項目集成flutter項目混合開發詳解
- 2. Flutter混合開發(二)：iOS項目集成Flutter模塊詳細指南
- 3. Flutter混合開發(一)：Android項目集成Flutter模塊詳細指南
- 4. 原生Android集成Flutter混合開發
- 5. Flutter 混合開發(集成到原生 iOS 項目)
- 6. Flutter和原生App混合開發
- 7. Flutter原生混合開發
- 8. Flutter混合開發(三)：Android與Flutter之間通訊詳細指南
- 9. iOS混合開發之uni-app本地打包集成到iOS原生項目
- 10. 22.原生項目和Flutter的混合開發(三)
- 更多相關文章...
- • SQL 指南 - 網站建設指南
- • HTML 指南 - 網站建設指南
- • PHP開發工具
- • ☆技術問答集錦（13）Java Instrument原理
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. Android原生項目集成flutter項目混合開發詳解
- 2. Flutter混合開發(二)：iOS項目集成Flutter模塊詳細指南
- 3. Flutter混合開發(一)：Android項目集成Flutter模塊詳細指南
- 4. 原生Android集成Flutter混合開發
- 5. Flutter 混合開發(集成到原生 iOS 項目)
- 6. Flutter和原生App混合開發
- 7. Flutter原生混合開發
- 8. Flutter混合開發(三)：Android與Flutter之間通訊詳細指南
- 9. iOS混合開發之uni-app本地打包集成到iOS原生項目
- 10. 22.原生項目和Flutter的混合開發(三)