Flutter学习路线总结

作为一个多年的移动端开发人员，之前使用过Hybrid和RN混编技术在原生中开发，现使用Flutter开发也有一年多了，项目一直在持续迭代中，并做过架构，封装过多个组件和插件。在这里做个总结，希望能给感兴趣的同学一些帮助。

学习一门技术或语言不要上来就直奔代码，要先知道为什么要选择这门技术，这门技术解决了什么、和同级语言相比的优缺点等。所以第一篇文章我会简单从混编技术选型、环境搭建、开发语言的学习、Flutter开发起步几个方面进行介绍，之后会陆续更新Flutter开发中遇到的问题的解决方案和架构方面的文档。

第0步 技术选型

也跟很多朋友探讨过这个问题，到底是用原生还是混编方式去开发一个应用，我认为在移动互联网的浪潮下，开发效率和使用体验可以说是同等重要。使用原生的方式来开发APP，就需要我们必须对iOS和Android两个平台分别开发，这对于中小型团队来说就是有隐患和额外的负担的。所以使用原生还是混编需要从公司的现有状况和对产品的体验要求等来考虑。

跨平台开发是为了增加业务代码的复用率，减少因为要适配多个平台带来的工作量，从而降低开发成本。

根据实现方式的不同，业内常见的观点是将主流的跨平台方案划分为三个时代。

• Web 容器时代：基于 Web 相关技术通过浏览器组件来实现界面及功能，典型的框架包括 Cordova(PhoneGap)、Ionic 和微信小程序。
• 泛 Web 容器时代：采用类 Web 标准进行开发，但在运行时把绘制和渲染交由原生系统接管的技术，代表框架有 React Native、Weex 和快应用，广义的还包括天猫的 Virtual View 等。
• 自绘引擎时代：自带渲染引擎，客户端仅提供一块画布即可获得从业务逻辑到功能呈现的多端高度一致的渲染体验。Flutter，是为数不多的代表。

(此图懒的画，是在网上找的，Flutter 2.0后就已经支持Web了)

我们在做技术选型时，可以参考以上维度，从开发效率、技术栈、性能表现、维护成本和社区生态来进行综合考虑。比如，是否必须支持动态化？是只解决 Android、iOS 的跨端问题，还是要包括 Web？对性能要求如何？对多端体验的绝对一致性和维护成本是否有强诉求？
从各个维度综合考量，React Native 和 Flutter 无疑是最均衡的两种跨平台开发方案，而其他的方案或多或少都“偏科严重”。
React Native 依托于 Facebook，经过 4 年多的发展已经成长为跨平台开发方案的实际领导者，并拥有较为丰富的第三方库和开发社区；
Flutter 以挑战者姿态出现在我们的面前，可以提供更彻底的跨平台技术解决方案。虽然 Flutter 推出时间不长，但也有了诸多商用案例，加上清晰的产品路线图和 Google 的强大号召力，Flutter 未来的发展非常值得期待。

第一步 环境的搭建

工欲善其事，必先利其器，任何一门新技术或语言的学习，首先都需要从基础的环境搭建开始，直接看官网安装即可https://flutterchina.club，选择并下载最新的稳定版本，根据流程安装SDK和模拟器，官网已经介绍的很详细，安装完毕创建demo，能运行即可，也可以Hello World。

第二步 开发语言的学习

Flutter开发框架采用的开发语言是Dart，所以要用好Flutter这个构架，必须要搞清楚Dart语言。

对新技术或语言的学习中，一直都非常认同一个观点：千万不要直接陷入细节里，你应该先鸟瞰其全貌，这样才能从高维度理解问题。所以，要更高效地掌握 Dart，以最快的速度具备开发一款 Flutter 应用的能力，要从Flutter 开发的角度，了解Dart 语言出现的历史背景、特性以及未来。

Dart是什么？

2011年10月，在丹麦召开的GOTO大会上，Google发布了一种新的编程语言Dart。如同Kotlin和Swift的出现，分别是为了解决Java和OC在编写应用程序的一些实际问题一样，Dart的诞生正式要解决JS存在的、在语言本质上无法改进的缺陷。

那么，JS到底有哪些问题和缺陷呢？JS实际上是两类编程语言风格的混合产物：函数式编程风格，与面向对象编程风格。由于设计时间太短，一些细节考虑不够严谨，导致后来一段时间，使用JS开发的过程混乱不堪。处于对JS的不满，Google的程序员们决定自己写一个新语言来换掉它，所以Dart的最初定位也是一种运行在浏览器中的脚本语言。但JS的生命力似乎比预想的更强大。原来JS只能在浏览器中运行，但Node.js的出现让它开始有能力运行在服务端，很快手机应用与桌面应用也成为了JS的宿主容器，比如React、React Native 、Vue等架构。所以Dart彻底转变思路，成为专注大前端与跨平台生态的语言。

Dart是一种适用于万维网的开放源代码编程语言，由Google主导开发，于2011年10月公开。目标在于成为下一代结构化Web开发语言。 类似JavaScript，Dart也是一种面向对象语言，但是它采用基于类编程。

Dart的特性？

每门语言都有各自的特点，作为移动端开发的后来者，Dart语言可以说是集百家之长，拥有其他优秀编程语言的诸多特性和影子，所以对于其他语言的开发者而言，学习成本无疑是非常低的。

JIT和AOT

借助于先进的工具链和编译器，Dart是少数同时支持JIT(Just In Time，即时编译)和AOT(Ahead of Time，运行时编译)的语言之一。

在开发期使用JIT编译，可以缩短产品的开发周期。Flutter最受欢迎的功能之一热重载，正式基于此特性。而在发布期使用AOT，就不需要像React Native那样在跨平台JavaScript代码和原生Aandroid、iOS代码之间建立低效的方法调用映射关系。所以说，Dart具有运行速度快、执行性能好的特点。 

内存分配与垃圾回收

Dart VM 的内存分配策略比较简单，创建对象时只需要在堆上移动指针，内存增长始终是线性的，省去了查找可用内存的过程。
在 Dart 中，并发是通过 Isolate 实现的。Isolate 是类似于线程但不共享内存，独立运行的 worker。这样的机制，就可以让 Dart 实现无锁的快速分配。
Dart 的垃圾回收，则是采用了多生代算法。新生代在回收内存时采用“半空间”机制，触发垃圾回收时，Dart 会将当前半空间中的“活跃”对象拷贝到备用空间，然后整体释放当前空间的所有内存。回收过程中，Dart 只需要操作少量的“活跃”对象，没有引用的大量“死亡”对象则被忽略，这样的回收机制很适合 Flutter 框架中大量 Widget 销毁重建的场景。

单线程模型

支持并发执行线程的高级语言（比如，C++、Java、Objective-C），大都以抢占式的方式切换线程，即：每个线程都会被分配一个固定的时间片来执行，超过了时间片后线程上下文将被抢占后切换。如果这时正在更新线程间的共享资源，抢占后就可能导致数据不同步的问题。
解决这一问题的典型方法是，使用锁来保护共享资源，但锁本身又可能会带来性能损耗，甚至出现死锁等更严重的问题。
这时，Dart 是单线程模型的优势就体现出来了，因为它天然不存在资源竞争和状态同步的问题。这就意味着，一旦某个函数开始执行，就将执行到这个函数结束，而不会被其他 Dart 代码打断。
所以，Dart 中并没有线程，只有 Isolate（隔离区）。Isolates 之间不会共享内存，就像几个运行在不同进程中的 worker，通过事件循环（Event Looper）在事件队列（Event Queue）上传递消息通信。（其实Dart是有办法实现类似多线程的功能，后期会出文章介绍）

Dart的基础学习？

需要了解Dart的特性、基础语法、类型变量、函数等知识，我建议直接从官网中学习即可。

或者可以参考文章：https://jiangdg.blog.csdn.net/article/details/110823218

Flutter开发指南之理论篇：Dart语法01（数据类型，变量，函数）
Flutter开发指南之理论篇：Dart语法02（运算符，循环，异常）
Flutter开发指南之理论篇：Dart语法03（类，泛型）
Flutter开发指南之理论篇：Dart语法04（库，异步，正则表达式）
Flutter开发指南之理论篇：Dart语法05（单线程模型，事件循环模型，Isolate）

第三步 Flutter 开发起步

从标准模版入手，体会Flutter代码是如何运行在原生系统上的

Flutter的知识体系：

(持续更新中.....)

相关扩展问题：

Dart是单线程如何进行网络请求同时绘制UI的(怎么并发处理异步任务的)，怎么实现类似多线程的功能？

所有的Dart程序都在Isolate中运行，每个Isolate拥有自己的私有内存块和一个事件循环模型，其中，事件循环模型就是用来处理各种事件，比如点输入/输出，点击，定时器以及异步任务等。