教你如何使用Flutter和原生App混合開發

時間 2019-11-29

標籤如何使用 flutter 原生 app 混合開發简体版

原文原文鏈接

前言

記得去年9月份的時候谷歌在上海有一次開發者大會，去參加的時候關注到了flutter，隨後沒過多久就發佈了1.0版本。18年末的時候用flutter作了個小項目，發現flutter確實挺好用的。因而嘗試在公司找個小項目上馬，進行混合開發試試。android

方案選擇

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

源碼集成

也就是谷歌官方提供的方案，項目地址以下所示：git

github.com/flutter/flu…github

產物集成

Flutter項目單獨開發，開發完成後發佈成aar包或者iOS的framework形式，原生項目依賴flutter輸出的製品便可。具體能夠參考閒魚的文章。面試

兩種方式各有優劣，其實產物集成更好一些，不過即便是進行產物集成，也須要弄懂源碼集成的方式，由於當有不少和原生交互的功能進行開發的時候，源碼集成的方式能夠直接調試會方便不少。

根據目前咱們的狀況：swift

參與人員都要進行flutter開發xcode
持續發佈和構建我能夠修改控制bash

咱們如今這個項目選擇了源碼集成的方式。服務器

爲原生項目集成flutter

整個的集成方案是參考谷歌方法，可是有一些不同，我是建立了一個flutter項目後，在原生的項目中使用git submodule的形式進行管理的。app

建立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_moduleCreating project flutter_module...  flutter_module/test/widget_test.dart (created)  ...  ...  flutter_module/.idea/workspace.xml (created)Running "flutter packages get" in flutter_module...                 7.2sWrote 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 initInitialized 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
複製代碼

提交你的flutter模塊項目到你的git服務器(我提交到github上了，你們能夠參考)

git remote add origin {你的flutter module的倉庫地址}git push origin master
複製代碼

給iOS項目集成flutter

進入咱們原生的iOS項目根目錄中，爲它添加一個git submodule，把咱們的flutter項目拉取下來

git submodule add {你的flutter module的倉庫地址}git submodule update
複製代碼

在項目的Podfile文件中添加下面的代碼，在每次執行pod install會運行podhelper.rb

platform :ios, '8.0'use_frameworks!target 'MyApp' do  pod 'AFNetworking', '~> 2.6'  xxxxend#添加以下兩行代碼，路徑修改成咱們的fluter module的路徑flutter_application_path = './flutter-module-demo' eval(File.read(File.join(flutter_application_path, '.ios', 'Flutter', 'podhelper.rb')), binding) 
複製代碼

打開Xcode關閉bitcode配置Build Settings->Build Options->Enable Bitcode

添加編譯腳本，打開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
複製代碼

項目的配置完成如今須要生成一些配置文件

1.進入原生項目的flutter模塊目錄中執行flutter packages get命令

2.回到原生項目根目錄執行pod install

➜  cd flutter-module-demo➜  flutter-module-demo git:(master) flutter packages getRunning "flutter packages get" in flutter-module-demo...            0.4s➜  flutter-module-demo git:(master) cd ..➜  FlutterNativeiOS git:(master) ✗ pod installAnalyzing dependenciesFetching podspec for `Flutter` from `./flutter-module-demo/.ios/Flutter/engine`Fetching podspec for `FlutterPluginRegistrant` from `./flutter-module-demo/.ios/Flutter/FlutterPluginRegistrant`Downloading dependenciesUsing AFNetworking (2.6.3)Installing Flutter (1.0.0)Installing FlutterPluginRegistrant (0.0.1)Generating Pods projectIntegrating client projectSending statsPod installation complete! There are 3 dependencies from the Podfile and 3 total pods installed.
複製代碼

到此爲止咱們的原生項目就已經集成好了flutter項目了。

在原生項目中使用flutter，下面以swift項目爲例

修改AppDelegate.swift:注意AppDelegate是集成自FlutterAppDelegate

import UIKitimport Flutterimport FlutterPluginRegistrant // Only if you have Flutter Plugins.@UIApplicationMainclass 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 UIKitimport Flutterclass 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….

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.43FLUTTER_APPLICATION_PATH=/Users/zhiqiangdeng/Documents/ProjectSource/XcodeProject/lianhua-order-iOS/order-check-module-flutterFLUTTER_TARGET=lib/main.dartFLUTTER_BUILD_DIR=buildSYMROOT=${SOURCE_ROOT}/../build/iosFLUTTER_BUILD_NAME=1.0.0FLUTTER_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。

給原生Android項目集成Flutter

Android的文章不少，這裏再也不詳細描述了

在原生Android項目中添加子模塊，將上面建立的flutter module項目拉取到原生安卓項目中

git submodule add {你的flutter module的倉庫地址}git submodule update
複製代碼

在根目錄的settings.gradle中添加以下配置

setBinding(new Binding([gradle: this]))                                 evaluate(new File(                                                                   '{xxxxx你的flutter module目錄}/.android/include_flutter.groovy'                    ))      
複製代碼

在原生項目的app目錄下的build.gradle文件中添加Flutter庫的依賴

dependencies {  implementation project(':flutter')}     
複製代碼

在原生代碼中集成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]);    }}   
複製代碼

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

flutter的版本管理

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

使用說明

1.在你的項目根目錄中執行命令下載腳本 curl -O raw.githubusercontent.com/zakiso/flut… && 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中：有遇到問題的能夠參考項目源碼

github.com/zakiso

總結

咱們整個項目都是使用git進行管理的，雖然每一個開發者都須要安裝flutter環境，可是對於小團隊來講成本並不高，加上flutter_wrapper也保證了版本的一致性。iOS開發者能夠在原來的iOS項目中開發flutter的項目，Android開發者能夠在原android項目中開發flutter，flutter開發者也能夠本身單獨開發flutter項目，這種方式其實對於開發者來講也是很方便的。

按期分享Android高級技術和麪試分享，歡迎關注，喜歡文章的朋友點個贊叭~