当下是移动互联网的时代，移动系统和设备的碎片化，使得我们在不同平台上开发和维护的成本加大。为了解决降低成本，快速应对市场变化的互联网产品交付节奏，出现了不少 跨平台解决方案。React Native就是典型的代表。
RN框架本身不负责渲染的，而是由原生代理，那么就会面临大量平台相关的逻辑处理，而随着系统版本和api的升级变化等，还要去处理不同平台的原生控件渲染带来的差异，这使得维护起来成本也不低。那么flutter是如何做到跨平台的呢，是不是也存在类似的问题呢？
flutter框架提供了一整套从底层渲染逻辑到上层开发语言的完整解决方案：视图渲染完全闭环在其框架内部，不依赖于底层操作系统提供的任何组件，从根本上保证了视图渲染在 Android 和 iOS 上的高度一致性；Flutter 的开发语言 Dart，是 Google 专门为（大）前端开发量身打造的专属语言，借助于先进的工具链和编译器，成为了少数同时支持 JIT 和 AOT 的语言之一，开发期调试效率高，发布期运行速度快、执行性能好，在代码执行效率上可以媲美原生 App。而这与 React Native 所用的只能解释执行的 JavaScript，又拉开了性能差距。
那么flutter是如何完成组件渲染的呢？
我们知道图像的显示需要CPU，GPU，显示器一起配合完成。CPU负责图像数据计算，GPU负责图像数据渲染，显示将最终的图像显示出来。CPU将计算好的数据给GPU，GPU完成渲染后放入帧缓冲区，随后视频控制器vsync 信号以每秒60次的速度从缓存区读取数据并交给显示器显示。如果统一了平台底层的渲染特性，那么上层开发接口和功能体验也就能得到统一。在flutter框架里引入skia底层图像渲染引擎，来抹平平台底层渲染差异。
UI线程使用dart来构建视图结构数据，这些数据会在GPU线程进程图层合成，交给skia引擎加工成GPU数据，这些数据会通过openGL最终提供给GPU渲染。
下面我们来了解下Flutter的框架结构：
Flutter 架构采用分层设计，从下到上分为三层，依次为：Embedder、Engine、Framework。Embedder 是操作系统适配层，实现了渲染 Surface 设置，线程设置，以及平台插件等平台相关特性的适配。从这里我们可以看到，Flutter 平台相关特性并不多，这就使得从框架层面保持跨端一致性的成本相对较低。
Engine 层主要包含 Skia、Dart 和 Text，实现了 Flutter 的渲染引擎、文字排版、事件处理和 Dart 运行时等功能。Skia 和 Text 为上层接口提供了调用底层渲染和排版的能力，Dart 则为 Flutter 提供了运行时调用 Dart 和渲染引擎的能力。而 Engine 层的作用，则是将它们组合起来，从它们生成的数据中实现视图渲染。
Framework 层则是一个用 Dart 实现的 UI SDK，包含了动画、图形绘制和手势识别等功能。为了在绘制控件等固定样式的图形时提供更直观、更方便的接口，Flutter 还基于这些基础能力，根据 Material 和 Cupertino 两种视觉设计风格封装了一套 UI 组件库。我们在开发 Flutter 的时候，可以直接使用这些组件库。
通过上面的介绍对flutter整体会有一个大概的了解。flutter的开发是基于dart语言开发，后面会针对dart基础写一篇介绍。同时在也会对flutter框架从应用到底层原理做一些分享
