什么是Flutter？

Flutter简介

Flutter是Google推出并开源的移动应用程序（App）开发框架，主打跨平台、高保真、高性能。其采用Dart（官网、中文网）语言做为开发语言，开发者能够经过Dart语言开发Flutter App，一套代码可同时运行在iOS和Android平台上。Flutter提供了丰富的组件、接口，开发者能够很快地为Flutter添加原生扩展。

Flutter诞生过程：

• 2017 年 Google I/O 大会上，Google 首次推出了一款新的用于建立跨平台、高性能的移动应用框架——Flutter。
• 2018年2月，Flutter发布了第一个Beta版本，同年五月， 在2018年Google I/O 大会上，Flutter 更新到了 beta 3 版本。
• 2018年6月，Flutter发布了首个预览版本，这意味着 Flutter 进入了正式版（1.0）发布前的最后阶段。

跨平台自绘引擎

Flutter与其余用于构建App的大多数框架不一样，由于Flutter既不使用WebView，也不使用平台（Android、iOS等）的原生控件。相反，Flutter使用本身的高性能渲染引擎来绘制Widget。这样不只能够保证在Android和iOS平台上UI的一致性，并且也能够避免对原生控件依赖而带来的限制及高昂的维护成本。

Flutter使用Skia做为其2D渲染引擎，Skia是Google的一个2D图形处理函数库，包含字型、坐标转换以及点阵图都有高效能且简洁的表现，Skia是跨平台的，并提供了很是友好的API，目前Google Chrome浏览器和Android均采用Skia做为其绘图引擎，值得一提的是，因为Android系统已经内置了Skia，因此Flutter在打包APK（Android应用安装包）时，不须要再将Skia打入APK中，但iOS系统并未内置Skia，因此构建iPA时，也必须将Skia一块儿打包，这也是为何Flutter APP的Android应用安装包比iOS应用安装包小的主要缘由。

高性能

Flutter采用GPU渲染技术，Flutter编写的应用是能够达到120fps（每秒传输帧数），这也就是说，它彻底能够胜任游戏的制做，而咱们常说的RN的性能只能达到60fps，这也算是Flutter的一个超高竞争力，官方宣称Flutter甚至会超过原生性能。若是你想迈入移动游戏领域，学习Flutter也是一个很是好的选择。

Flutter高性能主要靠两点来保证：

• 首先，Flutter App采用Dart语言开发，Dart在JIT（即时编译）模式下，速度与JavaScript基本持平；并且Dart还支持AOT（提早编译）模式，当以AOT模式运行时，JavaScript便远远追不上了。速度的提高对高帧率下的视图数据计算颇有帮助。
• 其次，Flutter使用本身的渲染引擎来绘制UI，布局数据等由Dart语言直接控制，因此在布局过程当中不须要像RN那样经过JavaScriptCore在JavaScript和原生之间进行通讯，这在一些滑动和拖动的场景下具备明显优点，由于在滑动和拖动过程当中每每都会引发布局发生变化，因此JavaScript须要和原生之间不停的同步布局信息，这和在浏览器中要JavaScript频繁操做DOM所带来的问题是相同的，都会带来比较可观的性能开销。

为何Flutter采用Dart语言开发？

这是一个颇有意思，同时具备争议的问题，在了解Flutter为何选择了Dart而不是JavaScript以前，咱们先来介绍两个概念：JIT和AOT。

目前，程序主要有两种运行方式：静态编译和动态解释。

• 静态编译：静态编译的程序在执行前所有被翻译为机器码，一般将这种类型称为AOT（Ahead of time）即“提早编译”；
• 动态解释：动态解释的程序是在执行中一句一句边翻译边运行的，一般将这种类型称为JIT（Just-in-time）即“即时编译”。

AOT程序的典型表明是用C/C++开发的应用，它们必须在执行前编译成机器码，而JIT的表明则很是多，如JavaScript、Python等，事实上，全部脚本语言都支持JIT模式。但值得一提的是JIT和AOT指的是程序运行方式，它们和编程语言并不是强关联，有些语言既能够以JIT方式运行也能够以AOT方式运行，如Java、Python，它们能够在第一次执行时编译成中间字节码，而后在以后执行时能够直接执行字节码，也许有人会说，中间字节码并不是机器码，在程序执行时仍然须要动态将字节码转为机器码，是的，不过一般咱们区分是否为AOT的标准就是看代码在执行以前是否须要编译，只要须要编译，不管其编译产物是字节码仍是机器码，都属于AOT。在此，读者没必要纠结于概念，概念就是为了传达精神而发明的，只要读者可以理解其原理便可，正所谓得其神忘其形。

如今咱们看看Flutter为何选择Dart语言？笔者根据官方解释以及本身对Flutter的理解总结了如下几条（因为其它跨平台框架都将JavaScript做为其开发语言，因此主要将Dart和JavaScript作一个对比）：

1. 开发效率高

• 基于JIT的快速开发周期：Flutter在开发阶段采用JIT模式，这样就避免了每次改动都要进行编译，极大的节省了开发时间；（Dart运行时支持）
• 基于AOT的发布包：Flutter在发布时能够经过AOT生成高效的ARM代码以保证应用性能，而JavaScript则不具备这个能力。（编译器支持）

2. 高性能

   Flutter旨在提供流畅、高保真的UI体验。为了实现这一点，Flutter须要可以在每一个动画帧中运行大量的代码，这意味着须要一种既能提供高性能的语言，又不会出现丢帧的周期性暂停，而Dart支持AOT，在这一点上能够作的比JavaScript更好。

3. 快速内存分配

   Flutter框架使用函数式流，这使得它在很大程度上依赖于底层的内存分配器。所以，拥有一个可以有效的处理琐碎任务的内存分配器将显得十分重要，若是Dart语言缺少此功能，Flutter将没法有效地工做。固然Chrome V8的JavaScript引擎在内存分配上也已经作的很好了，事实上Dart开发团队的不少成员都是来自Chrome团队的，因此在内存分配上Dart并不能做为超越JavaScript的优点，但对于Flutter来讲，它须要这样的特性，而Dart也正好知足而已。

4. 类型安全

   因为Dart是类型安全的语言，支持静态类型检测，因此能够在编译前发现一些类型的错误，并排除潜在问题，这一点对于前端开发者来讲可能会更具备吸引力。与之不一样的，JavaScript是一个弱类型语言，也所以前端社区出现了不少给JavaScript代码添加静态类型检测的扩展语言和工具，如：微软的TypeScript以及Facebook的Flow。相比之下，Dart自己就支持静态类型，就是它的一个重要优点。

5. Dart团队的支持

   因为有Dart团队的积极投入，Flutter团队能够得到更多、更方便的支持，正如Flutter官网所诉：“咱们正与Dart社区进行密切合做，以改进Dart在Flutter中的使用。例如，当咱们最初使用Dart时，该语言并无提供生成原生二进制文件的工具链（工具链对于实现可预测的高性能具备很大的帮助），可是如今它实现了，由于Dart团队专门为Flutter构建了它。一样，Dart VM以前已经针对吞吐量进行了优化，但团队如今正在优化VM的延迟时间，这对于Flutter的工做负载更为重要。”

Flutter框架结构

下面咱们将对Flutter的框架作一个总体介绍，旨在让读者心中有一个总体的印象，这对初学者来讲很是重要。若是一会儿便深刻到Flutter中，就会像是一个在沙漠中没有地图的人，即便能够找到一个绿洲，可是他也不会知道下一个绿洲在哪儿。所以，不管学什么技术，都要先有一张清晰的“地图”，而咱们的学习过程就是“按图索骥”，这样咱们才不会陷于细节而“目无全牛”。接下来，咱们看一下Flutter官方提供的一张框架结构图：

Flutter Framework

这是一个纯Dart实现的SDK，它实现了一套基础库，自底向上，简单介绍一下：

• 底下两层（Foundation层和Animation、Painting、Gestures层）在Google的一些视频中将这两层合并为一个Dart UI层，对应的是Flutter中的dart:ui包，它是Flutter引擎暴露的底层UI库，提供动画、手势及绘制功能。
• Rendering层，这一层是一个抽象的布局层，它依赖于Dart UI层，Rendering层会构建一个UI树，当UI树有变化时，会计算出有变化的部分，而后更新UI树，最终将UI树绘制到屏幕上，这个过程相似于React中的虚拟DOM。Rendering层能够说是Flutter UI框架最核心的部分，它除了肯定每一个UI元素的位置、大小以外还要进行坐标变换、绘制（调用底层dart:ui包）。
• Widgets层是Flutter提供的一套基础组件库，在基础组件库之上，Flutter还提供了Material和Cupertino两种视觉风格的组件库。而咱们Flutter开发的大多数场景，只是和Widgets层和Material、Cupertino层打交道。

Flutter Engine

这是一个纯C++实现的SDK，其中包括Skia引擎、Dart运行时和文字排版引擎等。在代码调用dart:ui库时，调用最终会走到Engine层，而后实现真正的绘制逻辑。

总结

Flutter框架自己有着良好的分层设计，本章旨在让读者对Flutter总体框架有个大概的印象，相信到如今为止，读者已经对Flutter有一个初始印象，在咱们正式动手以前，咱们仍是须要多了解一下Flutter的开发语言Dart。

如何学习Flutter

资源

• 官网：阅读Flutter官网的资源是快速入门的最佳方式，同时官网也是了解最新Flutter发展动态的地方，因为目前Flutter仍然处于快速发展阶段，因此建议读者要时不时的去官网看看有没有新的动态。
• 源码及注释：源码和注释应做为学习Flutter的第一文档，Flutter SDK的源码是开源的，而且注释很是详细，也有不少示例，实际上，Flutter官方的SDK文档就是经过注释生成的。源码结合注释能够帮你解决大多数问题。
• Github：若是遇到的问题在StackOverflow上也没有找到答案，能够去Github Flutter 项目下提issue。
• Gallery源码：Gallery是Flutter官方示例APP，里面有丰富的示例，读者能够在网上下载安装。Gallery的源码在Flutter源码“examples”目录下。

社区

• StackOverflow：若是你还没听过StackOverflow，那么我如今就能够告诉你，它是目前全球最大的程序员问答社区，也是如今活跃度最高的Flutter问答社区。StackOverflow社区除了世界各地的Flutter使用者会在上面交流以外，Flutter开发团队的成员也常常会在上面回答问题。
• Flutter中文网社区：Flutter中文网是wendux（牛人）维护的Flutter中文网站，也是目前最大的Flutter中文资源社区，上面提供了Flutter官网的文档翻译、开源项目及案例，还有申请加入组织的入口哦！笔者的文章不少都是整理于此。
• 掘金：掘金的Flutter主页目前收集了很多的专业性博客文章，读者能够自行浏览。