Flutter：从入门到实践

课程内容

开篇：迎合未来主流趋势，把握新技术主动权

移动开发的前方突破口在哪里？

小团队如何面向未来做技术选型？

想要独立开发一个产品，能不能做到省心省力？

我用两个关键词来回答这些问题：跨平台、Flutter。

背景

最近，Flutter 在前端和移动开发圈里引起了不小的热度，阮一峰老师也专门发表了一篇博文。

因为，谷歌官方正式宣布 Flutter 全面支持多平台，包括移动平台 Android/iOS、Web( 新发布 )、桌面 PC 平台（内测中）、嵌入式平台（内测中）。

Flutter 具有高扩展性和高性能。可以预见，这门颠覆性编程技术将成为未来主流。一套代码逻辑规范实现全平台开发！不过 Flutter 起步于移动端、目前重心也在移动平台，其他平台 Google Flutter 团队正在逐步拓展完善。所以学习 Flutter 我们也先从移动端的开发学起。

跨平台是趋势

现在技术更新非常快，可能几年内就会有一个新的技术出现。移动端、前端、后端开发领域的边界逐渐模糊，要求一个开发者掌掌握多端开发的场景也越来越多，所以跨平台开发技术层出不穷。

为什么会这样呢？我们可以来分析一下。

首先，节约成本的优先选择（用人单位的需求）。

互联网行业捡钱的时代已经过去了，现在的公司纷纷选择精简人员配置，尤其对于规模不大的公司来说，开发一个产品要投放各平台，至少需要一个 Web 端开发，一个 Android 开发，一个 iOS 开发，人力成本相当高。因此，在跨平台实现效果与原生开发效果的差别愈发缩小的时候，很多公司更倾向于采用跨平台开发。

反之，对于开发者个人，去提前了解甚至掌握基本的跨平台开发技术，不但能补足自己的技术栈，还能在趋势早期创造明显的就业优势。

其次，设备的发展造成了需求（使用者的需求）。

我们都有体会，以前计算机语言和技术出现和迭代的频率并没有这么高。我认为，其中一个重要因素是硬件设备的制造门槛越来越低，计算机运算速度越来越快。

现在，计算机运算速度提高到了恐怖的程度，它缩小甚至抹平了很多技术的差距，导致不同技术呈现效果几乎相同。设备形态也五花八门多种多样，人们使用着不同尺寸和特点的设备，自然希望自己惯用的某一款产品，在这些设备上都能流畅地打开和使用。难道每增加一个新设备，就要配备一个专门的开发工程师吗？

还有，技术的发展提供了可能性（开发者的需求）。

原有的技术为了迎合使用者的需求，正在不断地更新迭代，与此同时，大量新的技术和语言也在孕育和产生。它们的目标都是更便捷、更高效的开发。

面对产品提出的各种需求，为了提高开发效率，开发者们是倾向于使用包容性强、适配性好的语言和技术。

整个分析下来，可以看到，跨平台正是大势所趋。

而 Flutter 的出现让跨平台移动端的接近原生的高性能体验成为可能，并不断在扩展 Web 端、PC 端等平台。

Flutter 是趋势

Flutter: a Portable UI Framework for Mobile, Web, Embedded, and Desktop.

（Flutter，一个支持手机、网页、可嵌入设备、和桌面的可移植 UI 框架。）

Flutter 是 Google 力推的跨平台框架，将是未来的 Google Fuchsia OS 下开发应用的主要技术框架。

谷歌对 Flutter 的投入非常大，SDK 的更新频率也很高。2019 年 5 月 8 号，谷歌刚刚发布了 Flutter 1.5 稳定版。

Flutter 的开发将不仅仅局限于移动跨平台，目前已经支持 Web 开发、后端开发、PC 桌面应用开发（内测中）、嵌入式开发（内测中）。

Google 的消息推出后，阮一峰老师也第一时间表达了他对 Flutter 的看好：

"我的看法是，如果现在学习跨平台应用开发，第一个要看的不是 React Native，而是 Flutter。"

其实，撇开个人开发者，许多大公司早就率先尝试了 Flutter。国内的阿里巴巴、腾讯、爱奇艺等大公司已经把 Flutter 应用在实际开发中，例如闲鱼团队已经把 Flutter 技术应用在闲鱼应用上。

那 Flutter 开发体验如何？

• Flutter 入门容易

Flutter 基于 Dart 语言编写，有 React 语言风格，又结合 JavaScript、Java 优点，有面向对象开发语言基础的同学，很容易就上手了。

• Flutter 真正跨平台

除了原生外，目前跨平台技术一般是混合开发，如采用 H5、React Native、Weex、小程序等技术。不过这些或多或少都能感觉到卡顿和体验不流畅，并且开发和学习成本非常高，而且都有各自的局限性。

Flutter 既能用原生代码直接调用的方式来加速图形渲染和 UI 绘制，又能同时运行在两大主流移动操作系统上。看下几种方案的对比情况：

技术	性能	开发效率	渲染方式	学习成本	可扩展性
Flutter	高，接近原生体验	高	Skia 高性能自绘引擎	低，Widget 组件化	高，采用插件化的库进行扩展
RN/Weex/小程序	有延迟，一般	一般，复杂、效率低	Js驱动原生渲染	高，复杂	一般
原生应用	高	一般	原生渲染	高，需要学习 Android 和 iOS 原生 API	高

从上面的对比可以看出，Flutter 的优势明显：高体验度、高开发效率、低学习成本、高可扩展性，未来 Google Flutter 团队还将使 Flutter 支持 PC 和 Web 的跨平台开发，真正全平台。

• Flutter 用户体验媲美原生

可以说 Flutter 是一个革命性、创新性的技术框架，它实现了一套语言实现 Android 和 iOS 终端平台的高效开发，并且非 Web 跨平台模式，而是采用全新渲染引擎 Skia。它实现的应用体验和原生基本一致，流畅度远远高于目前的小程序、React 等技术方案，官方公布可以达到 60 FPS，甚至要高于原生的流畅度体验。

• Flutter 开发过程轻松

太多开发者的切身实践证明，Flutter 的开发体验也相当不错！

I wrote nicer, more maintainable code that runs on both iOS and Android. It also took considerably less time and fewer lines of code to do so.

（我编写了更漂亮、更易于维护的代码，可以同时运行在 iOS 和 Android 上。 它只花费了我相当少的时间和比原生开发更少的代码行。）

——Why Flutter Will Change Mobile Development for the Best

基于原生开发的 SDK，能轻松写出同时运行在 Android/iOS 的代码。

Flutter 成为未来主流跨平台开发框架技术已经势在必行，它开发高效、性能优秀、更新频率快、插件三方库支持多、Google 团队的技术支持给力、一套代码多终端运行，这些都非常的吸引人。

最后总结下，Flutter 全面网罗 Web、Android、iOS、Windows、linux、桌面、浏览器甚至物联网设备，未来趋势是属于 Flutter 的！

课程大纲

本课程主要面向有开发经验 1 年及以上的开发者，或者想转入学习 Flutter Dart 的开发者，不限语言。

课程内容注重基础入门，在学习的深度和广度上都有很好的权衡，帮助大家高效学习 Flutter 编程。课程按照编程思维规划学习路径，可以让我们的学习事半功倍，少走弯路。每一章节内容都按照 Google 官方源码和文档编写实例，既保留官方的原汁原味，又加入相关辅助学习的案例与注释，可以边学习边实践。

本课程大纲分为四大部分，共计 39 篇，分阶段讲解 Flutter 框架。

第一部分：Flutter 和 Dart 初探

主要是 Flutter 和 Dart 介绍、最高效的开发工具和环境的搭建、模拟器安装和调试、编译和打包应用、项目结构介绍、配置文件详解、开发规范、基础组件讲解、基础布局讲解等等。

让你快速地进入一个崭新的技术和语言的学习中，了解它的基础中的重点核心部分。

第二部分：Flutter 核心 Widget 应用

主要讲解 Flutter 的核心常用 Widget、路由、HTTP 网络请求详解（3 种 POST 和 1 种 GET）、WebSocket、JSON 编解码、文件和图片读写操作详解、手势和数据库缓存详解、动画、应用国际化等。

每一部分都是实例讲解学习，都是精心设计案例。并且实例里面涵盖了官方的大部分 API 的用法，还扩展了其他常用的 API，让你学习到官方文档上没有详细讲解到的 API 用法。

第三部分：Flutter 开发深入

第三部分主要讲解了自定义 Widget、原生和 Flutter 交互、编写 Flutter Plugin 框架、Flutter 调试、Android 和 iOS 的打包、Dart2 的 Web 开发、Dart Pub 仓库的使用和提交等。最后有一个完整的小应用的实践，综合了整个知识点。

第四部分：Flutter 扩展实践

第四部分是应用实践的扩展，包括类似音视频播放、权限处理、状态管理如何实践，使学习者的实践技能更加丰富。

寄语

介绍了这么多，相信未来几年大家可以在热门编程语言/跨平台框架排行榜的前几名上看到 Dart 和 Flutter。本套 Flutter 开发系列课程，可以让你学习 Flutter 事半功倍，更加高效、更加快速地认识和学习这门新技术、新语言、新语法！

希望每一位学习本课程的学习者，能够在技术上有所收获，在心态上更加自信。学习 Flutter，迎合未来主流趋势，赢得新技术主动权！

如果大家有什么更好的建议或者疑问，都可以沟通和交流，一起学习一起进步，加油！

点击了解更多《Flutter：从入门到实践》

第 1-1 课：为什么要掌握 Flutter？

移动开发技术手段从原始的原生应用开发，到 Google 和 Apple 各自推出新的语言 Kotiln、Swift，然后又发展到各种跨平台Hybrid App 开发，如 React Native、Weex、小程序等等。不过这些方案或多或少都有一些局限性和缺点，于是 Google 推出了新的跨平台移动应用开发技术：Flutter。

为什么说 Flutter 将是未来的主流跨平台开发框架？

Google 的 Flutter 开发应用的体验和流畅度基本和原生体验一致，感觉不到不流畅和卡顿。

我们知道在移动平台上，原生应用的体验最好、流畅度最高、性能也最好。而目前的跨平台技术和框架的流畅度和体验远远达不到原生的体验，多少都会卡顿和丢帧，但是 Google 官方说 Flutter 可以达到120 FPS。

Flutter 最出色的地方就是自建了绘制引擎，使得跨平台开发一套代码可以创造出和原生应用相同的体验。并且 Flutter 开发效率非常高，SDK 里所有的布局、控件都组件化，采用 React 方式。

Flutter 的开发不仅仅局限于移动跨平台，目前已经支持 Web 开发、后端开发、PC 桌面应用开发（内测中）、嵌入式开发（内测中）。 这也是 Flutter 变得越来越受关注，越来越多大公司和开发者进行使用的原因之一。

Flutter 支持多种开发工具的插件化使用，这就大大的丰富了各种开发工具可以进行 Flutter 的开发和调试，也满足了不同开发者的开发习惯。

同时 Flutter 不但做到了一套代码逻辑实现 Android 和 iOS 平台的跨平台运行，而且无需像 React Native 等技术那样，部分和原生交互的逻辑需要写两套代码逻辑，Flutter 只需写一套代码，大部分功能官方 SDK 里已经支持，并在不断更新拓展。而且如果需要一些与原生交互的部分，都是通过插件化形式使用，依然是一套代码逻辑多平台兼容。后面将会详细讲解。

接下来，我们就开始我们的认识 Flutter 技术之旅吧。本文将主要介绍：

• Flutter 的诞生
• 目前各种跨平台方案的对比
• Flutter 特点
• Flutter 框架结构
• Flutter社区活跃度和趋势

1 Flutter 的诞生

( 图片来自 Google 开发者官方 )

Flutter是 Google 于 2015 年 5 月 3 日推出的免费开源跨平台开发框架，可以快速开发 Android 和 iOS 应用，同时也将是未来的 Google Fuchsia OS 下开发应用的主要技术框架。未来的 Flutter 的开发不仅仅局限于移动跨平台，目前已经支持 Web 开发、后端开发、PC 桌面应用开发（内测中）、嵌入式开发（内测中）。

Flutter 的第一个版本 SDK 运行在 Android 操作系统上，被称作“Sky”。第一个开发者版本在 2015 年的 Flutter 开发者会议上被公布，并且对外宣称 Flutter 的开发的应用目标为实现 120FPS的渲染性能，原生的渲染性能一般为 80FPS。由于之前一直是开发版本，所以 Flutter 不温不火，只有少数的一些公司和 Google 内部在尝试使用。

终于在 2018 年 12 月 5 日，Google Flutter 团队正式发布了 Flutter 1.0 正式版，正式版的发布意味着 Flutter 在经过开发、测试、应用上已经基本上稳定和满足大部分开发需求了。这也使得Flutter 在发布正式版后，更多的大公司、开发者纷纷转型使用和学习 Flutter 进行跨平台应用的开发。

目前在 Google 内部，Flutter 已经被广泛用于多个产品，比如 Google Ads 已经将其产品的 iOS 版本和 Android 版本转向使用 Flutter。在正式版本之前，全世界已经有多个公司开始使用 Flutter 来开发应用，包括 Abbey Road Studios、阿里巴巴、Capital One、Groupon、Hamilton、京东、Philips Hue、Reflectly 以及腾讯等。而正式版的功能基本上已经比较完善，其他的扩展更强大的功能 Google 官方也正在规划扩展开发。目前 Flutter 1.5 稳定版已经于 2019 年 5 月 8 号发布，这样的更新频率，给更多的开发者和公司增加了动力。Flutter 势必也将成为未来的跨平台开发主流趋势！

接下来回顾下 2018 年和 2019 年 Flutter 的发展情况：

• 2 月底在世界移动大会 （MWC）上宣布了第一个 Beta 版发布;
• 5 月的 Google I/O 大会上发布了 Beta 3;
• 6 月底的 GMTC 宣布了首个发布预览版;
• 9 月的谷歌开发者大会（Google Developer Days）上，发布预览版 2。
• 12 月宣布发布正式稳定 1.0 版;
• 2019年 2 月宣布发布稳定版 1.2 版本 SDK。
• 2019年 5 月宣布发布稳定版 1.5 版本 SDK。

作为 Flutter 1.0 之后的首次更新， Flutter SDK 1.2 稳定版围绕以下几点进行了重点优化与改进：

• 提升核心框架的稳定性、性能和质量；
• 改进现有 Widget 视觉效果和功能；
• 为 Flutter 开发者提供全新的基于 Web 的调试工具。

目前 Flutter 的社区非常活跃，Flutter 在 Github 最受欢迎的开源软件中排名前 50，国内也有大量的开发者开始使用 Flutter 构建跨平台 (Android & iOS) 的应用，如：阿里巴巴、腾讯、京东等都使用 Flutter 发布了自己的应用。

Google 官方 Flutter 团队计划，未来也将支持 Flutter Web 和 Flutter PC 的应用移植开发，让我们拭目以待吧！

2 目前各种跨平台方案的对比

目前我们在开发应用时，需要同时兼容 iOS 和 Android 两种平台时有两种技术选择：走原生开发路线，把界面和逻辑在不同平台分别实现；抑或用同一套代码兼容多个平台，但这往往意味着运行速度和产品体验的损失。除了原生外，目前跨平台技术一般是混合开发，如采用 H5、Re