一篇带你了解跨平台的 UI 工具包—Flutter
Flutter是google开发的一套全新的跨平台、开源UI框架，支持IOS、Android系统开发，并且是未来新操作系统Fuchsia的默认开发套件。自从2017年5月发布第一个版本以来，目前Flutter已经发布了近60个版本，并且在2018年5月发布了第一个“Ready for Production Apps”的Beta 3版本，6月20日发布了第一个“Release Preview”版本。
Flutter 是一个跨平台的 UI 工具包，旨在允许代码在 iOS 和 Android 等操作系统之间重用，同时还允许应用程序直接与底层平台服务交互。目标是使开发人员能够交付在不同平台上感觉自然的高性能应用程序，在共享尽可能多的代码的同时拥抱存在的差异。
在开发过程中，Flutter 应用程序在 VM 中运行，该 VM 提供有状态的热重新加载更改，而无需完全重新编译。对于发布，Flutter 应用程序直接编译为机器代码，无论是 Intel x64 还是 ARM 指令，或者如果目标是 web，则编译为 JAVAScript。该框架是开源的，具有宽松的 BSD 许可证，并且拥有一个蓬勃发展的第三方包生态系统，可以补充核心库功能。
本概述分为多个部分：
- 层模型：构建 Flutter 的部分。
- 响应式用户界面：Flutter 用户界面开发的核心概念。
- 小部件简介：Flutter 用户界面的基本构建块。
- 渲染过程：Flutter 如何将 UI 代码转换为像素。
- 平台嵌入器概述：让移动和桌面操作系统执行 Flutter 应用程序的代码。
- 将 Flutter 与其他代码集成：有关 Flutter 应用可用的不同技术的信息。
- Support for the web：结语 Flutter 在浏览器环境下的特性。
在Flutter诞生之前，已经有许多跨平台UI框架的方案，比如基于WebView的Cordova、AppCan等，还有使用html+JavaScript渲染成原生控件的React Native、Weex等。
基于WebView的框架优点很明显，它们几乎可以完全继承现代Web开发的所有成果(丰富得多的控件库、满足各种需求的页面框架、完全的动态化、自动化测试工具等等)，当然也包括Web开发人员，不需要太多的学习和迁移成本就可以开发一个App。同时WebView框架也有一个致命(在对体验&性能有较高要求的情况下)的缺点，那就是WebView的渲染效率和JavaScript执行性能太差。再加上Android各个系统版本和设备厂商的定制，很难保证所在所有设备上都能提供一致的体验。
为了解决WebView性能差的问题，以React Native为代表的一类框架将最终渲染工作交还给了系统，虽然同样使用类HTML+JS的UI构建逻辑，但是最终会生成对应的自定义原生控件，以充分利用原生控件相对于WebView的较高的绘制效率。与此同时这种策略也将框架本身和App开发者绑在了系统的控件系统上，不仅框架本身需要处理大量平台相关的逻辑，随着系统版本变化和API的变化，开发者可能也需要处理不同平台的差异，甚至有些特性只能在部分平台上实现，这样框架的跨平台特性就会大打折扣。
Flutter则开辟了一种全新的思路，从头到尾重写一套跨平台的UI框架，包括UI控件、渲染逻辑甚至开发语言。渲染引擎依靠跨平台的Skia图形库来实现，依赖系统的只有图形绘制相关的接口，可以在最大程度上保证不同平台、不同设备的体验一致性，逻辑处理使用支持AOT的Dart语言，执行效率也比JavaScript高得多。
Flutter同时支持windows、linux和macOS操作系统作为开发环境，并且在Android Studio和VS Code两个IDE上都提供了全功能的支持。Flutter所使用的Dart语言同时支持AOT和JIT运行方式，JIT模式下还有一个备受欢迎的开发利器“热刷新”(Hot Reload)，即在Android Studio中编辑Dart代码后，只需要点击保存或者“Hot Reload”按钮，就可以立即更新到正在运行的设备上，不需要重新编译App，甚至不需要重启App，立即就可以看到更新后的样式。
在Flutter中，所有功能都可以通过组合多个Widget来实现，包括对齐方式、按行排列、按列排列、网格排列甚至事件处理等等。Flutter控件主要分为两大类，StatelessWidget和StatefulWidget，StatelessWidget用来展示静态的文本或者图片，如果控件需要根据外部数据或者用户操作来改变的话，就需要使用StatefulWidget。State的概念也是来源于Facebook的流行Web框架React，React风格的框架中使用控件树和各自的状态来构建界面，当某个控件的状态发生变化时由框架负责对比前后状态差异并且采取最小代价来更新渲染结果。
