学习Flutter从这开始(邂逅Flutter)

一. 认识Flutter

1.1. 什么是Flutter

先看看官方的解释：

Flutter is Google’s UI toolkit for building beautiful, natively compiled applications for mobile^[1], web^[2], and desktop^[3] from a single codebase.

简单翻译一下：

Flutter是谷歌主导研发的一个UI工具包，能够利用它，使用很是简洁的代码开发出漂亮的、原生的应用程序，不管是在移动端、Web端仍是桌面端。

嗯，加入我的理解：

Flutter就是一个UI开发工具包，能够开发各个平台，可是目前最活跃的地方依然 移动平台，虽然他也支持Web、桌面，甚至也将是Google Fuchsia^[4]下开发应用的主要工具。

可是如今，它只是活跃于移动端。

那么，目前移动平台主要有哪些呢？没错，iOS、Android！

因而，咱们能够简单概述一下Flutter：

Flutter目前被应用最普遍的就是做为iOS、Android跨平台解决方案，并且能够说是目前最优秀的跨平台解决方案。

它不只仅性能优越，并且开发很是高效！

为何须要这样一种跨平台解决方案呢？

待会儿我会讲到移动端开发的历史（各端独立开发到跨平台开发的出现）以及在整个历史进程中出现的各个痛点，直到Flutter的出现。

1.2. Flutter的特色

Google公司在国内作过不少宣讲，其中屡次提到Flutter的几个特色：美观、快速、高效、开放。

这部分了解便可，后面学习过程当中，慢慢体会。

美观

使用Flutter内置美丽的Material Design和Cupertinowidget（什么是widget，不着急）、丰富的motion API、平滑而天然的滑动效果和平台感知，为您的用户带来全新体验。

固然，在咱们真正学会使用它开发以前，这些东西不能深入的体会，后面你们会慢慢体会到的

快速

后面有专门讲解为何性能这么高，先作一个了解便可

Flutter 的 UI 渲染性能很好。在生产环境下，Flutter 将代码编译成机器码执行，并充分利用 GPU 的图形加速能力，所以使用 Flutter 开发的移动应用即便在低配手机上也能实现每秒 60 帧的 UI 渲染速度。

Flutter 引擎使用 C++ 编写，包括高效的 Skia 2D 渲染引擎，Dart 运行时和文本渲染库。

这个引擎使得 Flutter 框架能够自由、灵活、高效地绘制 UI 组件。而应用开发者则能够用 Flutter 框架来轻松实现各类设计语言和动画效果。

高效

对开发者来讲，使用 Flutter 开发应用十分高效。

Flutter 广受好评的 Hot Reload (热重载) 功能能够在 1 秒内实现代码到 UI 的更新，使得开发操做周期被大幅缩短。

另外，热重载可以在执行的时候保留应用的当前状态 (即 Stateful)，好比您可能在修改一个导航结构里的子页面，保留状态的热重载可让您不须要从新从起始页一路点击回到这个子页面，而是在代码修改完成后即刻看到结果。

开放

Flutter 是开放的，它是一个彻底开源的项目。全球的开发者均可以避免费使用和拓展 Flutter 的源代码，并为 Flutter 的生态和文档做贡献。咱们已经看到许多中国开发者（好比闲鱼开发团队）活跃在社区中，并为 Flutter 作出了不少贡献。

二. 跨平台历史

2.1. 平台独立开发

目前移动端有两大系统：iOS和Android

不少公司为了扩散本身的产品，都须要在两大系统上跑本身的应用程序App

• 意味着Android系统上须要一个Android版本的App

• 意味着iOS系统上须要一个iOS版本的App

• 可是他们的开发方式彻底不一样！！！

iOS系统

• 最初，若是但愿在其上开发应用程序，所采用的语言是Objective-C（没用过的人会被他的语法吓到）。

• 2014年，苹果在WWDC大会上发布了新的语言Swift，Swift更加现代化，也更加接近于其余语言，被认为是Objective-C的替代品（可是到如今都尚未替代，两个都在用）。

• 也就是如今开发iOS系统上的应用须要掌握两门语言：Objective-C和Swift

Android系统

• 最初，若是但愿在其上开发应用程序，所采用的语言是Java

• 2011年JetBrains推出Kotlin项目，在Google I/O2017中，Google宣布在Android上为Kotlin提供最佳支持

• 也就是如今开发Android系统上的应用须要掌握两门语言：Java和Kotlin

一般在一个公司，很难让一我的同时去胜任iOS开发和Android开发两个岗位，因此在一家公司可能就须要同时有iOS组和Android组分别针对不一样的系统进行开发。

可是，对于一家小公司来讲，这样的成本是很是高的。

在很长一段时间内，你们都在需求一种移动端的跨平台解决方案，但愿能够经过一套代码开发出能够同时运行在iOS和Android两个系统上的应用程序

2.2. 跨平台解决方案

基于 JavaScript 和 WebView的跨平台

最先出现的跨平台框架是基于 JavaScript 和 WebView，表明框架有PhoneGap，Apache Cordova，Ionic 等等。

主要是经过HTML来构建本身的界面，再将其显示在各个平台的WebView中。

可是它默认是不能调用本地的一些服务的（好比相机、蓝牙等），因此须要经过JavaScript进行桥接调用Native的一些代码来完成某些功能。

可是，它自己的体验并不理想，并且开发过程当中的坑很是多。

备受欢迎的React Native

在寻求最佳跨平台解决方案的过程当中，无疑React Native 是以前最优秀的一个。

React Native (简称RN)是Facebook于2015年4月开源的跨平台移动应用开发框架，是Facebook早先开源的JS框架 React 在原生移动应用平台的衍生产物，目前支持iOS和安卓两大平台。

RN使用JavaScript语言，相似于HTML的JSX，以及CSS来开发移动应用，所以熟悉Web前端开发的技术人员只需不多的学习就能够进入移动应用开发领域。

而且在保留基本渲染能力的基础上，用原生自带的 UI 组件实现代替了核心的渲染引擎，从而保证了良好的渲染性能。

可是，因为RN的本质是经过JavaScript VM调用远程接口，通讯相对比较低效，并且框架自己不负责渲染，而是是间接经过原生进行渲染的。

还有一个就是在进行iOS和Android适配的过程当中，还要求开发者对两大系统自己有所熟悉才行。

所在在RN上作出很是多贡献的Airbnb以前就宣布放弃RN，而转向Native进行开发。

多是终极的解决方案: Flutter

从Flutter出现到如今，我我的就一直很是看好，由于它可能才是咱们好久以来所期待的跨平台的终极解决方案。

咱们直接看下面这幅图来对比flutter - native - rn的区别

• Flutter利用Skia绘图引擎，直接经过CPU、GPU进行绘制，不须要依赖任何原生的控件（后面有原理讲解）

• Android操做系统中，咱们编写的原生控件实际上也是依赖于Skia进行绘制，因此flutter在某些Android操做系统上甚至还要高于原生（由于原生Android中的Skia必须随着操做系统进行更新，而Flutter SDK中老是保持最新的）

• 而相似于RN的框架，必须经过某些桥接的方式先转成原生进行调用，以后再进行渲染。

具体Flutter如何实现接近于原生的高性能的，下一个章节咱们具体分析。

三. Flutter绘制原理

这个章节设计到一些图形绘制的原理，对于某些没有基础的同窗可能会有一些困难，这个没有关系，并不影响后续的学习。

3.1. Flutter渲染本质

问题：一个图像究竟是如何显示到屏幕上的呢？

首先，你须要知道，咱们在屏幕上能够看到的全部内容都是计算机绘制出来的图像，不管是视频仍是GIF图片，仍是操做系统给咱们看到的图形化界面中的画面，都是图像。

好比下面的一个GIF图片

咱们将它分解出来，就会发现它是不少张图片连续播放所看到的画面

可是咱们为何能看到相似于动画的效果呢？

这是由于它播放的速度很是快，研究代表：

• 当图片连续播放的频率超过16帧（16张图片），人眼就会感受很是流畅，当少于16帧时，会感受到卡顿

• 因此咱们平时看到的电影，一般都是24帧或者30帧的（李安以前拍摄120帧的电影，目的就是让图片间隔更小，画面更加的流畅）

咱们说回到电脑、手机屏幕的显示

事实上显示器就是以固定的频率显示图像的，好比 iPhone的 60Hz、iPad Pro的 120Hz。

一帧图像绘制完毕后准备绘制下一帧时，显示器会发出一个垂直同步信号（VSync），因此 60Hz的屏幕就会一秒内发出 60次这样的信号。

在计算机系统中，CPU、GPU和显示器以一种特定的方式协做：

• CPU将计算好的显示内容提交给 GPU；

• GPU渲染后放入帧缓冲区；

• 视频控制器按照 VSync信号从帧缓冲区取帧数据传递给显示器显示；

固然，Android、iOS 的 UI 渲染过程是如此，Flutter 也是如此，在整个 Flutter 架构中，Flutter 只关心向 GPU 提供显示数据，并不关心显示器、视频控制器以及 GPU 是如何工做的。

• GPU将信号同步到 UI 线程

• UI 线程用Dart来构建图层树

• 图层树在GPU 线程进行合成

• 合成后的视图数据提供给Skia 引擎

• Skia 引擎经过OpenGL 或者 Vulkan将显示内容提供给GPU

这也是flutter区别于React Native的本质区别：

• React Native 之类的框架，只是经过 JavaScript 虚拟机扩展调用系统组件，由 Android 和 iOS 系统进行组件的渲染；

• Flutter 是本身完成了组件渲染的闭环。

3.2. Dart语言优点

Flutter为何要选择Dart做为开发语言？

有一种半开玩笑的说法： 由于Dart团队就在Flutter团队的旁边，沟通起来很是方便（是玩笑，也是事实，dart语言自己针对Flutter进行过不少次的优化）

早期的 Flutter 团队评估了十多种语言，并选择了 Dart，由于它符合他们构建用户界面的方式。

其实针对于前端开发者来讲，选择JavaScript看起来更合适，由于你们的入门成本会更低，会有更多人选择学习和使用Flutter。

可是Flutter团队从一开始就决定，不将就！！！

• Dart 是 AOT（Ahead Of Time）编译的，编译成快速、可预测的本地代码，使 Flutter 几乎均可以使用 Dart 编写。这不只使 Flutter 变得更快，并且几乎全部的东西（包括全部的小部件）均可以定制。

• Dart 也能够 JIT（Just In Time）编译，开发周期异常快，工做流颠覆常规（包括 Flutter 流行的亚秒级有状态热重载）。

• Dart 能够更轻松地建立以 60fps 运行的流畅动画和转场。Dart 能够在没有锁的状况下进行对象分配和垃圾回收。就像 JavaScript 同样，Dart 避免了抢占式调度和共享内存（于是也不须要锁）。因为 Flutter 应用程序被编译为本地代码，所以它们不须要在领域之间创建缓慢的桥梁（例如，JavaScript 到本地代码）。它的启动速度也快得多。

• Dart 使 Flutter 不须要单独的声明式布局语言，如 JSX 或 XML，或单独的可视化界面构建器，由于 Dart 的声明式编程布局易于阅读和可视化。全部的布局使用一种语言，汇集在一处，Flutter 很容易提供高级工具，使布局更简单。

• 开发人员发现 Dart 特别容易学习，由于它具备静态和动态语言用户都熟悉的特性。

并不是全部这些功能都是 Dart 独有的，但它们的组合却恰到好处，使 Dart 在实现 Flutter 方面独一无二。所以，没有 Dart，很难想象 Flutter 像如今这样强大。

3.3. 渲染引擎skia

想要了解Flutter的本质，必须先了解它的底层图像渲染引擎 Skia，前面提到了 Flutter只关心如何构建视图抽象结构，向 GPU提供视图数据。Skia就是 Flutter向 GPU提供数据的途径。

Skia全名Skia Graphics Library（SGL）是一个由C++编写的开源图形库，能在低端设备如手机上呈现高质量的2D图形，最初由Skia公司开发，后被Google收购，应用于Android、Google Chrome、Chrome OS等等当中。

目前，Skia 已然是 Android 官方的图像渲染引擎了，所以 Flutter Android SDK 无需内嵌 Skia 引擎就能够得到自然的 Skia 支持；

而对于 iOS 平台来讲，因为 Skia 是跨平台的，所以它做为 Flutter iOS 渲染引擎被嵌入到 Flutter 的 iOS SDK 中，替代了 iOS 闭源的 Core Graphics/Core Animation/Core Text，这也正是 Flutter iOS SDK 打包的 App 包体积比 Android 要大一些的缘由。

底层渲染能力统一了，上层开发接口和功能体验也就随即统一了，开发者不再用操心平台相关的渲染特性了。也就是说，Skia 保证了同一套代码调用在 Android 和 iOS 平台上的渲染效果是彻底一致的。

flutter架构

四. 如何学习flutter

4.1. 大前端学不动了

不少人看到Google的flutter框架的时候，第一反应就是：别出新东西了，实在学不动了。

可是做为大前端开发者就是这样，各类折腾：

• 客户端开发者：从Android到iOS，或者从iOS到Android，到RN，甚至如今愈来愈多的客户端开发者接触前端相关知识（Vue、React、Angular、小程序）

• 前端开发者：从jQuery到AngularJS，到三大框架并行：Vue、React、Angular，还有小程序，甚至如今也要接触客户端开发（好比RN、Flutter）

大前端开发就是，不像服务器同样可能几年甚至几十年仍是那一套的东西，新技术会层出不穷。

可是每同样技术的出现都会让惊喜，由于他必然是解决了以前技术的某一个痛点的，因此咱们要学会拥抱这种变化。

而且不少知识在学习的过程当中，你会发现他们都是相同的，并非说都要从头再来，最重要的是创建属于本身的知识体系。

4.2. flutter学得会吗？

不少人对于学习望而却步，主要是基于两点考虑：

• 学习一门全新的语言：dart，也就是你必须从你原来熟悉的语言JavaScript或Swift或Java或其余转向这门全新的语言。

• flutter是全新的跨平台技术，意味着本身须要去学习不少新的内容：开发模式、框架原理、底层原理渲染机制等等

dart语言并不复杂，并且很是现代化

• 首先，全部编程语言都是大同小异，你花两天的时间去练习必定能够快速掌握它。（我我的一直认为一个开发者不可能在整个开发生涯只会一种编程语言，不现实！）

• 其次，dart语言几乎集结了现代语言全部好用的特性，并不复杂（后面咱们慢慢来学）

flutter并无很是多创新的概念：

• flutter从其余框架中借鉴了很是多设计思想：框架原理、底层渲染机制、事件处理方式都大同小异。

• 声明式编程方式、组件化开发也是现代框架都有的特性，好比Vue、React。

后续的学习过程当中，我也会按部就班，带着你们一点点来学习。

参考资料

[1]

mobile:

https://flutter.dev/docs

[2]

web:

https://flutter.dev/web

[3]

desktop:

https://flutter.dev/desktop

[4]

Google Fuchsia:

https://zh.wikipedia.org/wiki/Google_Fuchsia

来源：本文为第三方转载，若有侵权请联系小编删除。