了解Flutter是什么、它的发展历史、特性以及未来。掌握 Flutter 的基本开发，包括：环境搭建、工程类型、HotReload、Dart 语法以及各种 Widget 的使用

一、Flutter是什么？

Flutter 是 Google 开源的新一代跨平台 UI 框架。不同于其他我们熟知的移动端跨平台方案，Flutter 更像游戏引擎，因为 Flutter 有自己的渲染引擎：我们在 Flutter 上
写了界面后，Flutter 会在自己的 canvas 上渲染。移动端不负责绘制。

二、Flutter的特性

1、跨平台

Flutter 是 Google 新一代的跨平台 UI 框架，除了默认支持的 Android 和 iOS，经过扩展后还支持：

  • PC 端：Windows、Linux、MacOS

  • WEB端：WEB 端已经发布了技术预览版。

    2、高性能

  • 界面可以达到 60 FPS，渲染效率和用户体验堪比 Native。

  • Flutter 应用在 Release 下会编译成 Nativie ARM code，使得跨平台的代码运行效率很高。

  • Native 和 Flutter 之间是通过 JNI 桥接的，也使得 Nativie 和 Flutter 之间交互的损耗很低、

    3、丰富的UI组件

  • Flutter 内置众多精美的 Material Design（Android风格）和 Cupertino（iOS风格）的小部件，而且 UI 样式高度还原 Native 的样式，
    可以让我们直接使用，而且这些组件都很方便组合，还有丰富的动画库。

    4、学习成本低

  • Flutter 的学习成本很低，屏蔽了底层的很多实现，可以很快的入手。这也带来一个问题，就是没有办法深入 Flutter 的底层。这也是本教程
    的目的。除了 Flutter 的使用，也会深入分析 Flutter 的底层实现。

    5、开发效率高

  • Flutter 拥有丰富的UI部件，而且支持 Hot Reload，同时Flutter 使用 Dart 语言开发，Dart 具备很多新的语言特性，可以使得开发速度很快。

    6、和任何平台的交互都很方便

  • 由于 Flutter 的架构设计，使得 Flutter 可以在任何平台扩展，也可以和平台很方便的交互，从而可以让 Flutter 使用平台的功能。

    7、Write once，Run everyWhere

  • 只要写一份代码，就可以构建 Android 和 iOS 两个平台的App，体验能达到和原生应用一致，真正做到 Write once，Run everywhere。

    三、移动端跨平台开发方案演进

    1、WebView 流

    第一种方案，称之为 WebView 流，因为WebView作为一个现实Web页面的容器，它本身是跨平台的，所以利用WebView跨平台属性的技术方案就称之为WebView流，WebView流的发展也经历了如下过程：

  • 纯H5，最开始的时候，是在App里嵌入一个WebView，负责显示H5、可能是独立的一个页面，也有可能是Nativie页面的一部分。但在这个阶段，一方面
    webview的性能没有 Native 的好，另一方面，H5 页面和Native 的页面几乎是没有交互的，使得 Native 的开发和 H5的开发是彼此独立的。Native 无法使用H5 的特性，H5 也无法使用 Native 的特性，这些都限制了WebView 的使用场景。

  • Hybrid，为了打破 Native 和 H5 割裂的情况，就出现了 JSBridge，JSBridge 是Native 代码与 JavaScript 代码的通信桥梁。JSBridge 的出现，使得 H5 可以使用 Native 的能力，Native 也能使用 H5 的能力，使 Native 和 H5 能完美的融合在一起，出现了一系列的 Hybrid 开发框架。比如 PhoneGap 等，这些
    架构具有开发成本低，简单、跨平台的优点，但这些 Hybrid 框架是基于 WebView 实现的。所以无法避免 WebView 本身的劣势：内存占用多，网页加载速度慢，渲染慢，javaScript 执行慢等。因为这些性能问题，所以大多数人在开发过程中，主要页面都是使用 Native 开发，只有少数页面才采用 Hybrid 的框架。

  • 基于Hybrid的优化改进方案，针对具体的性能问题，开始有了不同的优化方案，比如，网页加载速度慢，采用离线包的方案，网页渲染效率低。则优化dom树等。虽然性能上有很大提升，但是始终绕不过两大问题，第一个是，WebView 的渲染性能比 Native 差，第二个就 是，JavaScript 是解释执行语言，运行效率也比 Native 差。 所以无论怎么优化，使用 Hybrid 开发的⻚面的性能肯定不会 比 Native 的好。所以，如果是你，你会在自己的 APP 中全部 采用 Hybrid 吗?答案是肯定不会。

    2、ReactNative 流

    第二种是 ReactNative 流，ReactNative 流是从 WebView 流发展而来，典型的方案是 React Native 和 Weex 。这两种方案，都抛弃了WebView 这个累赘，但是仍然使用 H5 的技术栈开发， 使用 JavaScript 开发，那是如何做到跨平台的呢：

  • 跨平台的布局引擎，ReactNative 内置了跨平台的布局引擎，可以将 H5 的布局转化为Native 的布局。

  • 使用 Native 原生组件渲染，将 ReactView 组件使用 Native 原生组件渲染、

  • JavaScript 引擎，ReactNative 内置 JavaScript 的引擎，从而可以在不同平台上运行JavaScript 代码。ReactNative 流采用 JavaScript + JavaScript 引擎+ Native 的技术 方案，利用了 JavaScript 的跨平台特性实现了移动端的跨平台方案。

    3、Flutter

    现在跨平台方案有了新的发展方向，就是Flutter。Flutter 开辟了一种全新的思路，利用 Dart 语言，同时支持 JIT 和 AOT 两种编译方式的特性。在不同场景下使用不同的编译方式，达到最高效的开发和运行体验。

  • 在 Debug 模式下，为了保证开发体验，采用 JIT 这种动态编译的方式，将代码运行在 Dart 虚拟机上，使得我们编写的代码可以实时实现更新，实现 HotReload 的特性，提升开发体验。

  • 在 Release 模式下，又需要保证运行速度和渲染流程度，则会采用 AOT 的编译方式，将代码直接编译成各自平台的 Native 代码，以此提高使用体验。
  • 在 UI 渲染方面，Flutter 的渲染不依赖于平台，基于自带的 Skia 渲染引擎，构建了一套完整的跨平台 UI 渲染框架，在和平台交互方面，Flutter 提供了 Platform Channel 的通道，可以方便的和 Native 交互，可以说是 Google 融合多种技术才有的产物，也是跨平台方案发展的必然产物。

除此之外，一个好的技术，需要完善的文档去让人学习，有专业的人维护，让技术不断发展。在这方面，Flutter既有完善的文档，也有 Google 团队的维护，因此 Flutter 肯定会有更好的发展。