背景

在上一篇博客Flutter live 18之后的移动开发技术综述中，我基于自己比较肤浅的认知，对比了原生开发和跨平台开发，以及各大主流跨平台开发的优缺点，并引出了本文的主角Flutter。恰逢Flutter Live 18刚结束不久，Google中国在B站上也给出了Flutter Live ‘18 视频合集，而且是中英文双字幕的良心资源。

本文可以理解为我看该视频合集过程中的一些笔记和一些观(流)后(水)感(账)。

Flutter live 18发布会

主持人Tim Sneath

刚登台，主持人就激动了，难掩满面的笑意，足以见得他是对今天的发布会多么的有信心。

这次发布会被分割为了5个视频，分别是:

1. 官宣Flutter 1.0发布
2. Flutter设计主题
3. Flutter开发主题
4. FLutter live 五大两点
5. One More Thing
   这篇博客也将分成这几个Section进行。

官宣Flutter 1.0发布

首先是主持人对所有开发Flutter的工程师表示感谢，他们中有web和移动平台的佼佼者，甚至有HTML标准的前编辑、WebKit和Blink的主要开发者和Javascript V8引擎的开发者这种级别的大咖，以及上千社区人员帮助提issue、提供补丁、引入新特性，在大家的集体努力下，造就了今天的Flutter。

Flutter四大特性

在主持人看来，Flutter的出现，让用户在性能和开发速度方面二选一的窘境不复存在了。从商业上讲，公司再也不需要组建iOS组和Android组两支团队了。

为了佐证Flutter的四大特性，他们特意开发了一个叫History的app，在苹果商店/安卓商店都是可以下载到的。请了另一个工程师上来演示了该应用，交互、动画无论在今年的旗舰机亦或是五年前的iPhone 5s上，都能达到60fps，非常流畅。这主要得益于Skia 2D引擎，直接向显卡绘制图像，所有的像素都归开发者管理，因此无论设计师给出什么原画稿，都是可以实现的，而且是以60fps的速度渲染出来。

运行在Flutter应用中的Google地图

Demo过程中，果然有彩蛋，那就是运行在Flutter应用中的支持交互的Google地图。有种苹果画中画的感觉，不过在Flutter中，也就是个普通的Widget而已啦。常规操作、常规操作，虽然台下已经尖叫声一片了。我在iPhone 6和X上都下载了该应用，都非常流畅，大家如果有兴趣的也可以下载下来试试。

话筒交还给主持人，主持人上台以极富激情，甚至有点破音的语气宣布了Flutter 1.0的发布，正式摘掉了Flutter Beta的帽子，虽然已经有相当多的(大约3000+ APPs)成功案例了。

Flutter 1.0之前取得的一些成绩

个人认为，Flutter 1.0的发布也是在提醒所有开发者可以来学习了，不管你学不学的动，反正劳资就要更新。

Flutter 设计主题

一个APP的从0到1

接下来，主持人将应用从0到1切分为了4个部分，分别是设计、开发、与在线服务连接以及发布。

首先介绍的是设计部分，由Material Design Team的will介绍。他一上台就说到了好的设计是非常昂贵的，而且设计师给出的设计闪光的地方很难实现，最后只能在让体验更为出色的细节上选择了妥协。最终交付出一个可用但不够好的应用出来，并美名曰后面改善，但Later Never Comes，对于代码的重构，道理也是一样。

这个部分我深有感触，为了赶工期，妥协设计师设计稿里真正精华的部分。但有了Flutter，就可以打破这一循环，因为Flutter就是Designed for Good Design。Material Design team实现了一套非常精美的Widgets，使得应用更灵活、富有表现力。不仅开箱即用，而且很容易扩展。除了Material，还有苹果的设计语言iOS风格的cupertino，就像从UIkit里拿出来的那样。不同的是，由于开源，开发者可以进去看源码，但对iOS private API却无法做到。

后面请上了获奖应用Reflectly的联合创始人上台一起进行分享。他负责UX/UI和前端的开发，首先是打了一波他们产品的广告，好像是一个日记类应用。后面以主持人采访他的形式展开，这是他第一个应用，前端就他一个人，仅使用2个半月就完成了学习和开发的全过程。

后面请上了和谷歌合作的2Dimensions公司负责人，他们带来了一款可以将矢量动画作为一个Widget直接嵌入到Flutter应用中的工具Flare。Flare打破了传统的模式，无需再单独开发应用和动画，然后再转换成设备资源和代码，这部分的工作由设计师完成即可，减轻了程序员的负担，也促进了程序员和设计师的合作，设计师也更深入地参与到了应用的全过程。

Flare Demo

Flutter 开发主题

Live Coding

回归到开发的主题，请出了Emily和Matt两个人上台进行现场开发，以体现开发过程是多么的愉快。两个人给我的感觉像是被代码耽误了的相声演员，演讲非常棒。他们也确实在12分钟内展示了如何开发出一个精美的应用，并与现场观众进行交互。

除了展示了开发的高效，还重点展示了热重载对于调试方面效率的重大提升。这个部分上篇博客有所提及，在这就不重复提了，重点看一下Flutter 1.0的新特性：

首先是更好的遵守了iOS设计规范，加入了很多针对iOS的widgets。另外接入了近 20 种 Firebase 服务、上文提到的Google Maps，以及不断优化性能、压缩由Flutter打包的应用大小。此外，也悉心听取了来自Flutter社区的反馈，解决了大量的问题。

另外，Flutter正式使用Dart 2.1作为编程语言，它增强了性能，减少了code体积，可以提供更快的类型检查以及更有用的类型错误提示信息。语言新特性也使得开发构建过程变得更快。实际上，在刷twitter的过程中，我也确实看到了很多人对Dart 2.1性能的提升表示了赞赏。

connet

接下来是开发的另一个板块，链接外部服务。这个部分的完善主要是靠生态系统，Flutter核心部分被尽可能的压缩了，开发者可以根据自己的需要引入外部Packages，当然这些库也是全部开源的。

为了展示使用外部Packages，邀请了另一位工程师上台展示了machine learning库ML Kit和摄镜头库的使用，开发了一个根据人面部表情显示动画人物表情的应用。

移动支付作为常见的应用常见，在Flutter里也获得了很好的支持。这个部分是由知名支付服务商Square公司负责人上台介绍的，他们带来了两个全新的支付SDK，在使用Square支付识读器直接支付还是使用手机应用进行支付两方面都简化了支付操作和服务，估计国内的支付宝和微信团队很快会跟进吧。

Square支付在销售水果的家族农场中的应用

Release

持续集成环节请出的是Flutter的合作伙伴Nevercode，他们发布了Codemagic,一款针对Flutter设计的，简化了iOS和Android应用编译和打包处理的过程的工具。看她在现场通过在Github上选了一些项目，然后点了几下就可以生成包括测试在内的一整套的处理流程，通知会发送到Slcak channel内，感觉非常方便。

其实在发布iOS应用过程中，用Xcode的发布工具也不难，只是前段时间苹果服务器好像抽风过，引来网上大片吐槽。

One More Thing

One More Thing其实是乔布斯非常喜欢用的手段，在发布会最后发布一些改变世界的东西。这次的Flutter live也增加了这一环节，足见这一环节宣的重要性。这个环节的大新闻就是:

Flutter不仅局限于移动端，也可以跑在macOS/windows/Linux，甚至网页上！

实际上，Flutter live 18的演讲幻灯片正是跑在macOS上的程序，现场掌声雷动，关于macOS上写Flutter程序，可以参考使用 Flutter 开发 macOS App。

Dart不仅可以被编译为本机ARM代码，还可以被编译为用于生产环境的Javascript代码。现场demo了一个还处于实验室开发阶段实验性项目，Hummingbird，一个基于Web实现的Flutter Runtime，这个项目可以让Flutter能够无需改动地运行在Web平台。现场展示了一个类似华容道的网页应用。现场还给出了一篇文章，介绍了Hummingbird背后的更多技术细节， Hummingbird: Building Flutter for the Web，预计在明年的Google IO上发布。

最后是Flutter的Engineering Manager Eric上台发表温情演讲，回顾了做Flutter的初衷，并表达了对社区的感谢。

总结

我在原生iOS开发方面有着比较深厚的技术积累，最近也在读React Virtual DOM部分的源码，因此Flutter对我来说非常亲切，很容易就上手了。关于Flutter，我觉得很不舒服的一点是一切皆Widget，连Center这种样式都被设计成了Widget，因此很容易写出类似回调地狱的Widget地狱，或许后面会有第三方的DSL library出现吧，这点确实想念JSX的语法。

我觉得Flutter对于前端开发者来说，是一个不能绕过的主题，这也是我决定写这篇笔记的原因，希望更多的人能在更短的时间内看完Flutter Live 18并知晓Flutter的存在，因为它必将改变大前端开发的方式。

谢谢您抽出宝贵的时间阅读，欢迎留言与我讨论。

参考

1. Flutter Live ‘18 视频合集
2. History on App Store
3. Flare
4. Flutter Packages
5. Square支付SDK
6. Codemagic
7. 使用 Flutter 开发 macOS App
8. Hummingbird: Building Flutter for the Web
9. Hummingbird: Web 里的 Flutter