前言

記得去年9月份的時候谷歌在上海有一次開發者大會，去參加的時候關注到了flutter，隨後沒過多久就發布了1.0版本。18年底的時候用flutter做了個小項目，發現flutter確實挺好用的。於是嘗試在公司找個小項目上馬，進行混合開發試試。 方案選擇 目前主流的混合開發方案有兩種集成方式：

  • 源碼集成

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

github.com/flutter/flut

  • 產物集成

Flutter項目單獨開發，開發完成後發布成aar包或者iOS的framework形式，原生項目依賴flutter輸出的製品即可。具體可以參考閑魚的文章。

兩種方式各有優劣，其實產物集成更好一些，不過即使是進行產物集成，也需要弄懂源碼集成的方式，因為當有很多和原生交互的功能進行開發的時候，源碼集成的方式可以直接調試會方便很多。 根據目前我們的情況：

  • 參與人員都要進行flutter開發
  • 持續發布和構建我可以修改控制

我們現在這個項目選擇了源碼集成的方式。

為原生項目集成flutter

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

我們假定已經有了原生的項目Native-iOS和Native-Android；現在我們需要創建我們的flutter項目。

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

創建flutter模塊的項目

我這裡創建一個flutter的模塊項目叫flutter_module

創建成功後我們可以看一下目錄結構

在flutter的模塊項目中包含有一個隱藏的.android和.ios目錄這個目錄下是可運行的Android和iOS項目，我們的flutter代碼還是在lib下編寫，注意在.android和.ios目錄下都有一個Flutter目錄，這個是我們flutter的庫項目了。也就是Android用來生成aar，iOS用來生產framework的庫。如果我們用flutter create xxx 生成的純flutter項目是沒有這個Flutter目錄的。

把該項目使用git管理起來，稍後我們要在native項目中以子模塊的形式添加進去。

初始化git倉庫後我們先編輯一下項目下的.gitignore文件，當前這個文件是把項目下的.ios和.android忽略掉的。這個兩個項目我們需要跟蹤一下，大家可以去github上找一下iOS和Android的gitignore模版文件，然後添加到這個兩個目錄中，然後把頂層目錄的文件作出如下修改，刪除.android和.ios添加.ios/Flutter/Generated.xcconfig。

.gitignore文件：

提交你的flutter模塊項目到你的git伺服器(我提交到github上了，大家可以參考)

  • 給iOS項目集成flutter

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

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

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

添加編譯腳本，打開Xcode在 Build Phases中添加New Run Script Phase在裡面填入如下腳本

項目的配置完成現在需要生成一些配置文件

  1. 進入原生項目的flutter模塊目錄中執行flutter packages get命令
  2. 回到原生項目根目錄執行pod install

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

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

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

修改Controller代碼

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命令的時候如果該文件不存在則會生成這個文件。這個文件內容如下：

他記錄了當前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項目拉取到原生安卓項目中

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

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

在原生代碼中集成flutter跳轉到flutter頁面

我使用了一個新的Activity進行跳轉。具體可以參看源碼

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 && 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項目，這種方式其實對於開發者來說也是很方便的。

【附】相關架構及Flutter資料

技術不容易，寫出來分享更不易，覺得對你有幫助的給個讚唄

關注+後台私信「資料」免費獲取

推薦閱讀：

相关文章