让我们在2019年重新认识 Flutter

现在是2019年，让我们认真来看看备受瞩目的 Flutter，重新认识一下它。本文首先简要回顾移动开发（跨平台开发）的发展历史，并谈谈不同阶段跨平台解决方案的优劣；接着从 WHAT / HOW / WHY 三个方面详细来聊聊 Flutter，并结合简单的 Dart 代码说说开发者该如何上手，随后展示几个 Demo App；最后会就本次分享进行一段小结。Flutter 到底是什么，它的来临对前端又意味着什么？让我们接着往下看。

当下的移动互联网仿佛给我们营造一种假象—— Android 和 iOS 已经存在许多年。而回首过往，才发现 Android 刚和我们度过第一个十年。十年前我们更多的讨论桌面应用与 Web，十年后我们专注在一个小屏幕，享受移动应用给我们带来的多彩世界。

移动应用（即我们日常所说的「原生」应用程序），通常是指某一移动平台所特有的应用程序。通过使用特定平台所支持的开发工具和语言进行开发，你可以直接调用系统提供的一些 SDK API。当下流行的移动操作系统中，我们使用 Java 或 Kotlin 调用 Android SDK 开发 Android 应用，或通过 Objective-C 或 Swift 调用 iOS SDK 开发可以上架 App Store 的应用。凡事没有银弹，移动开发也是如此。简要来看，原生应用开发具有以下优势：

1. 可获取平台全部开放功能，比如摄像头，蓝牙等；

2. 用户访问应用的感受通常是速度快、性能高、体验好的；

而其缺点也很明显，主要有：

1. 为特定平台开发，综合成本高，不同平台维护需要人力成本；

2. 动态化能力弱，大多数情况下，新功能更新只能发版；

说到动态化，一次编码便可运行在任何平台的 Web 让我们记忆深刻。而针对移动端存在的这些问题，为了在提高体验的同时赋予应用动态化能力，诞生了一批又一批的跨平台移动开发解决方案。根据实现方式的不同，我将它划分为三个时代：

1. 青铜时代。在该时代的框架主要采用 Webview 容器（广义）进行内容渲染，并借助原生代码预置用以暴露给 JavaScript 调用的一部分系统能力，而这类协议则为我们通常说的 JavaScript Bridge；这个时代的框架在 Web 与 Native 间还有比较明显的界限，大家各司其职（UI 渲染与系统功能调用）；

2. 白银时代。在这个阶段我们仍然用 JavaScript 开发，但绘制已经交由 Native 接管，展现在用户面前的 UI 借助的是 JavaScript VM 的解析与 Native Widgets 的组合展示；

3. 黄金时代。不同于前一个时代，由于 Native Widgets 在 UI 上的「不尽如人意」，这个时代对方案起了一个新概念——自绘引擎，通过它在底层的绘制实现上来抹平不同平台上界面开发的差异，UI 上真正做到了「每一个像素点可控」。虽然涉及到平台层时还是需要原生开发介入实现相应插件，但这已是三种跨平台移动开发方案中最灵活的一种了。

我们常说 Web 最终将一统天下，也常听见 Web 在离我们远去的声音。但至今在终端 UI 上也没有迎来一个完美的解决方案，这是因为在不同阶段、不同实现上，都存在很多现实问题。让我们再回顾一下这三个时代：

1. 青铜时代：采用 Webview 渲染的方案虽然成本低、部署迅速，但仍难以 cover 富交互的用户界面与复杂手势的快速响应；

2. 白银时代：利用 JavaScript 调用 Native 代码操作 UI 的方案虽然解决了不少渲染问题，但是跨平台 Native Widgets 的差异仍然是个问题，这使得我们在 UI 上要做一些「妥协」，而存在于 JavaScript 与 Native 间的通信成本在一些场景下仍会使这种方案成为「累赘」；

3. 黄金时代：直接使用底层 API 进行绘制在执行效率上大步迈进，看似已经是终极解决方案，但大家是否想过，为什么被世人「不堪」的 Web 存在这么多年，不但没有消亡反而愈发繁荣，以至于我们常说「任何能用 JavaScript 实现的应用，最终都必将用 JavaScript 实现」；

注：「累赘」问题可详见 Flutter 中文网关于移动开发技术一章的 介绍 。

其他还有一些问题值得思考，比如：

• 在今天，针对每个移动平台单独开发一套代码，成本是否太高？
• 自绘引擎在操控 UI 上已经足够自由，但当初这种解决方案为什么没有火起来？
• 快速开发与部署、多端可访问的 Web 开发模式，在当下以及未来是否还会持续过去的增长势头？

带着这些疑问，我们走进全文的主角——Flutter。从2017年第一个 Alpha 版到上个月 Flutter Live 发布的 1.0 版本，Flutter 正获得越来越多的关注目光。很多听到这个词的同学可能会感慨，似乎 UI 技术迎来了终极解决方案。我们先看看官方对它的定义：

Flutter 是 Google 用以帮助开发者在 iOS 和 Android 两个平台开发高质量原生 UI 的移动 SDK。Flutter 兼容现有的代码，免费并且开源，在全球开发者中广泛被使用。

看看 Flutter GitHub Star 的变化趋势，会发现每一个陡增都预示着 Flutter 的一次重要版本发布。在深入了解之前，我们来看几个用 Flutter 做的 App，感受下官方所述的 Beautiful 到底是什么样子的。

看上去好像还不错，但 Flutter 究竟有哪些与众不同呢？我们按照官方描述的四个方面，分别来说说：

1. Beautiful - Flutter 允许你控制屏幕上的每一寸像素，这让「设计」不用再对「实现」妥协；

（编辑：济南站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!