2. Flutter 初识

Flutter 简介

Flutter 是 Google 2015 年开源的 UI 工具包，帮助开发者通过一套代码库高效构建多平台精美应用，支持移动、Web、桌面和嵌入式平台 。可快速在iOS和Android上构建高质量的原生用户界面。
Flutter 开源、免费，拥有宽松的开源协议，适合商业项目。

Flutter 可以方便的加入现有的工程中。在全世界，Flutter 正在被越来越多的开发者和组织使用，并且 Flutter是完全免费、开源的。它也是构建未来的 Google Fuchsia 应用的主要方式。

Flutter 组件采用现代响应式框架构建，这是从React中获得的灵感，中心思想是用组件(widget)构建你的UI。 组件描述了在给定其当前配置和状态时他们显示的样子。当组件状态改变，组件会重构它的描述(description)，Flutter 会对比之前的描述， 以确定底层渲染树从当前状态转换到下一个状态所需要的最小更改。

随着移动开发技术的日渐成熟，一些厂商开始考虑跨平台技术的解决方案，从早期的Cordova、Xamarin，再到后来的React Native和Weex等等，可谓是百家齐放，每种框架都有各自的优缺点，但目标都是一致的，就是提升应用的开发效率，降低研发成本，一套代码运行多个平台。这些框架除了Xamarin外都是采用Web端技术开发移动端应用，但提供比Web更好的用户体验。

以上框架中Cordova其实是一个Webapp框架，提供了针对iOS、Android、WP、BlackBerry等不同系统最常用的Native API调用能力，其本质还是由webkit做UI渲染，因此其性能和原生相比还有很大差距；而Xamarin笔者了解不多，又是个收费的项目，不再做扩展，有兴趣的可自行了解；React Native和Weex原理基本一样，都是基于js的开发框架，React Native基于React.js，Weex基于Vue.js，其本质都是通过虚拟DOM驱动原生组件的渲染，因此性能和体验比较接近原生，然而其需要通过桥接器来驱动原生渲染的过程，导致其在性能上与原生还是有一定差距。基于以上框架的缺点，Flutter框架应运而生。

Flutter特点

• 快速开发

由于Flutter选用了Dart作为其开发语言，Dart既可以是AOT（Ahead Of Time）编译，也可以是JIT（Just In Time）编译，其JIT编译的特性使Flutter在开发阶段可以达到亚秒级有状态热重载，从而大大提升了开发效率。

• 性能优越

使用自带的高性能渲染引擎（Skia）进行自绘，渲染速度和用户体验堪比原生。

• 富有表现力的精美UI

Flutter内置众多精美的Material Design和Cupertino（iOS风格）小部件，开发者可快速构建精美的用户界面，以提供更好的用户体验。

Flutter系统架构图

• 快速开发

由于Flutter选用了Dart作为其开发语言，Dart既可以是AOT（Ahead Of Time）编译，也可以是JIT（Just In Time）编译，其JIT编译的特性使Flutter在开发阶段可以达到亚秒级有状态热重载，从而大大提升了开发效率。

• 性能优越

使用自带的高性能渲染引擎（Skia）进行自绘，渲染速度和用户体验堪比原生。

• 富有表现力的精美UI

Flutter内置众多精美的Material Design和Cupertino（iOS风格）小部件，开发者可快速构建精美的用户界面，以提供更好的用户体验。
如上图所示为Flutter官方给出的系统架构图，可以看出Flutter框架分为三层：Framework层、Engine层和Embedder层。

• Framework层：由Dart来实现，包含众多安卓Material风格和iOS Cupertino风格的Widgets小部件，还有渲染、动画、绘图和手势等。Framework包含日常开发所需要的大量API，普通应用开发熟悉这些API的使用基本OK了，不过很多特殊场景的控件需要自己根据实际情况进行自定义。Framework层的源码地址：https://github.com/flutter/flutter/tree/master/packages/flutter/lib
  
• Engine层：由C/C++实现，是Flutter的核心引擎，主要包括Skia图形引擎、Dart运行时环境Dart VM、Text文本渲染引擎等；如果想深入了解Flutter原理，建议阅读该层的源代码。源代码地址：https://github.com/flutter/engine
  
• Embedder层：主要处理一些平台相关的操作，如渲染Surface设置、本地插件、打包、线程设置等。

Flutter原理

无论是iOS还是安卓都是提供一个平台的View给Flutter层，页面内容渲染交由Flutter层自身来完成，所以其相对React Native等框架性能更好。Flutter中图形渲染流程：

大致流程如下：

1. GPU的Vsync信号同步到UI线程
2. UI线程使用Dart来构建抽象的视图结构
3. 视图结构在GPU线程中进行图层合成
4. 合成后的视图数据提供给Skia图形引擎处理成GPU数据
5. 数据再通过OpenGL或Vulkan提供给GPU进行渲染

Flutter 生态

由于有google这样的超级公司支持和推广，Flutter虽然刚出来没有多久，但是生态还是非常好的，中国也有了大量的Flutter爱好者，还有中文的 Futter网站 : Flutter 中文网
我们先来看一下Flutter的插件情况。由法国人总结了一个Flutter的插件列表，我们可以打开看一下，里边的插件非常丰富。所以小伙伴们完全没有必要为Flutter的生态环境而担忧。
github地址：https://github.com/Solido/awesome-flutter