Flutter技术解析与实战――闲鱼技术演进与创新

本书将详细讲解闲鱼Flutter＆FaaS云端一体化架构，以及闲鱼基于Flutter的架构演进与创新，学习一套全面的Flutter架构应用方案。本书介绍闲鱼技术团队利用Flutter技术改造和上线复杂业务的混合工程改造实践，抽取Flutter依赖到远程的实现细节，以及使用Plugin桥接获取设备信息、使用基础网络库等混合开发实践指南。这些实践遍布闲鱼各大业务线和应用场景，为读者使用Flutter打造自己的研发体系探索一条实践之路。除了介绍闲鱼Flutter应用框架Fish Redux、开发利器AspectD、FlutterBoost等一众开源工具与开发实践指南，你还将在本书中学到Flutter的更多应用场景。

闲鱼技术部不仅是阿里巴巴集团旗下闲置交易社区的创造者，更是移动与高并发大数据应用新技术的引导者与创新者。我们与Google Flutter和Dart小组密切合作，为社区贡献了多个高star的项目和大量PR。我们积极探索深度学习和视觉技术在互动、交易、社区场景中的创新应用。闲鱼技术团队与阿里巴巴集团中间件团队共同打造的FaaS平台每天支持数以千万级用户的高并发访问场景。一直以来，我们不断做出技术判断，通过创新探索更多价值，并将团队的各项能力与实践经验以多种形式面向国内外分享。希望读者在阅读本书的过程中，去体会这份定义、思考与解决问题的喜悦。

汇聚闲鱼在跨端改造开发中沉淀的企业级实践经验和技术总结。

从解决具体的实际应用开发问题出发，给广大读者提供了一张Flutter全景视图。

详解如何低成本实现Flutter富文本、设计一个高准确率的Flutter埋点框架、Flutter外接纹理、可定制化的Flutter相册组件等实战内容。

序

闲鱼技术团队发来电子书稿时，我十分惊喜。国内关于Flutter的中文书籍尚不多见，这本书如此领先且与众不同。

本书并非基础知识的简单罗列，而是从一线问题出发，循序渐进，娓娓道来。不仅把Flutter的重要理念讲得极为清晰，而且给开发者提供了应对眼前各种问题的实用方法。特别是，本书对单点问题的解读极具深度，非常具有参考价值。同时，书中还给出了详尽的可以融会贯通、举一反三的思路，理论陈述和问题分析面面俱到，力求让读者可以获得全面系统的技术知识。

本书凝聚了闲鱼技术团队的心血，就像弈局一样，通过一步步的反复判断和思考，给出清晰路径。唯有经历了与谷歌团队的长期共建，以及对整个闲鱼规划有透彻思考后，才能淬炼出有如此深度的著作。对于如何使用Flutter以及是否要选择Flutter的开发者或者规划者来说，阅读本书将大有裨益。

汤兴（花名：平畴）

阿里巴巴集团副总裁

前言

近年来，随着移动智能设备的快速普及，移动多端统一开发框架已成为一个热点议题。Google Flutter通过新的渲染引擎、新的编程语言、新的编程框架，提供了一个更决绝的跨端方案，使其在众多移动多端统一开发技术中脱颖而出。我们从2017年起预研并接触Flutter技术，经过多次的探讨验证后正式大规模地在线上使用，在App性能、稳定性、开发效率上获益良多。此外，我们积极协同Google Flutter团队去反馈和共同解决中国社区所遇到的各种挑战。通过这个过程，形成了大量一手实践知识与技术沉淀。自2018年起，我们收到博文视点的多次邀请，希望撰写对移动开发工程师有实际指导意义的技术图书。从那时起我们始终在思考，应该提供一本什么样的书来帮助移动开发者完善自己的关注视角，并从解决实际应用开发问题出发，思考业务与技术架构统一的问题。带着这个期望，我们系统地精选和编写了闲鱼技术在实际开发中沉淀的经验文章，形成本书，以此回馈广大移动开发者。

本书的目标读者是移动技术开发领域相关工程技术人员或以此为职业目标的在校学生。我们期望通过本书的出版，能够帮助读者系统化地理解业务问题的定义、问题如何投射到技术、解决方案的思考以及如何得出解法。因此，本书存在大量相关背景知识、工作原理介绍以及侧重原因分析的方案设计。这也是我们对“授人以鱼不如授人以渔”的思考，希望读者在阅读本书的过程中，去体会这份定义、思考与解决问题的喜悦。

本书从通用业务工程化开始，进而展开Flutter在闲鱼整体云端一体化架构的创新思考。第1、2章重点关注混合工程搭建以及关键能力扩展和优化，第3、4章探讨关于大规模工程实践中遇到的具体问题，如应用架构设计、性能统计和调优等，并在第5章给出梳理和总结。以期读者可以有一个自顶向下展开的阅读路径。

本书在选题立项与最后成书过程中，阿里巴巴技术副总裁汤兴（花名：平畴）博士提供了很多建设性意见；博文视点在出版过程中给予了大力支持和帮助；谷歌Eric及Flutter团队一直以来高效并愉快地协同和共同演进，在此谨向他们表达诚挚的谢意。最后，衷心感谢闲鱼技术团队的各位同事，衷心感谢阿里云战略&合作部总经理刘湘雯和她的同事们，恕不一一列举，本书的出版与他们的支持、信任和帮助是分不开的。

移动多端统一开发技术是一个新的工程领域，发展潜力巨大，知识更新速度快。由于作者水平有限，书中难免有不当之处。我们会通过闲鱼技术公众号、闲鱼技术阿里云开发者社区账号与读者交流和更新内容，欢迎专家和读者给予批评指正。

孙兵（花名：酒丐）

阿里巴巴资深技术专家

第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