原生App專案整合flutter混合開發詳細指南

炸雞叔發表於2019-02-21
APPFlutter

記得去年9月份的時候谷歌在上海有一次開發者大會，去參加的時候關注到了flutter，隨後沒過多久就釋出了1.0版本。18年底的時候用flutter做了個小專案，發現flutter確實挺好用的。於是嘗試在公司找個小專案上馬，進行混合開發試試。

方案選擇

目前主流的混合開發方案有兩種整合方式：

原始碼整合： 也就是谷歌官方提供的方案[https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps]

產物整合： Flutter專案單獨開發，開發完成後釋出成aar包或者iOS的framework形式，原生專案依賴flutter輸出的製品即可。具體可以參考閒魚的文章

原生App專案整合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專案。

  1. 把我們的flutter的channel切換到master(master分支下是flutter的preview版本)

    flutter channel master

  2. 建立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目錄的。

  3. 把該專案使用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即可）

  1. 提交你的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
複製程式碼

原生App專案整合flutter混合開發詳細指南

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)
  }

複製程式碼
  1. 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 檢視相關的資訊。

原生App專案整合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.團隊中其他同事協同開發

  1. 拉取專案原始碼git clone xxxxx{專案地址}
  2. 初始化專案中的子模組git submodule init && git submodule update
  3. 執行flutter packages get (有時候可能出現無法執行可以進入.ios和.android中分別執行pod install 和 gradle assembleDebug,或者flutter build ios,flutter build apk等命令構建一次)
  4. Run...

Android從原生跳到Flutter模組的黑屏問題，在網上看到很多說設定透明主題的但是沒有用，後來看到一種先隱藏顯示，等待渲染好第一幀後才顯示flutter頁面的方法。這裡要注意一點要在佈局中先把flutter的Container佈局設定為InVisible狀態，不要使用Gone，用gone的話是不顯示也不渲染，用InVisible不顯示但是會渲染介面佔位置，等待渲染完成後再設定為Visible即可。

6.flutter的版本管理

在我們的開發過程中遇到了一個問題，就是各個開發者使用的flutter sdk版本不一致，導致一些庫無法執行，在網上也遇到有相同問題的人，提出了模仿gradle wrapper來做一個flutter_wrapper的思路。於是我根據自己的需要寫了一個flutter_wrapper的小工具。它的主要作用是統一開發人員的本地flutter環境。

使用說明

  1. 在你的專案根目錄中執行命令下載指令碼
    curl -O https://raw.githubusercontent.com/zakiso/flutterw/master/flutterw && chmod 755 flutterw
  2. 下載好指令碼後在根目錄中使用
    ./flutterw init
    該命令會收集你當前系統中的flutter版本，並將相關資訊寫入flutter_wrapper.properties檔案中，團隊中所有成員都會以該版本號做為該專案的標準版本
  3. 將flutterw檔案和flutter_wrapper.properties檔案新增到git中提交到倉庫裡
  4. 其他成員拉取程式碼後在專案中使用flutter命令的地方使用./flutterw代替，如果使用ide請選擇home目錄下對應版本的sdk包

flutterw做了什麼？

  1. 使用flutterw的時候會獲取當前目錄下的flutter_wrapper.properties檔案中的版本號
  2. 去使用者的${HOME}/flutter_wrapper/{版本號}/ 目錄下查詢是否有該版本sdk
  3. 如果沒有該版本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

最後：

原生App專案整合flutter混合開發詳細指南
我們整個專案都是使用git進行管理的，雖然每個開發者都需要安裝flutter環境，但是對於小團隊來說成本並不高，加上flutter_wrapper也保證了版本的一致性。iOS開發者可以在原來的iOS專案中開發flutter的專案，Android開發者可以在原android專案中開發flutter，flutter開發者也可以自己單獨開發flutter專案，這種方式其實對於開發者來說也是很方便的。

相關文章