Flutter是什么?

    Flutter是一个UI SDK(Software Development Kit) p可以进行移动端(iOS、Android)，Web端(Beta)，桌面(technical preview)，跨平台解决方案; p 移动端目前已经很多公司在用，Google、阿里、腾讯

    特别是阿里的咸鱼团队，为Flutter做了非常多的贡献;

    Flutter它是有一统大前端的野心的，并且它正在侵蚀iOS、Android这些原生开发;

Flutter的特点

    Google公司在国内做过很多宣讲，其中多次提到Flutter的几个特点:美观、快速、高效、开放。

    美观:

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

    快速:

        Flutter 的 UI 渲染性能很好。在生产环境下，Flutter 将代码编译成机器码执行，并充分利用 GPU 的图形加速能力，因此使用

        Flutter 开发的移动应用即使在低配手机上也能实现每秒 60 帧的 UI 渲染速度。

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

    高效:

        Hot Reload (热重载) ，在前端已经不是什么新鲜的东西，但在移动端之前一直是没有的

    开放:

        Flutter 是开放的，它是一个完全开源的项目。

跨平台历史

    我们知道，任何一种技术的出现都是为了解决之前技术的痛点，其实在长久以来一直在寻找一种跨平台的解决方案 

    跨平台解决方案经历过怎样的历史了?(移动端)

平台独立开发

    完整的软件系统需要移动端:iOS端和Android端

    iOS端使用OC、Swift来进行开发，大部分iOS程序员目前这两个都需要掌握;(iOS开发工程师)

    Android端使用Java、Kotlin来进行开发，使用Java开发Android会更多一些;(Android开发工程师) 

    对于公司来说成本其实是非常高的。

    在很长一段时间内，大家都在需求一种移动端的跨平台解决方案

    希望可以通过一套代码开发出可以同时运行在iOS和Android两个系统上的应用程序

跨平台解决方案一:webview

    基于 JavaScript 和 WebView的跨平台 p最早出现的跨平台框架是基于 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调用原生接口，通信 相对比较低效，而且框架本身不负责渲染，而是是间接通过原生 进行渲染的。

    所在在RN上做出非常多贡献的Airbnb之前就宣布放弃RN， 而转向Native进行开发。

跨平台解决方案三:Flutter

    从Flutter出现到现在，我个人就一直非常看好，因为它可能才是我们很久以来所期待的跨平台的终极解决方案。

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

    Flutter利用Skia绘图引擎，直接通过CPU、GPU进行绘制，不需要依赖任何原生的控件

    Android操作系统中，我们编写的原生控件实际上也是依赖于Skia进行绘制，所以flutter在某些Android操作系统上甚至还要高 于原生(因为原生Android中的Skia必须随着操作系统进行更新，而Flutter SDK中总是保持最新的)

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

Flutter绘制原理图 – 回头再看

直接看这幅图很难理解两个GPU的作用: 

    GPU将信号同步到 UI 线程

    UI 线程用Dart来构建图层树

    图层树在GPU 线程进行合成 p合成后的视图数据提供给Skia 引擎

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

图像是如何显示的?

    首先，你需要知道，我们在屏幕上可以看到的所有内容都是计算机绘制出来的图像

    无论是视频还是GIF图片，还是操作系统给我们看到的图形化界面中的画面，都是图像。

为什么看到的不是一幅幅图像?

    但是我们为什么能看到类似于动画的效果呢?

    这是因为它播放的速度非常快，研究表明:

    当图片连续播放的频率超过16帧(16张图片)，人眼就会感觉非常流畅，当少于16帧时，会感觉到卡顿

    所以我们平时看到的电影，通常都是24帧或者30帧的(李安之前拍摄120帧的电影，目的就是让图片间隔更小，画面更加的流畅)

    但是理解了上面的东西之后，还是不能完全解释图片的整个显示过程，我们还需要区分两个概念:     

        帧率(fps):Frames Per Second

        刷新率:显示器的频率，比如iPhone的 60Hz、iPad Pro的 120Hz。

帧率和刷新率的关系

    CPU/GPU 向 Buffer 中生成图像，屏幕从 Buffer 中取 图像、刷新后显示。

    这是一个典型的生产者——消费者模型。

    理想的情况是帧率和刷新频率相等，每绘制一帧，屏幕显示一帧。

    但是实际往往它们的大小是不同的。

    如果没有锁来控制同步，很容易出现问题。

    例如，当帧率大于刷新频率，当屏幕还没有刷新第 n-1 帧的时候，GPU 已经在生成第 n 帧了

    从上往下开始覆盖第 n-1 帧的数据，当屏幕开始刷新第 n-1 帧的时候，Buffer 中的数据上半部分是第 n 帧数据， 而下半部分是第 n-1 帧的数据

    显示出来的图像就会出现上半部分和下半部分明显偏差 的现象，我们称之为 “tearing”(撕裂)

双重缓存(Double Buffer)

    为了解决单缓存的“tearing”问题，就出现了 双重缓存和 VSync ;

    两个缓存区分别为 Back Buffer 和 Frame Buffer。

    GPU 向 Back Buffer 中写数据，屏幕从 Frame Buffer 中读数据。

    VSync 信号负责调度从 Back Buffer 到 Frame Buffer 的复制操作

    当然底层不是通过复制，而是通过交换内存地址方式，所以可以瞬间完成，效率是非常高的;

工程流程:

    在某个时间点，一个屏幕刷新周期完成，VSync 信号产生，先完成复制操作，然后通知 CPU/GPU 绘制下一帧图像。

    复制操作完成后屏幕开始下一个刷新周期，即将刚复制到 Frame Buffer 的数据显示到屏幕上。

    在这种模型下，只有当 VSync 信号产生时，CPU/GPU 才会开始绘制。

双重缓存存在的问题

    双重缓存的缺陷在于:当 CPU/GPU 绘制一帧的时间过长(比如超过 16ms)时，会产生 Jank(画面停顿，甚至空白)。

    蓝色代表 CPU 生成 Display List;

    绿色代表 GPU 执行 Display List 中的命令从而生成帧; 

    黄色代表生成帧完成，在屏幕上显示;

双缓存模型中:

    CPU生成蓝色B的数据，由GPU进行B的绘制，但是这个过长由于过长，那么第二个A就产生了Jank。

    B在屏幕上显示之后，发出Vsync信号，A开始绘制，但是由于绘制时间过长，第二个B位置又产生了Jank

三重缓存(Triple Buffer) - 了解

如何解决双重缓存的问题了?

    在第二个A展示，Vsync信号发出后，直接绘制C Buffer

    在第一个B展示，Vsync信号发出后，绘制A Buffer

    因为C已经在缓存中，可以直接从缓存中取出C Buff来进行展示，依次类推

    其实本质是在每次Vsync信号发出后，多缓存一个Buffer作为备用 

    现在你可以回头再看Flutter绘制原理图了

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

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

    Flutter 是自己完成了组件渲染的闭环

渲染引擎skia

    Skia就是 Flutter向 GPU提供数据的途径。

    Skia(全称Skia Graphics Library(SGL))是一个由C++编写的开源图形库

    能在低端设备如手机上呈现高质量的2D图形，最初由Skia公司开发，后被 Google收购

    应用于Android、Google Chrome、Chrome OS等等当中。

    目前，Skia 已然是 Android 官方的图像渲染引擎了，因此 Flutter AndroidSDK 无需内嵌 Skia 引擎就可以获得天然的 Skia 支持;

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

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

大前端生存技术

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

    客户端开发者:从Android到iOS，或者从iOS到Android，到RN，甚至现在越来越多的客户端开发者接触前端相关知识(Vue、React、Angular、小程序)

    前端开发者:从jQuery到AngularJS，到三大框架并行:Vue、React、Angular，还有小程序，甚至现在也要接触客户端开发 (比如RN、Flutter)，包括TypeScript、Webpack、uniapp、Nodejs。

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

    但是每一样技术的出现都会让惊喜，因为他必然是解决了之前技术的某一个痛点的，所以我们要学会拥抱这种变化。

    并且很多知识在学习的过程中，你会发现他们都是相同的，并不是说都要从头再来，最重要的是建立属于自己的知识体系。

环境搭建整个流程

操作系统选择

    操作系统的选择?

    学习阶段: Windows或者macOS(苹果操作系统)都是可以的

    开发阶段: 一般需要使用macOS，因为我们需要针对iOS进行调试，通常方便起见还是选择macOS p疑问: 如果以后做Flutter开发没有macOS怎么办? p这个可以完全放心，使用Flutter开发的公司必然会给你配备macOS的(黑苹果或者Mac Mini)

    Flutter可以在Windows上学习，也可以在macOS上，因为我之后的课程要进行Android和iOS的调试，所以我当前使用的环境 是macOS的。

    这里我再次强调，学习阶段使用Windows是没有任何问题，我之前也在Windows上写过很多Flutter的东西!

    在安装的过程中，我也会说到很多Windows安装的注意事项，大家按照步骤一步步完成即可。

安装Flutter SDK

    Flutter SDK下载地址:

    https://flutter.dev/docs/development/tools/sdk/releases p 选择自己的操作系统和最新稳定的版本(Stable版本)

环境变量配置:

    MacOS环境变量配置

        export FLUTTER_HOME=/Applications/flutter

        export PATH=$PATH:$FLUTTER_HOME/bin

        export PATH=$PATH:$FLUTTER_HOME/bin/cache/dart-sdk/bin

    Window环境变量配置

        Windows环境变量修改:点击计算机图标 - 属性 - 高级系统设置 - 高级 - 环境变量 

        找到Path，在其中添加Flutter SDK目录下bin目录以及Dart的目录

配置镜像

    flutter项目会依赖一些东西，在国内下载这些依赖会有一些慢，所以我们可以将它们的安装源换成国内的(也就是设置国内的镜 像)

macOS或者Linux操作系统，依然是编辑~/.bash_profile文件 

        export PUB_HOSTED_URL=https://pub.flutter-io.cn

        export FLUTTER_STORAGE_BASE_URL= https://storage.flutter-io.cn

Windows用户还是需要修改环境变量

    Windows环境变量修改:点击计算机图标 - 属性 - 高级系统设置 - 高级 - 环境变量 

        新建 变量 PUB_HOSTED_URL，其值为https://pub.flutter-io.cn

        新建 变量 FLUTTER_STORAGE_BASE_URL， 其值为https://storage.flutter-io.cn

配置iOS环境

    如果想为Flutter配置iOS开发环境，需要在我们的电脑上安装一个Xcode(此部分Windows电脑忽略) p Xcode是苹果公司的iOS和macOS的IDE，进行过iOS开发的童鞋应该都非常熟悉

如何安装Xcode呢?

    第一种方式:直接在App Store上搜索Xcode，找到安装即可

    第二种方式:安装自己想要的Xcode的版本，需要手动去下载 p https://developer.apple.com/download/more

 选择自己的iOS模拟器

配置Android环境

    如果想为Flutter配置Android开发环境，需要在我们的电脑上安装一个Android Studio pAndroid Studio是基于IntelliJ IDEA的、Google 官方的 Android 应用集成开发环境 (IDE)。

    Android Studio的下载

        官网地址:https://developer.android.com/studio/?utm_source=android-studio

    Android的环境配置

        打开Android Studio，会问我们是否要设置代理，这是因为下载Android SDK等在国内不好下载 

        创建Android模拟器

开发工具选择

    官方推荐两个工具来开发Flutter:Android Studio 和 VSCode

 VSCode的优缺点

    VSCode是最近非常非常流行的开发工具，并且非常好用!VSCode最近已经有取代WebStorm作为前端首选开发工具的趋势了

VSCode的优点:

    VSCode其实并不能称之为是一个IDE，它只是一个编辑器而已。

    所以它非常的轻量级，不会占用你非常大的内存消耗，而且启动速度等都非常快，对于电脑配置不是特别高的同学，肯定是一个非常好的 选择。

    并且你可以在VSCode上安装各种各样的插件来满足自己的开发需求。

VSCode的缺点:

    很多Android Studio包括的方便操作没有，比如点击启动、热更新点击等; p 而且在某些情况下会出现一些问题;

    比如之前我在使用的过程中，有时候热更新不及时常常看不到效果，必须重启; 

    比如某些情况下，没有代码提示不够灵敏;

Android Studio

    对于进行过Android开发或者使用过Webstorm、IDEA、PHPStorm等的同学，使用Android Studio肯定是没有任何问题的 n Android Studio的优点:

    集成开发环境(IDE)不用多说，你需要的功能基本都有

    而且上面说的VSCode存在的问题，在Android Studio中基本不会出现

Android Studio的缺点:

    一个字:重

    无论是IDE本身，还是使用Android Studio启动项目，都会相对慢一些

    占据的计算机资源也很多，所以电脑配置较低是会出现卡顿

使用须知:

    使用Android Studio开发Flutter我们需要安装两个插件:Flutter和Dart

    课堂的选择:

    Dart学习过程中使用VSCode pFlutter学习使用Android Studio

创建Flutter项目

    有两种方式创建Flutter应用:通过终端，通过编辑器。

    这里我先选择通过终端(Windows和macOS都是一样的命令)

          flutter create helloflutter

    将代码运行到模拟器中: flutter run –d 模拟器id

    多个模拟器可以通过id选择运行到哪里一个模拟器上