【活动回顾】回望 Flutter Festival 2022 再次领略Flutter技术的无穷魅力！

设计：Claire

责编：马一帆

出品：GDG Shanghai 

4月16日，我们与多位业界知名大咖、数万名开发者们共同感受 Flutter 迅猛发展的潮流，感谢克服疫情影响、线上赴约的小伙伴们！

在本次「Flutter Festival Shanghai 2022」中，来自字节跳动、阿里巴巴、Trip.com 等的多位专家分享了部门团队在落地 Flutter 时的宝贵经验，我们既学习到了 Flutter 在具体应用中的 Best Practice，也观摩到他们在使用 Flutter 时遇到的各种典型问题。晚间则有全新升级的 CodeLab 环节，一线研发大咖手把手教我们进行 Flutter 编程。让我们一起来看看活动精彩瞬间和干货总结，再次感受 Flutter 的无穷魅力~

Flutter 富文本编辑器的设计与实践

 王浩（光酒）

王浩老师是阿里巴巴 AliFlutter 核心成员、闲鱼移动端开发专家，拥有多年的移动端开发经验。本次分享他从 Flutter 富文本编辑器现状和业务诉求、协议层设计、渲染层设计和扩展能力设计四个方面为我们介绍了如何设计并实现一个功能完善、易于扩展的 Flutter 富文本编辑器。王浩老师表示，当前 Flutter 富文本编辑器在体验和性能方面与 Native 方式实现的编辑器有一定差距，存在不支持自定义表情、无法支持段落等问题。为满足闲鱼高效发布商品的业务诉求，有必要定制实现自己的富文本编辑器。

王浩老师首先介绍了编辑器的架构设计。在该架构中，协议层负责处理基本的编辑操作等；能力扩展层与各种 Plugin 息息相关；渲染层最重要的是把协议层的 Model 转换为 Flutter 的 Widget，处理光标选区等的交互，最终将界面渲染到手机屏幕上；业务扩展层更加强调业务方的简单灵活接入，包括各类业务需求的灵活扩展等。

随后王浩老师围绕该架构详细介绍了各层的设计和实现。包括协议层的嵌套 Model、9种原子 Operation 、Normalizing 的设计。渲染层中王浩老师则对比解释了 TextField 和 Mural 的异同，并介绍了光标选区、支持 WidgetSpan 等方面计算和绘制的问题。扩展能力的支持同样十分重要，王浩老师以自定义 Node 和 Plugin 扩展为例介绍了话题文字上色、实现 undo/redo 功能的问题和解决方案。最后，王浩老师回答了技术选型、光标 Position 计算、与后端交互等问题，十分专业！更多精彩瞬间，请戳下方回放领取~

Flutter 中的列表场景优化实践

 董家建 

来自字节跳动的董家建老师致力于底层渲染、流畅性，以及 Flutter 在嵌入式、IOT 等方向上的应用。董家建老师首先介绍了 Flutter 中列表在公司各个业务线的基本应用情况，在很多场景上，列表的流畅性代表了应用整体的流畅程度。功能需求方面，列表又要满足聊天室、feed 流等的不同需要。因此，本次董家建老师从性能和功能扩充两方面介绍了列表场景相关的优化实践。

董家建老师首先从宏观上介绍了列表的基本组成和原理，帮助我们回顾了相关基础知识。随后，他结合多个实例，从复用、应用 Diff 来减少更新成本、分帧渲染、列表元素预加载等方面讲解了 Slivers 的常见优化方法。

功能拓展方面，双向加载是一项官方和社区中目前都未提供的功能，其主要场景在于聊天对话中定位到某个聊天记录后向前向后均可加载相应聊天记录。此外，董家建老师介绍了结合双向加载后实现的类似于聊天记录跳转的 JumpTo 功能。基于上述扩展，董家建老师进一步介绍了列表的 ScrollTo 能力。从帧数、流畅度分布和丢帧率来看，这些流程优化都可带来交互体验的显著提升。

董家建老师还介绍了 NestedScrollView 的架构和定制化优化方法，并总结了 Flutter 的一些问题和未来展望。Q&A 环节，他回答了加载图片后内存优化、分帧渲染、复用池等多个问题。更多详情可戳下方回放观看~

淘特 Flutter 性能优化实践

 童阳升（笙野）

在短暂休息之后，童阳升老师为我们带来了 Flutter 在淘特中的实际落地场景和性能优化过程。童阳升老师是阿里巴巴 AliFlutter 核心成员，淘特无线开发工程师，阿里淘特事业部端体验/架构团队成员。拥有多年的移动端开发经验。本次分享他从流畅度、内存情况和用户体验三方面介绍了性能优化的经验。

流畅度优化方面，童阳升老师主要描述了处理 UI 耗时操作的技巧，以及采用 RepaintBoundary 来设置更合理刷新范围的策略。内存优化犹如看不见的力量推动着用户体验的提升。童阳升老师指出，Image 往往是造成内存问题的重要因素，这和 Flutter Image 的生成过程息息相关。童阳升老师还强调了 ImageCache、图片请求、正确释放不存在的对象、针对机型分级等的问题和解决策略。

用户体验角度，CPU优化和滑动手感优化是值得注意的两个优化方向。例如，动图在带来便利的同时，也带来了庞大的CPU开销。结合自动暂停和混合栈之间的复杂跳转，可减少18%的CPU占用。在 Android 进行适当改造后则可实现更接近 Native 的滑动体验。

Q&A环节，观众对 RepaintBoundary、emoji 常驻内存等问题反响热烈。更多精彩瞬间欢迎点击下方小程序观看~

Trip.com Flutter 动态化探索及实践

 赵启扬 

赵启扬老师是 Trip.com 公共无线团队Leader，携程高级研发经理。在本次分享中，赵启扬老师首先介绍了 Flutter 动态化的必要性。简而言之，动态加载能力不仅能快速修复线上问题、保障用户体验，还能给研发提效。在从性能、效率、热修复和热更新等角度分析其他框架在不同平台上的表现后，赵启扬老师梳理了对 Flutter 版本升级兼容成本低、性能不能有太大损耗、方案要尽量对业务线透明 三大设计目标。而在技术方案方面，赵启扬老师表示经过调研分析后，最终选择了 AST DSL 方向作为 Flutter 动态化的实现方案。

随后，赵启扬老师以如何生成并运行AST为主题、以编译原理的通用过程为导引详细介绍了Flutter 动态化的各种细节问题。目前，动态化 Flutter 框架支持了90多种语法，在启动速度和渲染速度方面都可保证良好的效果。

赵启扬老师在 Q&A 环节回答了 iOS 热更新、灰度发布、包体积大小等问题，更多详情可点击下方视频了解~

Flutter 在无代码前沿领域的探索与实践

 周卓泉 

来自 dora 的联合创始人、技术负责人周卓泉老师为我们介绍了基于 Flutter 的全场景无代码平台 dora 的探索和实践。周卓泉老师首先为我们演示了 dora 网站首页丰富的动画效果，表示官网首页即是基于 dora 制作实现的。随后，结合使用样例，周卓泉老师介绍了 dora 平台的多项自研技术。包括 dora Render 动态渲染引擎、Autolayout 自动布局算法、Databinding 数据绑定引擎、All-in-One 前后端一体技术。对于自动布局、变量绑定等的演示令人印象十分深刻，引发了观众群中的热烈讨论。

周卓泉老师也讨论了选用 Flutter 的多方面考虑，并介绍了 dora 在企业官网、数字营销、品牌厂商等的多方面应用场景。在 Q&A 环境，周卓泉老师回答了响应式布局、无代码生成结果等问题，更多精彩内容可点击下方视频查看~

CodeLab: 使用Flutter构建应用

 Hamber 

在 CodeLab 环节，我们成功邀请到 Hamber 老师带领大家从0到1构建自己的 Flutter 应用。Hamber 老师是区块链公司 App Leader，前即刻 Android Leader，具有丰富的客户端开发经验。在本次活动开头，Hamber 老师从独特的角度回顾了 Flutter 的前世今生，为何 Flutter 可以成为跨平台方案的首选。随后，Hamber 老师给出了详细的资料和步骤，带领大家完成了从 IDE 下载、初始配置、应用运行的全过程，不少同学体验到了编写完成第一个 Flutter 应用的乐趣，Hamber 老师也对起始 Hello World 项目的总体结构做了解释。

随后，Hamber 老师进一步介绍了 Flutter 中的状态 Widget 和生命周期概念。并结合刚刚讲述的知识，带领大家完成一个有状态的 Widget 项目。

值得注意的是，Hamber 老师还对 Dart 语言和常见 Lint 问题做了介绍。Hamber 老师指出，我们可以使用 Lint 检测代码中可能存在的问题，提升我们的代码质量。Hamber 老师也为大家带来了解决项目中 Lint 警告的实践，令人收获颇丰！

再次感谢王浩老师、董家建老师、童阳升老师、赵启扬老师、周卓泉老师 和 Hamber 老师带来的精彩分享！

嘉宾 PPT 请在 GDG 公众号后台回复 "Flutter2022" 领取网盘链接~

周六活动预告：

更多后续活动，请期待 GDG 公众号的后续文章 ~

戳👇阅读原文参与下次活动