Flutter 是開源的 UI 工具包，其能夠幫助開發(fā)者通過一套代碼庫高效構建多平臺精美應用，支持移動、Web、桌面和嵌入式平臺。Flutter 組件采用現代響應式框架構建，中心思想是用組件 (widget) 構建 UI。淘寶終端技術部無線技術專家王康從 Flutter 的原理出發(fā)，介紹了 Flutter 的原理、業(yè)內現狀，以及阿里巴巴在 Flutter 上所做的深度實踐和探索。

一 Flutter 原理

Flutter 主要有四個特點：美觀、高效、高性能、開放。

• 美觀：Flutter 提供了豐富的 Widget，比如動畫、手勢等。Flutter 采用了組合式 API 模式，因此為 UI 創(chuàng)建帶來了更強的靈活性。此外，Flutter 使用了游戲引擎的方式來寫 APP，使得用戶可以具有很強的靈活性，能夠在像素級別進行控制。
• 高效：Flutter 類似于安卓小系統(tǒng)，使得其能夠使用一套代碼運行在各種各樣的平臺之上。此外，在 Debug 模式下還支持熱重載，使其能夠達到高效的研發(fā)效率。
• 高性能：在 Release 模式下，Flutter 是預先編譯成機器碼，執(zhí)行期具有高性能。
• 開放：Flutter 是一個開源的項目，基本所有工作都可以在 GitHub 上看到。

??

以上四個特點的背后就是 Flutter 的原理。首先，Flutter 架構在 OS 之上，最底下是與平臺相關的 Embedder 層，其主要負責的工作是 Surface、Thread 以及 Event Loop。在 Embedder 層之上是 Engine，主要包括三部分，Dart Runtime;負責將 UI 繪制到 Surface 上的 Skia，負責文本繪制的 Text。在 Engine 之上就是大家所熟知的 Dart 的 Framework。基于上述這些，開發(fā)者即可開發(fā)應用。

阿里巴巴為什么選擇 Flutter

在阿里巴巴的電商場景下，往往會有一些非常重要的考量，比如用戶體驗的要求，對于研發(fā)效率的要求，以及如何消除多端之間的差異。在阿里經濟體里面，應用所需要部署的目標設備是非常多元的，不僅有常見的 iOS 和 Android，還有釘釘等桌面場景、天貓精靈等 IoT 場景以及各種線下大屏的場景。當前，流量增長紅利不斷減少，需要更多創(chuàng)新玩法為消費者提供更好的用戶體驗，這就產生了富交互游戲化的需求。Flutter 具有的高性能，高研發(fā)效率、跨端一致性，多端多平臺支持，以及豐富的表達力使其可以解決這些痛點。

??

二 Flutter 業(yè)內現狀

在阿里巴巴內部，目前有十幾個 BU 的幾十個產品正在使用 Flutter，典型的包括淘寶、閑魚、UC 以及優(yōu)酷等。在業(yè)內，騰訊的微信、Now 直播、翻譯君等，字節(jié)跳動的西瓜視頻、皮皮蝦，快手的快影，美團的美團騎手、美團外賣商家版、美團眾包以及百度的貼吧等也都應用了 Flutter。

Flutter 在業(yè)內的實踐現狀主要圍繞著體系化、深度、框架以及更多探索這些維度展開。在體系化方面，需要做一些基礎設施的建設，這是因為 Flutter 以及 Dart 的很多東西還不成熟。使用 Flutter 解決業(yè)務上線問題，需要考慮研發(fā)體系的構建。應用上線之后，需要監(jiān)控各種指標。在深度方面，往往會關注引擎大小、包大小、內存優(yōu)化以及啟動時間等。除了上述兩部分之外，業(yè)內也有很多框架相關的工作，比如混合棧框架、狀態(tài)管理、動態(tài)化 UI、AOP 框架以及生態(tài)插件等。此外還有原生 Flutter 以外的一些探索，比如小程序渲染和前后端一體化等實踐。

??

三 AliFlutter 建設與深度實踐

AliFlutter 業(yè)務實踐

下圖選取了阿里經濟體中一些應用了 Flutter 的典型場景。比如寶貝詳情是一個業(yè)務邏輯非常復雜的頁面，屬于圖文混排的頁面，并且具有大量圖片，有時還包括一個視頻播放器，在這個場景下就全部應用了 Flutter。有團隊使用 Flutter 框架用于游戲業(yè)務的開發(fā)，比如下圖所示的是盒馬使用 Flutter 構建的一個游戲頁面。此外，在 Alibaba 這一應用中，也大量使用 Flutter 用于構建主鏈路以及訂單頁面等。

??

之所以選擇 Flutter，有幾個典型原因。首先，HotReoload 和跨端一致性使得研發(fā)非常高效;其次，可用于游戲化的豐富 UI 表達力、動畫、圖文混排性能等訴求都能被 Flutter 很好地滿足。

AliFlutter 業(yè)務研發(fā)模型

在業(yè)務場景的背后是 AliFlutter 的業(yè)務研發(fā)模型。其實，Flutter 本身主要解決兩個問題，邏輯和 UI。其本身沒有各種 Native 能力，需要為其補齊如網絡、推送以及接入網關等，使其更加接近于業(yè)務開發(fā)容器，而不僅僅是 UI 開發(fā)框架。再上面就是應用開發(fā)框架，比如狀態(tài)管理框架、游戲化框架、動態(tài)化 UI 以及組件庫，在此之上就可以構建一些業(yè)務了。除此之外還會涉及到一些研發(fā)協(xié)同方面的工作，比如打包構建、Linter、Pub 庫等。

??

AliFlutter 引擎研發(fā)模型

在 AliFlutter 之下，存在很多引擎修改的場景。舉例而言，在 iOS 13 以下可能存在一些后臺 GPU 渲染 Crash 的問題，在 Android 上存在特別機型 Flutter 啟動閃退的問題。此外，還需要考慮如何讓 Flutter 和目前已有生態(tài)進行融合，比如圖片庫、網絡庫等在阿里內部都有比較好的實踐。無論是 Bug 修復還是 Native 能力提升，其實都是對于 Flutter 引擎所做的定制化工作。

??

上圖展示的就是在阿里內部對于 Flutter 引擎進行定制所做工作的邏輯，首先通過 Flutter 框架獲取對應的引擎代碼，拉取依賴，進行開發(fā)，到 Gitlab 做 CI，代碼審核完成之后將產物構建出來上升到服務上面，最終通過簡單的方式來提供服務。

AliFlutter 基礎設施建設

自定義引擎服務

前面所提到的是自定義 Flutter 引擎的開發(fā)流程，而想要將開發(fā)完成的東西提供給其他人使用，就需要如下圖所示的自定義引擎服務了。對于 Flutter 開發(fā)者而言，只需設置一個環(huán)境變量去服務上查詢是否有對應的產物即可，如果有的話，就做一些定制并返回給開發(fā)者;如果沒有則去官方上游拉取。當然了，對于 Flutter 的基礎設施而言，需要有一些多團隊的支持，比如 Namespace 等機制。最早的時候，阿里巴巴通過 Git 方式管理自定義引擎，但是 Git 對于二進制很不友好，所以就使用了高效自定義引擎服務來解決問題。

??

私有 Pub 服務

除此之外，AliFlutter 還實現了私有 Pub 服務。最初的想法是將不同人開發(fā)的庫等工作歸類組織起來，建設更好的內部生態(tài)，實現更好的復用。Pub 本身就是 Flutter 所提供的開源框架，但是其深度綁定了谷歌云服務，所以在做這部分的時候需要將對于谷歌云的依賴變成對于阿里內部的依賴。主要工作分為兩部分，一部分是對于包的簡單管理和存儲，這部分可以通過阿里云存儲 OSS 實現;還有一部分是監(jiān)控包的下載量以及健康程度等，這部分還部署了 Meta 數據庫服務，在將包上傳的時候將數據同步過去，以及面向使用者的前端服務。

??

持續(xù)構建

這部分的主要工作就是如何將所寫的 Flutter 代碼提供給沒有 Flutter 環(huán)境專門用于打包平臺。Flutter 工程可以通過一些腳本構建出一個 Pod 或者 Gradle，進而集成起來變成一個 APP。

??

AliFlutter 深度實踐

圖片庫優(yōu)化

在阿里巴巴內部，除了對于 Flutter 做的一些體系化實踐，還有不少深度化實踐。比如對于圖片庫的優(yōu)化，對于 Flutter 而言，本身的圖片庫存在一些問題，比如內存占用高，不釋放問題、CPU 占用問題。為了盡可能遵循 Flutter 原生的圖片庫邏輯，做了圖片庫的優(yōu)化。主要工作包括對于 Flutter 框架的整體修改，能夠較好地實現一致性，與官方體系無縫融合，對接內部圖片庫，其在性能以及易用性上面也具有較好的表現。

??

引擎大小優(yōu)化

我們在 Flutter 引擎大小優(yōu)化方面也做了不少工作，簡單介紹對于庫的裁剪。如下所示的兩張火焰圖，其較好地表達了 Flutter 引擎所依賴的各個庫裁剪前后的比例對比。裁剪后的內容既保證了功能的完備性，也顯著降低了引擎大小。

??

大圖片內存 GC 優(yōu)化

除了前面所提到的類似于音頻圖片釋放等內容之外，阿里在實踐的過程中發(fā)現 Flutter 在大圖片內存 GC 方面存在一些問題，比如在用戶退出的時候內存無法得到很好釋放。對于社區(qū)中使用 Flutter 的同學而言，面對這樣的問題建議大家在 Profile 模型下看下點擊了 GC 按鈕是否能夠將內存降低下來。基于此邏輯我們提供了一套供上層業(yè)務使用的 GC API。從 FlutterEngine 開始依次調用 Shell、Engine、RuntimeController 以及 Dart 的 NotifyGC。

??

Flutter Canvas 實踐

Flutter 包含了 Skia，可提供 Canvas 能力。之前的邏輯是通過 Dart 調用 Engine，再調到 Skia，而我們通過實踐中對其部分 API 的暴露，將 Skia 的 Canvas 能力加以透出。在 JS 部分有一些 2D 和 3D 的 API，可以將這些暴露成為 Canvas API，整體而言，相比于 Web 的 Pipeline 表現非常不錯，這一功能目前已經在部分業(yè)務開始灰度測試，數據表現也非常不錯。

??

AOP 框架(AspectD)

Flutter 的 AOP 框架的核心基于 dill 變換，dill 本身是從 Dart 代碼到最終代碼之間的中間語言表達。其原理簡要來說是當我們寫了一個 hello_fultter 的時候，再寫一個 AOP 包，AOP 的包會包裹 hello_fultter 包，使得在 AOP 包的產物 (dill) 里面 hello_flutter 和 AOP 的邏輯都存在，即其包括兩部分內容，hello_flutter 本身代碼的 dill 表達，以及 AOP 框架中寫的注解的 dill 表達，將這兩者都包含在 app.dill 里面，基于此我們可以通過 dill transform 方式來做變換。這里比較復雜，需要考慮 AST 抽象語法樹的各種邏輯。需要將注解提取出來并基于這些注解進行操作，并最終寫入到 dill 里面去，這些操作處理完成之后，就變成了 aop_aspectd.dill，替換掉之前的 app.dill 即可。

??

四 AliFlutter 研發(fā)模式探索

AliFlutter 研發(fā)模式

下圖中最重要的就是研發(fā)模式和跨平臺運行時，目標是提供一種多端多平臺的能力。在平臺底層是基礎庫、網絡庫的基礎能力，此外還需要在垂直能力上的擴展，支持各種垂直的基礎能力。基礎設施之上是 Flutter 的跨平臺運行時，運行時基于 Flutter Engine，提供了具有豐富表達力的圖形接口、跨平臺、能力拓展、性能以及穩(wěn)定性等。在此之上，Flutter Framework 提供了可以復用的基礎能力，比如核心布局渲染、彈性擴展能力、組件能力以及定制性等。除此之外，也有一些研發(fā)支撐上面的工作，比如編譯打包、調試、灰度發(fā)布、線上監(jiān)控、運維能力以及數據化等。

??

AliFlutter 研發(fā)模式展望

在 Flutter 的未來發(fā)展方向，阿里巴巴主要的工作將集中于以下四點：

• 跨端能力：我們考慮對于上層的各種平臺提供標準基礎能力并 API 化，從而更好在多端多平臺進行部署。此外，還希望通過 Flutter 的容器化，使得研發(fā)和業(yè)務方能夠更多地專注在自身業(yè)務上面去。
• 交互能力：我們考慮利用 Flutter 豐富的表達能力在游戲化方向進行更好的擴展，以游戲引擎的方式來開發(fā) APP。基于泛化的交互能力以及更多的可玩性和創(chuàng)新性能夠為業(yè)務帶來更多可能。
• 研發(fā)效率：我們考慮實現工程解耦和云端一體化，目標是業(yè)務方只需關注所寫的包，通過很簡潔的方式集成進來并看到效果，從而提供類似于前端的開發(fā)體驗。此外通過云端一體從面向端側負責轉變到面向業(yè)務整體負責。
• 交付效率：這部分主要包含兩部分，一部分是動態(tài)化 UI，另外一部分是 Web On Flutter，期望通過提供更加靈活的動態(tài)性，以及前端技術棧下的動態(tài)化能力。

??

總結

在本文中，首先，為大家分享了 Flutter 的原理，介紹了 Flutter 美觀、高效、高性能、開放的特點，以及阿里巴巴為什么選擇 Flutter。其次，為大家分享了 Flutter 的業(yè)內現狀，有大量投入的主流廠商，以及體系化、深度、框架和更多的探索。再次，為大家介紹了 AliFlutter 的建設與實踐，包括了業(yè)務、研發(fā)模型、引擎研發(fā)等方面的實踐。最后，展望了對于 AliFlutter 研發(fā)模式的考量和未來發(fā)展方向。