第1章 Flutter概述
本章中,我们将概要介绍 Flutter,首先介绍 Flutter 的发展历史,接着介绍其技术亮点,最后综合对比介绍相关的跨平台框架。
1.1 Flutter 的横空出世
本节中我们先来了解一下 Flutter 的历史。
1.1.1 Flutter 的前身——Sky
2015年,Google 的 Dart 团队主办了 Dart 开发者峰会,并对外展示了名为 Sky 的 Dart on Android 项目。
Sky 项目使用原本作为网页开发语言的 Dart 开发原生 Android 应用,强调应用的运行速度和应用与 Web 的高度集成。Sky 不依赖于平台,其代码可以运行在 Android、iOS,以及任何包含 Dart 虚拟机的平台上。
1.1.2 Flutter 版本的历史
2017年5月,在 Google I/O 大会上,Google 首次对外推出了 Flutter——一款聚焦于创建移动应用的开源框架。
2018年2月,在世界移动通信大会(MWC)上,发布了 Flutter 的 beta 1 版本。
2018年5月,在 Google I/O 大会上,发布了 beta 3 版本。这次大会之后,Flutter 的活跃用户量增长了近 50%,从中我们感受到了 Flutter 生态系统的迅速成长。我们通常使用 GitHub star 来衡量一个开源软件的受欢迎程度,就在当年5月,Flutter 进入了 GitHub star 排行榜的前一百。如图1-1所示,2018年2月发布 beta 1 版本后,Flutter 的 GitHub star 就一直在快速增长。
图1-1 GitHub 上 Flutter 的关注量持续迅猛增长
2018年12月,在 Flutter Live 上,Flutter 的首个稳定版本 1.0 发布,这标志着 Flutter 已经完善,可以投入生产环境,开始步入新阶段。
2019年2月,在世界移动通信大会上,Flutter 1.2 版本发布。在这个版本中,主要提升了 Flutter 框架的稳定性、性能和质量,同时改进了现有 Widget 的视觉效果和功能,最重要的是提供了全新的基于 Web 的调试工具。
2019年9月,在 Google 开发者大会(GDD)上,Flutter 1.9 版本发布。在这个版本中,Flutter for Web 被合并到 Flutter 的主仓库,同时 Flutter 针对新的 macOS 和 iOS 系统进行了相关适配。
2019年12月,Flutter 1.12 版本发布。在这个版本中,Flutter for Web 进入 beta 阶段,同时对 macOS 平台的支持也从技术预览阶段进入到了 alpha 阶段。
2020年5月,Flutter 1.17 版本发布。在这个版本中,Flutter 针对移动端的内存占用和包大小占用进行了相关优化,同时在 iOS 平台支持了 Metal,进一步提升了 Flutter 在 iOS 平台上的性能表现。
2020年8月,Flutter 1.20 版本发布。在这个版本中,Flutter 针对 Flutter 框架本身和 Dart 语言机制都进行了性能相关的提升,同时提供了更多具有丰富功能的 Widget,还针对开发者工具进行了多项更新,例如将调试面板嵌入到 VS Code 中。
2020年10月,Flutter 1.22 版本发布。该版本主要针对 Android 11 和 iOS 14 进行了更好的适配,同时 PlatformView 也进入了 stable 状态。
1.2 Flutter 的技术亮点
作为一款全新的应用开发框架,Flutter 有着不同于其他框架的架构设计和跨平台特性。那与传统的应用开发方式相比,Flutter 有什么相同和不同的地方?
- 高度优化的针对移动应用的 2D 渲染引擎,更出色的文字支持功能。
- 现代化的响应式开发框架。
- 适用于 Android 和 iOS 风格的丰富 Widget。
- 用于单元测试和集成测试的 API。
- 用于连接系统和第三方 SDK 的互操作及插件 API。
- 无界面(headless)测试运行器,用于在 Windows、Linux 和 Mac 系统上运行测试。
- 命令行工具,用于创建、构建、测试和编译应用。
1.2.1 跨平台的精美设计
Flutter 的核心使命之一就是通过一流的技术支持,助力开发者打造富有表现力的灵活移动 UI。
在构思应用的设计方案时,可能需要在设计师的意图和实际开发平台的限制之间做权衡。移动应用的设计师和开发者经常在不同的“世界”中工作,他们使用的工具存在难以跨越的边界,并且在开发过程中,迭代设计时难免会遇到困难。有时,设计师的愿景会因开发者使用的 API 或框架而受到限制;有时,为了考虑整体的开发日程,视觉上的调整经常会被“推迟”(这个推迟也可能意味着“永远”),如图1-2所示。
图1-2 设计师难免要执着于细节,但开发日程让妥协成为常态
使用 Flutter 时,我们可以从一开始就控制屏幕上的每个像素。Flutter 最大程度地实现了 Material Design(谷歌官方推出的设计语言),并将其内置到 Widget 中(在 Flutter 里,几乎所有的界面内容都是 Widget),可以在 iOS 和 Android 上提供符合 Material Design 设计语言的完美体验。
在设计领域,已经出现了针对 Flutter 打造的工具,例如我们可以使用 2Dimensions Flare 来制作动画,并用一行代码将动画插入应用中。图1-3 是一个使用 Flare 构建的自定义动画示例,请注意这个动画不是预渲染的序列帧,小熊的眼睛会跟踪使用者的手指。
图1-3 小熊登录界面,动图中小熊的眼睛会跟踪使用者的手指
拓展
Supernova,知名的 design-to-code(设计转代码)工具,最近也宣布支持将 Sketch 设计文件直接导入 Flutter。相信有不少设计师在使用 Sketch 制作界面和线框,现在,设计稿与代码只有“一键”之遥。
Flutter 给设计师提供了充分发挥想象力的空间,使他们能够尽情实现精美绝伦的创意,而不受框架局限性的干扰;给开发者提供了最高的开发效率,使他们不必在设计稿的像素级还原上花费过多时间。
1.2.2 跨平台的高生产力
Flutter 引入了 Stateful Hot Reload(保持应用状态的热重载),这个革命性的新特性可以让移动开发者和设计师们实时迭代应用程序。对于常规移动应用的开发,在修改代码之后,需要将应用编译、部署、重新运行到测试状态,以查看更改结果。这个过程往往意味着更多的时间消耗,以及更多的操作路径。而有了 Stateful Hot Reload 后,这些都成为了过去,修改代码以后无须重新启动应用,就可以在数毫秒内展现这些改动。根据开发者用户的反馈,可以知道开发应用时的生产力获得了巨大提升,如图1-4所示。
图1-4 修改应用的 UI 和逻辑后无须重新编译,即刻可见
Flutter 现在已经有了快速修改的能力,再加上跨 iOS 和 Android 等多平台的发布能力,开发效率今非昔比。一些移动应用已经能够在短短几周的时间内完成从编写第一行代码到应用在应用商店上架的全部工作,这样的效率在传统的原生移动开发中是不可想象的。
1.2.3 跨平台的高效表现
与 React Native 等跨平台应用不同,Flutter 不是在代码和底层操作系统之间引入抽象层,而是生成原生应用,这意味着应用是直接编译并运行在 iOS 设备和 Android 设备上的。
Flutter 的高效表现主要得益于 Dart 语言在 AoT(Ahead-of-Time)编译模式下的高效运行以及 Flutter 渲染引擎的高效绘制能力,如图1-5所示。
图1-5 Dart 的编译模式
Flutter 的编程语言 Dart 是一款集百家之长的语言,是为满足全球化应用开发的需求而设计的。它易于学习,包含全面的代码库和代码包,可以减少我们需要编写的代码量,并且它也是完全为了提高开发者的生产力而设计的。在应用发布之前,Dart 代码会直接编译成目标设备的机器代码,而不用像 JavaScript 那样,需要使用 JavaScript 引擎动态解释运行。这意味着我们编写的代码会在目标设备上直接运行并显示,因此我们可以充分地利用设备性能。
Flutter 与大多数用来构建移动应用的工具不同,它既不使用 WebView 来绘制像素,也不使用设备附带的 OEM Widget。Flutter 中的每个像素都是使用 Skia 图形引擎绘制的。Skia 是一种 Android 和 Chrome 也在使用的硬件加速的图形绘制引擎,可以让应用具备快速、稳定的性能,应用可以以每秒 60 帧的速率在手机屏幕上流畅运行,即使在配置较低的设备上也不会卡顿。Flutter 不是游戏引擎,但它为我们的应用带来了游戏级别的性能。
1.2.4 可扩展的开放平台
Flutter pub 提供了分享 Flutter 和 Dart 资源的资源管理系统,类似 Maven 之于 Java,我们可以从中快速获取各种有趣实用的包,利用开源的包能够轻松地在应用中实现自己的想法和创意。图1-6 展示了使用 Flutter 时常用的部分工具库。
图1-6 使用 Flutter 时常用的部分工具库
在 Flutter 中使用包可以实现扩展功能。通过适应扩展功能,我们既可以获取纯 Dart 的功能,如网络请求(HTTP),也可轻松实现获得原生功能扩展的 Dart 封装,如电池信息(Battery),还可以轻松接入支持的第三方平台 SDK,如 Firebase。目前已经有越来越多的 SDK 开发者开始提供对 Flutter 应用的支持。
当然,我们还可以尝试制作自己的包,将创意和实现分享给更多开发者,共同完善 Flutter 的生态系统。
1.3 小结
本章中,我们简单介绍了 Flutter 技术的发展历史及其拥有的一些技术亮点,主要帮助读者对 Flutter 建立一个初步的认识。