Flutter是什么
Flutter是谷歌的移动UI框架，可以快速在iOS和Android上构建高质量的原生用户界面。 Flutter可以与现有的代码一起工作。在全世界，Flutter正在被越来越多的开发者和组织使用，并且Flutter是完全免费、开源的。
Flutter发展
说到Flutter，可能很多小伙伴都会以为它是新兴的、移动端、动态化、跨平台、开发框架，其实早在2014年10月，它就已经诞生。 从去年开始Flutter的热度在不断地上升，那么它对很多小伙伴造成了一个误区：认为Flutter是最近新兴的一个开发框架。说Flutter是最流行的框架呢，是没有任何问题的，但它并不是一个最近才出现的开发框架。为什么这么说呢？
2014.10 - Flutter的前身Sky在GitHub上开源
2015.10 - 经过一年的开源，Sky正式改名为Flutter
2017.5 - Google I/O正式向外界公布了Flutter，这个时候Flutter才正式进去大家的视野
2018.6 - 距5月Google I/O 1个月的时间，Flutter1.0预览版
2018.12 - Flutter1.0发布，它的发布将大家对Flutter的学习和研究推到了一个新的起点
2019.2 - Flutter1.2发布主要增加对web的支持
由此可以看出：Flutter正在逐渐的走向成熟和壮大，它的生态圈也在不断的发展，所以现在学习Flutter的时机是非常的好。
Flutter框架原理
Flutter实现跨平台采用了更为彻底的方案。它既没有采用WebView也没有采用JavaScript，而是自己实现了一台UI框架，然后直接系统更底层渲染系统上画UI。所以它采用的开发语言不是JS，而Dart（Dart是面向对象的、类定义的、单继承的语言。它的语法类似C语言，可以转译为JavaScript，支持接口(interfaces)、混入(mixins)、抽象类(abstract classes)、具体化泛型(reified generics)、可选类型(optional typing)和sound type syste）。据称Dart语言可以编译成原生代码，直接跟原生通信。
Flutter将UI组件和渲染器从平台移动到应用程序中，这使得它们可以自定义和可扩展。Flutter唯一要求系统提供的是canvas，以便定制的UI组件可以出现在设备的屏幕上，以及访问事件（触摸，定时器等）和服务（位置、相机等）。这是Flutter可以做到跨平台而且高效的关键。另外Flutter学习了RN的UI编程方式，引入了状态机，更新UI时只更新最小改变区域。
系统的UI框架可以取代，但是系统提供的一些服务是无法取代的。Flutter在跟系统service通信方式，采用的是一种类似插件式的方式，或者有点像远程过程调用RPC方式。这种方式据说也要比RN的桥接方式高效。
Flutter为什么要采用Dart语言了？
Dart能成为Flutter不可或缺的一部分，根本原因还是因为其具有以下特性：
1）Dart是AOT（Ahead Of Time）编译的，编译成快速、可预测的本地代码，使Flutter几乎都可以使用Dart编写。这不仅使Flutter变得更快，而且几乎所有的东西（包括所有的小部件）都可以定制；
2）Dart也可以JIT（Just In Time）编译，开发周期异常快，工作流颠覆常规（包括Flutter流行的亚秒级有状态热重载）；
3）Dart可以更轻松地创建以60fps运行的流畅动画和转场。Dart可以在没有锁的情况下进行对象分配和垃圾回收。就像JavaScript一样，Dart避免了抢占式调度和共享内存（因而也不需要锁）。由于Flutter应用程序被编译为本地代码，因此它们不需要在领域之间建立缓慢的桥梁（例如，JavaScript到本地代码）。它的启动速度也快得多；
4）Dart使Flutter不需要单独的声明式布局语言，如JSX或XML，或单独的可视化界面构建器，因为Dart的声明式编程布局易于阅读和可视化。所有的布局使用一种语言，聚集在一处，Flutter很容易提供高级工具，使布局更简单；
5）开发人员发现Dart特别容易学习，因为它具有静态和动态语言用户都熟悉的特性。
Flutter 和 React Native 底层架构的比较
React-Native、Weex 核心是通过 Javascript 开发，执行时需要 Javascript 解释器，UI 是通过原生控件渲染。Flutter 与用于构建移动应用程序的其它大多数框架不同，因为 Flutter 既不使用 WebView，也不使用操作系统的原生控件。 相反，Flutter 使用自己的高性能渲染引擎来绘 制 widget。Flutter 使用 C、C ++、Dart 和 Skia（2D渲染引擎）构建。
Skia 是一个 2D的绘图引擎库，其前身是一个向量绘图软件，Chrome 和 Android 均采用 Skia 作为绘图引擎。Android 自带了 Skia，所以 Flutter Android SDK要比 iOS SDK小很多。
在 ReactNative 中，引入了虚拟 DOM 来减少DOM的回流和重绘，系统将虚拟 DOM 与真正的 DOM 进行比较，生成一组最小的更改，然后执行这些更改，以更新真正的 DOM。最后，平台重新绘制真实的 DOM 到画布中。
React Native 是移动开发的一大进步，并且是 Flutter 的灵感来源，但 Flutter 更进一步。 在 Flutter 中，UI 组件和渲染器已经从平台中集成到用户的应用程序中。没有系统 UI 组件可以操作，所以原来虚拟控件树的地方现在是真实的控件树。Flutter 渲染 UI 控件树并将其绘制到平台画布上。
UI 一致性
Flutter 因为是自己做的渲染，因此在iOS和Android的效果基本完全一致。 React Native存在将RN控件转换为对应平台原生控件的过程，存在一定的差异（如之前在调研里提到过的Button在iOS和Android下面显示效果不一样）。动态化技术
Flutter使用的Dart语言，支持AOT和JIT两种模式，在Dev时候，通过JIT可以实现热重载，开发者可以即时的看到代码修改的效果。而在Release Build的时候，通过AOT事先编译，来最大化的优化性能。因此目前Flutter不支持代码的热更新。 ReactNative 的代码通过加载 JSBundle.js执行，JSBundle.js可以保存在本地，也可以通过远程加载。目前有很多RN的热更新方案供选择。App体积
Flutter iOS空项目 30M左右，Android空项目 7M左右。 （iOS需要额外集成Skia） React Native iOS空项目 3M左右，Android20M左右。（Android会加入OKHttp导致体积增大） Flutter 部分的底层功能在 Android 系统上已经有实现，因此 Android 上适配要好（RN在 Android 上有可能遇到兼容性问题）。Flutter的优势
运行效率上，Flutter和ReactNative都可以达到理论上的60帧的刷新率，来实现「Native般的流畅体验」，Flutter是全Native在执行，基于底层代码(Android 上为 C++ with NDK,iOS 上为 C++ with LLVM)，而ReactNative是Native控件 + JavaScript代码，实际性能上，Flutter应该优于ReactNative，据官方文档，Flutter可以在支持的设备上达到120FPS，而ReactNative的文档上，只提到了可以达到60FPS（RN是否支持120FPS未深入调研，文档上 RN 可以通过优化 diff 的方法提升渲染效率）。
兼容性上，Flutter 提供的 widget 都是基于 skia来实现和精心定制的，与具体平台没关，所以能保持很高的跨 os 跨 os version 的兼容性。
Flutter 从更基础的层去抹平平台差异，站在了更宽广、更可控的一个基础平台上去演变和发展。
Flutter 官方提供了大部分 Material Design 控件的实现（甚至比 Android Design Support 实现的更多）。
说了这么多，那么学习Flutter都需要掌握哪些知识呢？接下来给大家分享一个Flutter技术栈供大家参考
学习Flutter需要掌握的技术栈？
该如何学习Flutter？
如何系统化的学习Flutter，可以从以下方面入手：Flutter入门：快速上手Flutter开发
Dart基础知识 什么是声明式UI Flutter入门基础知识 项目结构、资源、依赖和本地化 认识视图(Views) 布局与列表 状态管理 路由与导航 线程和异步UI 手势检测及触摸事件处理 主题和文字处理 表单输入与富文本 调用硬件、第三方服务以及平台交互、通知Flutter入门：Flutter必备基础入门
学习构建Flutter实例项目 图片控件开发详解 动画Animation开发指南 Flutter调试技巧 Flutter进阶提升：网络编程与数据存储技术 基于Http实现网络操作 异步：Future与FutureBuilder实用技巧 JSON解析与复杂模型转换实用技巧 基于shared_preferences的本地存储操作Flutter进阶提升：玩转列表组件
基于ListView实现水平和垂直方式滚动的列表 基于ExpansionTile实现可展开的列表 基于GridView实现网格列表 高级功能列表下拉刷新与上拉加载更多功能实现Flutter进阶提升：Flutter，Native混合开发
Flutter混合开发流程与创建Flutter module Flutter Android混合开发实战-集成与调用 Flutter Android混合开发实战-调试与发布 Flutter iOS混合开发实战-集成与调用 Flutter iOS混合开发实战-调试与发布 Flutter通信机制&Darr端实现 Flutter与Native通信-Android端实现 Flutter与Native通信-Android实战 Flutter与Native通信-iOS端实现 Flutter与Native通信-iOS端实战Flutter进阶实战：智能AI语音搜索模块实现
Native SDK集成流程 百度AI语音SDK引入 语音搜索功能实现Flutter进阶拓展：开发包和插件开发指南
Flutter插件开发流程与步骤（LoadingContainer） Flutte插件开发与发布Flutter进阶拓展：全面屏、折叠屏适配与兼容问题
Flutter 全屏幕、折叠屏适配指南 Flutter 适配iOS、Android全面屏Flutter进阶拓展：打包发布Flutter应用
Flutter项目优化 打包发布Flutter Android应用 打包发布Flutter iOS应用Flutter进阶拓展：Flutter升级与适配指南
Flutter升级与适配指南学习资料
掘金社区 awesome-flutter-cn Flutter专栏正文结束
图片
Ctrl + Enter