第1章 混合工程 1
1.1 Flutter工程體繫 1
1.1.1 混合工程研發體繫介紹 1
1.1.2 混合工程下的Flutter研發結構 2
1.1.3 工程結構 2
1.1.4 構建優化 3
1.1.5 Native啟動下的Flutter調試 6
1.1.6 Native啟動下的Flutter熱重載 9
1.1.7 Native與Flutter聯合調試 11
1.1.8 持續集成 11
1.2 混合工程改造實踐 11
1.2.1 項目背景及問題 11
1.2.2 改造目標 12
1.2.3 方案的制訂 12
1.2.4 改造的實現過程 14
1.3 混合工程與持續集成 15
1.3.1 背景思考 15
1.3.2 實現方法 16
1.3.3 iOS依賴的Flutter庫的抽取 21
1.3.4 Flutter混合工程的持續集成流程 23
1.4 快速完成混合工程搭建 24
1.4.1 flutter-boot簡介 24
1.4.2 工程化設計 25
1.4.3 混合棧 27
1.5 使用混合棧框架開發 29
1.5.1 為什麼需要混合方案 29
1.5.2 Google官方提出的混合方案 29
1.5.3 第二代混合技術方案 FlutterBoost 31
1.5.4 擴展補充 35
第2章 能力增強 36
2.1 基於原生能力的插件擴展 36
2.1.1 Flutter Plugin 36
2.1.2 Platform Channel 37
2.1.3 獲取剩餘電量Plugin 39
2.1.4 加載Plugin 46
2.1.5 遇到的問題 48
2.1.6 延展討論 49
2.2 基於外接紋理的同層渲染 50
2.2.1 Flutter渲染框架 50
2.2.2 存在的問題 51
2.2.3 解決方法 52
2.3 多媒體能力擴展實踐 58
2.3.1 背景 58
2.3.2 設計思路 58
2.3.3 一些難點 59
2.3.4 總結 60
2.4 富文本能力應用實踐 61
2.4.1 富文本的原理 61
2.4.2 設計思路 62
2.4.3 關鍵部分代碼實現 64
2.4.4 效果 65
第3章 業務架構設計 66
3.1 應用框架設計實踐 66
3.1.1 Fish Redux開源背景及技術架構 66
3.1.2 Fish Redux技術解析 67
3.2 輕量級動態化渲染引擎的設計 77
3.2.1 背景 77
3.2.2 動態方案 77
3.2.3 模板編譯 78
3.2.4 渲染引擎 81
3.2.5 終效果 85
3.3 面向切面編程的設計實踐 86
3.3.1 典型的AOP場景 88
3.3.2 面向開發者的API設計 88
3.3.3 AOP代碼的編譯 90
3.3.4 Dill操作 90
3.3.5 AspectD支持的語法 92
3.3.6 構建流程支持 95
3.3.7 實戰與思考 95
3.4 高性能的動態模板渲染實踐 96
3.4.1 為什麼Native可行的方案不適用於Flutter 96
3.4.2 認識三棵樹 97
3.4.3 Flutter在Layout過程中的優化 98
3.4.4 如何自定義Widget 100
3.4.5 更多優化方向 105
參考文獻 106
第4章 數據統計與性能 107
4.1 數據統計框架的設計 107
4.1.1 用戶行為埋點定義 107
4.1.2 在Flutter上的埋點實現方案 108
4.1.3 曝光坑位 110
4.2 性能穩定性監控方案的設計 113
4.2.1 Flutter性能穩定性目標 113
4.2.2 頁面滑動流暢度 113
4.2.3 頁面加載耗時 116
4.2.4 異常率 118
4.3 高可用框架的設計與實踐 119
4.3.1 為什麼要做Flutter性能監控 119
4.3.2 需要一個什麼樣的SDK 119
4.3.3 從單個指標看整體設計 120
4.3.4 整體結構設計 122
4.3.5 SDK不同的使用方式 126
4.3.6 SDK的落地情況 126
4.4 跨端方案性能對比實踐 127
4.4.1 跨端方案對比 127
4.4.2 對比數據分析 128
4.4.3 總結 131
4.4.4 延伸閱讀 131
第5章 企業級應用實戰 134
5.1 基於Flutter的端架構演進與創新 134
5.1.1 Flutter的優勢與挑戰 134
5.1.2 閑魚的架構演進與創新 135
5.1.3 研發智能化在閑魚的應用 140
5.2 Flutter 與 FaaS 雲端一體化架構 142
5.2.1 傳統Native Web 服務端混合開發的挑戰 142
5.2.2 跨端方案Flutter與React Native的選擇 143
5.2.3 Dart作為FaaS層的可選語言 144
5.2.4 一體化的深層思考 146
5.2.5 案例效果 147

序

閑魚技術團隊發來電子書稿時，我十分驚喜。國內關於Flutter的中文書籍尚不多見，這本書如此領先且與眾不同。

本書並非基礎知識的簡單羅列，而是從一線問題出發，循序漸進，娓娓道來。不僅把Flutter的重要理念講得極為清晰，而且給開發者提供了應對眼前各種問題的實用方法。特別是，本書對單點問題的解讀極具深度，非常具有參考價值。同時，書中還給出了詳盡的可以融會貫通、舉一反三的思路，理論陳述和問題分析面面俱到，力求讓讀者可以獲得全面繫統的技術知識。

本書凝聚了閑魚技術團隊的心血，就像弈局一樣，通過一步步的反復判斷和思考，給出清晰路徑。唯有經歷了與谷歌團隊的長期共建，以及對整個閑魚規劃有透徹思考後，纔能淬煉出有如此深度的著作。對於如何使用Flutter以及是否要選擇Flutter的開發者或者規劃者來說，閱讀本書將大有裨益。

湯興（花名：平疇）

阿裡巴巴集團副總裁

前  言

近年來，隨著移動智能設備的快速普及，移動多端統一開發框架已成為一個熱點議題。Google Flutter通過新的渲染引擎、新的編程語言、新的編程框架，提供了一個更決絕的跨端方案，使其在眾多移動多端統一開發技術中脫穎而出。我們從2017年起預研並接觸Flutter技術，經過多次的探討驗證後正式大規模地在線上使用，在App性能、穩定性、開發效率上獲益良多。此外，我們積極協同Google Flutter團隊去反饋和共同解決中國社區所遇到的各種挑戰。通過這個過程，形成了大量一手實踐知識與技術沉澱。自2018年起，我們收到博文視點的多次邀請，希望撰寫對移動開發工程師有實際指導意義的技術圖書。從那時起我們始終在思考，應該提供一本什麼樣的書來幫助移動開發者完善自己的關注視角，並從解決實際應用開發問題出發，思考業務與技術架構統一的問題。帶著這個期望，我們繫統地精選和編寫了閑魚技術在實際開發中沉澱的經驗文章，形成本書，以此回饋廣大移動開發者。

本書的目標讀者是移動技術開發領域相關工程技術人員或以此為職業目標的在校學生。我們期望通過本書的出版，能夠幫助讀者繫統化地理解業務問題的定義、問題如何投射到技術、解決方案的思考以及如何得出解法。因此，本書存在大量相關背景知識、工作原理介紹以及側重原因分析的方案設計。這也是我們對“授人以魚不如授人以漁”的思考，希望讀者在閱讀本書的過程中，去體會這份定義、思考與解決問題的喜悅。

本書從通用業務工程化開始，進而展開Flutter在閑魚整體雲端一體化架構的創新思考。第1、2章重點關注混合工程搭建以及關鍵能力擴展和優化，第3、4章探討關於大規模工程實踐中遇到的具體問題，如應用架構設計、性能統計和調優等，並在第5章給出梳理和總結。以期讀者可以有一個自頂向下展開的閱讀路徑。

本書在選題立項與後成書過程中，阿裡巴巴技術副總裁湯興（花名：平疇）博士提供了很多建設性意見；博文視點在出版過程中給予了大力支持和幫助；谷歌Eric及Flutter團隊一直以來高效並愉快地協同和共同演進，在此謹向他們表達誠摯的謝意。後，衷心感謝閑魚技術團隊的各位同事，衷心感謝阿裡雲戰略&合作部總經理劉湘雯和她的同事們，恕不一一列舉，本書的出版與他們的支持、信任和幫助是分不開的。

移動多端統一開發技術是一個新的工程領域，發展潛力巨大，知識更新速度快。由於作者水平有限，書中難免有不當之處。我們會通過閑魚技術公眾號、閑魚技術阿裡雲開發者社區賬號與讀者交流和更新內容，歡迎專家和讀者給予批評指正。

孫兵（花名：酒丐）

阿裡巴巴資深技術專家