前言
這篇文章介紹翻譯君客戶端如何在現有的原生App中加入一些flutter頁面，把已有的工程改造成flutter和native結合的App。
目前翻譯君App中已經應用了大量Flutter頁面，性能良好。
分享出來，如果有好的方案可以互相交流。
集成方案
如果需要本地開發，可前往flutter.io下載SDK并配置環境變量。
在配置完Flutter環境之后，如果通過IDE或者CML創建一個Flutter Application，目錄結構是這樣的：
Project
├── android //原生android app目錄
├── assets // dart引用的資源文件，比如圖片
├── build
├── gen
├── ios //原生iOS app目錄
├── lib //dart代碼目錄
├── pubspec.lock
└── pubspec.yaml //包管理工具pub
這是一個完全通過Flutter構建的App，入口也是Flutter的lib目錄下的main.dart；那么通過在lib目錄編寫dart代碼，就可以通過flutter run命令生成Android和iOS安裝包安裝運行。對于Android來講，是通過flutter.gradle來添加flutter.jar和vm/isolate_snapshot_data/instr，用它們編譯lib中的dart代碼，嵌入App中運行的。
那如果想要在已有的App里增加一些flutter頁面，根據上面的目錄結構，可以有兩種思路：
左邊的方案，是在普通的Flutter Application的基礎上，把已有的Application替換到Flutter Project的子目錄；國內較早使用混合flutter開發較多的團隊使用的一般是左邊這種方案。后來大家也發現了這種方案的弊端，也就是耦合嚴重導致的開發效率降低。于是很多團隊都有自己的方案進行依賴清理，達到右邊這種集成方式。
好處是：
1）Native工程可以獨立構建，也可以迅速與flutter模塊交互，實現「熱插拔」。并且，jenkins打包也不再一定需要flutter環境。
2）Flutter工程可以通過flutter attach在chrome中進行調試，hot reload等等。如果使用Android Studio，并且把flutter模塊作為子目錄，無需打開兩個IDE，可在一個窗口中寫native代碼和dart代碼。
有興趣的同學，可以參考閑魚早期的方案。
好的集成方案
好消息是，Flutter團隊也意識到了這個問題，大家可能一開始只是想在已有原生工程中集成flutter，而不是寫一個純flutter的app。所以，他們也在緊鑼密鼓地制定更簡單的集成方案。
翻譯君使用了Flutter提供的創建模塊的方式來構造flutter模塊，可以參考Add Flutter to existing apps。
也就是，使用$ flutter create -t module my_flutter創建flutter模塊。
這樣就直接實現了上面圖1右邊的剝離的flutter模塊帶來的種種好處。
注意，生成的Flutter Module可以放在Android、iOS原生工程的外面，也可以放在原生工程的內部，使用git submodule來管理，兩種方案各有優劣，可以自行選擇。放在外面的好處是在本地同一臺機器開發的時候，Android、iOS工程可以依賴同一個Flutter目錄，方便修改和調試；放在目錄內部作為git submodule的好處是，可以在同一個IDE窗口中開發調試native和dart代碼。
源碼依賴和aar依賴，打包
- 源碼依賴
源碼依賴的優點是開發、調試方便，也就是在settings.gradle和build.gradle里加入對創建的flutter模塊的依賴即可，可參考上面的鏈接。
// MyApp/settings.gradle
include ':app' // assumed existing content
setBinding(new Binding([gradle: this])) // new
evaluate(new File( // new
settingsDir.parentFile, // new
'my_flutter/.android/include_flutter.groovy' // new
)) // new
- aar依賴
那如果需要用jenkins/RDM遠程打包，遠程的機器上沒有flutter環境，就可以把flutter和一些plugin打包成aar文件進行依賴。可以進入Flutter目錄和plugin目錄，分別運行./gradlew assembleDebug/assembleRelease來生成aar文件，再在主工程里引用，flutter aar中包含了flutter sdk的代碼，所以這種方式是不需要flutter環境的，也適合第三方快速接入。
由于這兩種方式只是在 settings.gradle和app/build.gradle中有一些差別，所以可以利用腳本實現快速切換兩種打包方式，切換完成之后sync即可。
flutter/native混合頁面跳轉
使用了stack manager實現native/flutter頁面跳轉，原理簡單講就是使用openurl來路由native和flutter頁面，比如hrd://profile_page代表個人信息頁。在flutter和native側各有一個路由中心來控制分發。
這種方式的優勢是在混合頁面比較多的情況下可以方便地管理跳轉，通過截圖手段減少了跳轉的白屏/黑屏現象；缺點是少量修改了flutter sdk里的源碼，以及使用起來比較麻煩，比如參數傳遞的功能實現得并不是很完善，我fork了一份對它進行了少量修改，它的原工程寫得蠻厲害的，我覺得大家可以在原工程的代碼上做適合自己的精簡或者優化。
另外，我認為如果新增的flutter頁面居多，可以盡量多用flutter本身的跳轉方式，無需采用Activity代理的方式，這樣性能更好也更方便。
調試和hot reload
作為模塊導入的flutter工程也是可以調試和hot reload的，但不能直接在IDE中進行，需要借助Observatory在瀏覽器中進行。
在flutter工程目錄下運行CML，輸入flutter attach。如果無法attach，可以重啟VM或者檢查代理。
打開一個flutter頁面，CML提示An Observatory debugger and profiler on Android SDK built for x86 is available at: http://127.0.0.1:55428/。
在CML窗口按下r可以hot reload, 按下R可以hot restart。
在chrome地址欄輸入http://127.0.0.1:55428/，可以進入Observatory進行debug等操作。
插件(plugin)管理
Plugin Packages插件可以放在flutter模塊的子目錄比如plugins通過yaml依賴，這樣，在源碼依賴的時候，主工程的gradle會自動通過flutter.gradle識別插件中包含的原生工程代碼。
如果需要提供橋接，可以通過注冊監聽器的方式來規避雙向依賴的問題；比如插件中需要引用外部工程的代碼，這肯定是不合適的，這種情況就可以通過接口回調的方式實現flutter對native功能的調用。
一些issues
-
./gradlew build的時候提示找不到product_vm_isolate_snapshot.bin的問題。這個應該是flutter本身的問題。已提issue。可以執行gradlew assembleDebug/assembleRelease規避。 - 找不到
icudtl.dat的問題。這個也是一個flutter的issue，貌似仍未解決（flutter團隊更新0.9+以后以為解決了其實并沒有），目前可以通過手動拷貝它到assets/flutter_shared/目錄規避。 - "flutter/runtime/dart_vm.ccVM snapshot must be valid/ duplicated resources"之類的問題，可通過手動刪除
app/build目錄進行規避。
目前簡單總結了這么多，有問題可以多多交流。
