全面理解 Flutter（万字长文，深度解析）

当 Flutter 遇见 Web，会有怎样的秘密？

在线教育团队（简称：OED）已经将 Flutter 这样技术在业务中落地了，做为 IMWeb 前端团队的我们也要进行一些尝试。本文从前端角度进行 Flutter 开发的概况描述。主要是为了让您了解和感受一下：Flutter to Web 的实例、Flutter 为什么会出现、Flutter 设计实现原理、Flutter 技术特点和优势。

前言

OED的客户端团队在 2019 年上半年 ，就已经把 Flutter 落地到企鹅辅导的业务中了。今年我们又一起去上海参加了 2019 年谷歌开发者大会，遇见了更多的 Flutter 开发者，这次体验比第一次去的时候感觉熟悉了很多。希望未来有机会把他们邀请来深圳，进行一些 Flutter 的技术分享。此次开发者大会又恰逢 Flutter to Web 也已经正式合入 Master，那么，前端同学是否可以趁着这股东风一起参与到 Flutter 的协同开发中呢，我想这问题会困扰着很多人？如果您有好的想法，可以在留言区参与评论。

本文不是一篇 Flutter 详细的学习教程，更像是一个概览，用尽可能平实的语言和对比的思路去描述它。本着依旧从前端同学的角度出发，去理解一项新的技术，但又不限于前端技术本身。希望您能通过这篇文章相对全面的理解 Flutter 这项技术本身。特别感谢领导的鼓励和支持，让我有机会去学习和理解 Flutter 框架，因为相对我而言，OED 的客户端团队的同学经验会远超于我，他们已经完整经历了业务从 0 到 1 的过程，这是一种非常有意思的体验。

1、Flutter to Web 案例

下面转换的工程案例 是我们的 企鹅辅导APP 里面的业务代码（详细的操作流程）。Flutter 官方文档具有很好的说明，如果您单纯转一个完全不依赖 APP 的项目，您安装完环境并且切换到 Master 版本就可以直接进行了，甚至不需要任何代码修改。转换业务产品中的代码，还需要处理一些奇奇怪怪的问题，相信这对您来说，应该都不是问题。可以在这里安装和环境配置 进行环境安装。Flutter 官网提供了一个 案例可以尝试一下。官方给了一个开箱即用的 开发文档 。

视频

上面的视频里面展示我们 企鹅辅导 的第三个 TAB 内的一个上课页的 Flutter 业务实践，以及转换后的 Web 页面。可以明显看到，确实有一局部有些失真，但是用户完全可用。打包压缩之后，Web 端代码只有 1.4M，Mac 桌面端体验过程中，没有出现卡顿问题。这里 Web 页面内的渲染是通过 Canvas 渲染 和 DOM 进行的页面填充。Dart 原本从天生就支持在 Chrome 中使用的，只是在 2015 年不幸夭折，但是，它长期支持转换为 JavaScript。因此，可以遇见的未来，随着 Flutter 的发展，Dart to Js 业务实践的进化速度，可能会超过 WASM 的业务使用。

下面是一个处理无限列表的场景，无论是在 Mac，还是在移动端时，依旧会有卡顿的现象，FPS 表现并不理想。

首先官方目前还不建议，在产品化中使用 。但既然已经合入 Master，相信这一天也不会远了。

转换这里需要解决一些问题，整理了一下官方建议和实践的体验：

业务转换使用的时候，需要把系统依赖解决掉，部分样式问题跟 Flutter 排版组件有关，而系统相关的如本地存储、网络请求需要我们自定义转化方案。例如：客户端使用的是 WNS 协议，而前端需要使用的是 HTTPS。目前看 Flutter to Web 作为业务容灾的策略还是可以的，总是优于 APP Crash 或者 影响范围非常大的 BUG 导致用户无法使用的情况出现。这里 Skia 有个明显的短板，就是 3D 动画，如果您业务对 3D 动画依赖比较强，一段时间内，就不要选择 Flutter 作为业务的技术选型了。

上面简单的罗列了一些前端在 Flutter 的工作范围，前端定位更多是打辅助的！当然如果您是全能型开发，也可以全部都做。技术本质上没有边界，局限的只有自己。从前端角度看 Flutter 的开发成本相比于 H5 确实还是多了一些成本，但学起来也不会太难，只是时间的问题。对于团队有人力，并且希望尝试新技术的，完全放在业务中尝试使用。

至于未来是否能确定是 Flutter 这个框架成为行业标杆，还不得而知。但如果想彻底统一全端技术栈，Flutter 今天的设计思路是一个非常有突破性的存在！应该说，类 Flutter 的自绘引擎方案在未来会有机会大放异彩。

站在前端的角度上，我们尝试着在组件化和工程化的方向找到自己在 Flutter 生态中的定位。并且相比于 IOS 和 Android，Flutter 的 Dart 代码是完全开源的，参与感是会让开发者提升不少的，就类似 linux 和 windows 的感觉。

至于团队是否要参与进去，很多时候是看综合的成本和收益，做与不做，做到什么程度，适合什么时候进行业务跟进，其实，都是要以团队的价值最大化为目标，没有绝对的对与错，结合团队的实际情况量身定制就好。错误的时机进入，也会付出不小的成本，您自己考量。

如下图，横向对比行业开源方案：

简单对比来看，结合团队的技术实践和能力。站在第三方的角度上。RN 和 Flutter 相对是 2 个比较好的跨平台方案。而且其它方案或多或少都有一些局限。