在讨论渲染管道（Rendering Pipeline）之前，首先了解Flutter三棵树模型（实际上还有一棵 Layer Tree，但是过于底层，一般不纳入讨论）
Flutter三棵树示意图
Widget Tree是开发者能够直接感知到的，但其最终形态和代码会有一些差异，因为部分Widget本身就是由其它Widget构成的。上图中的ColoredBox等Widget虽然开发者没有直接使用，但却存在于最终的Widget Tree中。每个Widget都会有对应的Element， 并有一棵对应的Element Tree，实际上Element Tree才是内存中真实存在的数据，Widget Tree和Render Tree都是由Element Tree驱动生成的。正是由于这种机制，Element Tree扮演了Virtual DOM中管理者的角色。
Element Tree中， RenderObjectElement类型的节点都会产生RenderObject并构成最终的Render Tree。对开发者来说：Render Tree时最底层的UI描述，但对Framework来说： Render Tree是Framework对UI最上层，最抽象的描述。
任何一个UI框架，无论是Web还是Android，都有自己的渲染管道，渲染管道时UI框架的核心，负责处理用户输入，生成UI描述，栅格化绘制指令，上屏最终数据等。Flutter也不例外，Flutter采用了自渲染的方式，所以渲染管道是独立于平台的。以Android为例， Flutter只是通过Embedder获取了一个Surface或Texture作为渲染管道最终的输出目标，具体来说Flutter的渲染管道分为以下七个步骤：
用户输入（User Input）： 响应用户通过鼠标、键盘、触摸屏等设备产生的手势行为。
动画（Animation）： 基于定时器（Timer）更新当前帧的数据。
构建（Build）： 三棵树的创建，更新和销毁阶段，StatelessWidget和State的build方法将在改阶段执行。
布局（Layout）： Render Tree将在该阶段完成各个节点的大小和位置计算。
绘制（Paint）： Render Tree遍历每个节点，生成Layer Tree、RenderObject的paint方法在该阶段执行，生成一系列绘制指令。
合成（Composition）： 处理Layer Tree，生成一个Scene对象，作为栅格化的输入。
栅格化（Rasterize）：将绘制指令处理成可供GPU上屏的原始数据。
以上七个步骤中： 用户输入和动画是相对独立的过程，部分简单的静态UI不需要处理。构建、布局和绘制直接关系到Flutter三棵树的维护和使用，是Framework层的核心功能之一，是深刻理解Flutter底层工作原理的关键所在（后续文章中详细介绍）。合成和栅格化负责绘制指令的最终消费，主要逻辑在Engine中实现。
