本文会从底层原理、优化思路、实际场景的优化策略、核心技术实现、优化成果等方面，为大家深度讲解淘特 Flutter 流式场景优化，欢迎交流与指正。

由于Flutter的跨平台应用特性，可以提高人效之余，还能保证在iOS和Android平台实现方案的统一性，避免了后续因需求业务扩展由于实现方案不同带来的限制。目前京东到家19个活动落地页已经全部替换为Flutter实现，与此同时也带来了包体积的不断膨胀，其中iOS和Android双端Flutter业务模块包占比都高达20%。苹果官方尽管已经将包体积放宽至200M，考虑到用户在更新和下载的时候的多种场景，我们针对于包的大小限制仍旧以100M为衡量标准，所以Flutter业务模块的瘦身对于到家app来说仍旧是至关重要的。因此我们进行了Flutter包动态下发探索。

本文介绍了Flutter for Web的发展现状，并且从编译、部署、运行和渲染等几个方面进行了介绍和原理分析。

贝壳在iPad和安卓平板（这两种后续统称为PAD）上面进行了多款产品的开发；为了提高开发效率，实现一套UI跨端展示，贝壳使用Flutter进行了大量实践。

在手机上屏幕比较小，一般一个页面就是一个完整的Flutter页面，这种场景使用一个FlutterActivity容器进行加载就可以了。然而在PAD上，屏幕比较大，交互更加的丰富；由于业务上大量的用到了地图和一些H5页面，会出现同屏Native和Flutter混合的情况，会使用到FlutterFragment和Fragment在同屏切换的场景；因此我们不得不采用Native+Flutter的混合方案，FlutterEngine作为Native和Flutter桥连的容器在这中间扮演着重要的角色。

这期间贝壳PAD经历了单FlutterEngine到多FlutterEngine再到Flutter2.0的FlutterEngineGroup这一系列的容器改变，下面会详细的介绍FlutterEngine在PAD上的演变过程。

本文主要记录了如何一步步学习了解Flutter视图绘制原理，然后应用到性能监控和性能优化的实践。

如果熟悉React的话，你在使用Flutter的时候肯定会充满即视感，其实这一点也不奇怪，实际上Flutter官方就提到在设计Flutter时受到了React的影响。对于熟悉React的前端开发人员来说，从与React对比开始入门想必是相对来说比较轻松的一个方式。

Flutter与React，两者都作为一个声明式UI框架，都遵循UI = f(state)的理念，加之Flutter本身就参考了React，所以两者有大量相似的地方。下面我们从编写一个经典前端入门应用Todo List开始我们的Flutter之路。

去年，闲鱼图片库在大规模的应用下取得了不错的成绩，但也遇到了一些问题和诉求，需要进一步的演进，以适应更多的业务场景与最新的 flutter 特性。比如，因为完全抛弃了原生的 ImageCache，在与原生图片混用的场景下，会让一些低频的图片反而占用了缓存；比如，我们在模拟器上无法展示图片；比如我们在相册中，需要在图片库之外再搭建图片通道。

这次，我们巧妙地将外接纹理与 FFi 方案组合，以更贴近原生的设计，解决了一系列业务痛点。没错，Power 系列将新增一员，我们将新的图片库命名为 「PowerImage」！

本文旨在尽量避开具体的代码细节，从思想上去介绍flutter的各种技术实现，让已经在从事flutter开发的同学有更多的收获，同时对flutter感兴趣的观望者也能更好的了解这门技术。

最近这两年，移动端各种跨平台的开发方案如雨后春笋般涌现，一方面是随着移动互联网的普及和快速发展，移动终端设备的软硬件、操作系统、开发工具链等日趋成熟；另一方面，传统 PC 端的技术、资源也在逐步迁移到移动端上来，大家都想造轮子“一统天下”。

国际化是指在设计软件时，将软件与特定语言及地区脱钩的过程。当软件被移植到不同的语言地区时，软件本身不用做内部工程上的改变或修正。

本地化则是指当移植软件时，加上与特定区域设置有关的资讯和翻译文件的过程。国际化和本地化之间的区别虽然微妙，但却很重要。国际化意味着产品有适用于任何地方的潜力；本地化则是为了更适合于特定地方的使用，而另外增添的特色。用一项产品来说，国际化只需做一次，但本地化则要针对不同的区域各做一次。这两者之间是互补的，并且两者结合起来才能让一个系统适用于各地。

一天测试小姐姐拿着手机过来说，你这里图片下载有问题呀，为什么没有网络（开飞行模式）也弹Toast提示下载成功呀？

下意识反应，肯定是Toast提示弹早了，刚点击按钮，还没开始下载就弹了Toast，赶紧拿手机过来操作验证一波。确实没有网络，弹了下载完成提示，去相册检查一下，嗯？图片下载成功了，还有这种操作？赶紧检查一下代码，发现项目中使用的cached_network_image三方库加载的图片，从名字上可以判断，这是一个缓存网络图片的加载框架。所以应该是图片显示出来以后就被缓存到本地了，实际下载的流程并未走网络请求，为了验证想法，看了下框架加载图片流程，总结出下文。

随着今年政府对互联网的监管，在不少时候一个紧急需求只给1～2天整改上线，而且整改过程中需求也不是很明确，相关部门也不会给一个详细的需求文档让我们去开发，大家都是“猜测”需求的内容。在这种场景下，如果App具备动态更新的能力，会给公司减少很大的成本。面对需求不确定和紧急修改页面部分元素的能力，给予了动态化最合适的使用场景，而不只是Fix几个BUG。

Fair在58集团内的部分Flutter App中已经落地，终使集成Fair后的App获得了动态化的能力。以下文章内容主要以安居拍房App为例，介绍集成Fair的架构、业务场景所需的能力预埋，以及如何进行原生和动态化代码的维护，持续发挥Flutter的性能。

企业微信作为跨android、ios、mac、pc、web五个端，超千万行代码的超大型工程，每一个需求迭代周期，都需要5端同步开发、发版，不管是对于开发，还是产品、设计、测试来说，都是一个巨大的挑战。

代码规范作为一个研发团队的核心基因，怎样在团队中高效传承是一个挑战。Flutter作为移动端持续火热的新型框架，正吸引越来越多的研发同学进入这个领域。但是面对全新的技术框架和之前几乎很少接触的dart语言，怎样写好Flutter代码困扰了无数Flutter初学者。文本就着重分享一下闲鱼Flutter团队在基础代码规范方面所做的一些实践。

本文介绍了贝壳找房Flutter Web容灾降级方案的设计、原理以及技术难点和解决方案。

语法糖（英语：Syntactic Sugar ）是指 计算机语言 中添加的某种语法，这种语法对语言的功能没有影响，但是更方便程序员使用。语法糖让程序更加简洁，有更高的可读性。Fair 语法糖 并不是为Dart语法提供易用性的接口，而是为了让Fair在布局和逻辑混编场景下构建更方便。