什么是Flutter?

Flutter是谷歌出品的一个移动端框架，理论上来说Flutter的跨平台性远超传统的跨平台技术，解决方案。可以保证应用同时运行在Android，iOS，Windows，Mac，Linux，Google Fuchsia终端。
市面上已经存在各类跨平台的方案，Flutter近年来保持良好的发展势头并且广受关注的原因是什么，它本身具备那些方面的优势呢？

Flutter技术实现

Flutter整体结构图

Flutter框架结构（Framework）

Flutter框架结构图

Flutter采用Dart的框架，Dart本身包含了许多非常适合开发者使用的移动开发框架，例如常用的Material(Android风格)和Cupertino(iOS风格)框架。

• Widget
  Widget的概念其实是Flutter开发过程中会接触到的一个比较核心的思想，Flutter官方文档中写的“Everything's a widget”，在整个开发过程中你可以把一切都看作一个组件，组件式的构建UI，响应UI
• Rendering
  Rendering是一个界面的渲染库，在Flutter中界面的渲染主要包括三个阶段：布局（Layout），绘制（Painting），合成（Composite）
• Animation
  Animation是一个动画相关类，可以通过这个类创建一些基础的动画，补间动画（Tween Animation），类似于Android中的ValueAnimator和iOS中的Core Animation
• Painting
  Painting封装了来自Engine层的绘制接口（下文将会提到）
• Gesture
  处理手势动作和手势相关交互
• Foundation
  底层框架，定义底层工具类和方法，提供其他层使用

Flutter引擎（Engine）

Flutter引擎结构图

Flutter Engine使用C++实现，主要包括三个部分：Dart Runtime,Skia（Google开源图形库）,Text(文字排版引擎)

• Skia
  Skia是一个谷歌出品的开源二维图形库，提供常用的API，并且可以在多种软硬件平台上运行。谷歌Chrome浏览器、Chorme OS、Android、火狐浏览器、火狐操作系统及其他许多产品都使用它作为图形引擎
  和其他跨平台方案不同Flutter没有使用原生的UI 和 绘制框架，以此来保证Flutter的高性能体验

嵌入层（Embedder）

嵌入层结构图

嵌入层的主要作用顾名思义就是将Flutter嵌入到各个平台上去，其中主要负责的工作有：surface渲染设置，线程的管理，原生插件管理，事件循环的交互。嵌入层位于整个框架的最底层说明了Flutter的平台相关层非常低，大部分的渲染操作在Flutter本身内部完成，各个平台（Android，iOS等）只需要提供一个画布，这就让Flutter本身有了很好的跨端一致性。

Flutter如何做到图形性能媲美原生

不同技术方案生产app的流程

通过分析各个方案的工作流程可以更好的理解其中的原因

• 原生Android App
  绘图时首先调用原生Java代码
  调用绘图引擎Skia的C/C++代码
  生成CPU/GPU指令完成绘图
• Flutter App
  首先调用Dart代码
  直接调用Skia绘图引擎C/C++代码
  生成CPU/GPU指令完成绘图
• 一般的跨平台框架（以RN为例）
  调用框架代码（JS）
  调用原生Java代码
  调用绘图引擎Skia的C/C++代码
  生成CPU/GPU指令完成绘图

由此可以看出只要Flutter框架中的Dart代码的效率可以接近原生的Java代码的时候整个Flutter App的图形绘制效率就可以媲美原生

而且在Android原生平台或者其他跨平台框架中Skia是作为操作系统的一部分，只有Android操作系统升级的时候Skia才会进行升级。但在Flutter中Skia作为了Flutter SDK的一部分，只要Flutter SDK升级Skia就会升级，所以如果Skia在最近有性能上的改进，你的Flutter App很快就可以获得性能上的改进而不是等到下一次系统升级。而Skia作为Flutter一个独立的开源绘图引擎每天都有几十个更新提交，性能不断的成倍提升，所以能够及时使用最新的Skia引擎对Flutter非常有利。

Skia绘图引擎同一场景绘制时间趋势图