已有 Android 專案整合 Flutter 尋坑記

背景

Flutter作為谷歌下一代主推的全平臺UI框架，具有很多的優點：

• 支援全平臺，包括Android、iOS、Web甚至桌面端。

• 全平臺都基於同一套程式碼庫，區別於React Native的learn once, write everywhere。

• 媲美原生的效能。

• 牛逼的開發效率，這個深有體會，目前筆者公司負責的一個電商app，隨便修改一行程式碼build一次在2018款macbook pro 15下都需要4分鐘左右，Flutter可以做到不到一秒。

• 豐富的元件庫，比Android的元件更加豐富。

• 國內已經有很多大廠已經有使用Flutter在他們的核心專案中了， 比如阿裡的鹹魚，騰訊的now直播，京東商城等等。

今年整個網際網路寒冬，很多公司都在裁員，移動端跨平臺方案能夠一定程度上節約開發成本，而且android ios都是一套程式碼，也避免了分端開發導致兩端邏輯可能不一致的問題。

嘗鮮

按照官方檔案的指引https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps，很快我就完成了整合，但是一執行，進入flutter頁面時，總是黑屏過段時間就閃退了，檢視崩潰資訊時發現應該是flutter so庫沒有打包進去，這個問題是因為我們的專案是隻打包armeabi單abi。而flutter只提供armeabi-v7a以上的so。所以我們把abi改成armeabi-v7a就可以順利打包flutter的so庫了，如下：

    splits {
        abi {
            enable !project.hasProperty('runx86')
            reset()
            include 'armeabi-v7a' 
            universalApk false
        }
    }

滿心歡喜的趕緊build再次執行，結果還是一樣，進入flutter頁面，還是黑屏一下，然後閃退，這時候出現的error log是：

VM snapshot must be valid.
Check failed: vm. Must be able to initialize the VM.

WTF：google之，發現一片非常有用的文章https://github.com/flutter/flutter/issues/19818。在這篇文章中提到：

看起來是說打包的apk的assets中缺少了flutter_assets，flutter_assets裡面是什麼？我猜他媽的肯定是dart vm還有dart的程式碼。這個哥們也比較實在，他說他也不知道為什麼沒有打包進去。於是按照這個哥們的方法，手工把flutter module編譯出來的flutter_assets的複製到安卓專案中，然後重新編譯打包，我手指微微顫抖的點開flutter頁面，我操，flutter頁面終於出來，我第一次流下了幸福的眼淚。但是幸福過後，還是要思考，我不能每次都手工複製吧，寫個指令碼複製也行，但是還是顯得不太專業，我想要的是直接在IDE上點build按鈕就能生成一個完美的apk包。

接著繼續檢視上面這個issue 19818（這個number還蠻吉利的），有個兄弟說是如果你的專案中有用到productFlavors的話，你的flutter專案也必須要配置相同的productFlavors才會自動把flutter_assets打包進去。按照下麵這個方式進行程式碼調整：

build打包執行，f**k，還是不行。flutter_assets怎樣都打包不進apk裡面。然後就是無盡的嘗試，終於發現有一個中國的兄弟遇到跟我類似的問題https://www.jianshu.com/p/3a88d9b993cd。

看起來是需要切到flutter的master分支上才可以，目前我是在stable分支上，那就切把，趕緊執行flutter channel master。這個過程需要翻牆，或者新增flutter中國映象。要不然會下載不成功。切成功之後，試了無數次，還行不行。怎麼辦，我已經生無死戀……………………..

在經過多次痛哭流涕之後，我真想把電腦合上，背起書包回家（已經是深夜了），但是作為一個對技術有狂熱追求的我，我不甘心就這樣失敗。也許是上帝的安排，冥冥之中我對比了下別的專案module名稱都是app這樣，而我們的卻是vipshop。我想再嘗試一把，不行的話，那我就放棄了。 於是我把vipshop重新命名為app，build執行。檢視下apk打包的內容。

flutter_assets終於打包進去了。 進入flutter頁面也沒閃退了。嗚嗚… 今晚終於可以安心睡個好覺了。 趕緊掏出手機叫好滴滴，打卡下班回家….

總結

整體的曲折經歷上面已經說了，下麵總結下具體的改動點，假設你的主工程和flutter module位於：

• 主工程：/somepath/my_app

• flutter module: /somepath/flutter_module

主要改動點有：

1. flutter切到master分支，執行flutter channel master。

2. 按照官方指引https://github.com/flutter/flutter/wiki/Add-Flutter-to-existing-apps進行整合。

3. 確保你的主工程的主module名稱是app，/somepath/my_app/app。

4. 如果你的專案使用了abi splits，確認include的是armeabi-v7a。

    splits {
        abi {
            enable !project.hasProperty('runx86')
            reset()
            include 'armeabi-v7a' 
            universalApk false
        }
    }

5. 假設你的主專案配置了dev productFlavor，那麼你需要修改 /somepath/flutter_module/.android/Flutter/build.gradle，增加dev productFlavor和buildTypes。

6. 修改flutter專案 /somepath/flutter_module/.android/app/build.gradle，增加dev productFlavor

分享