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选择运行到哪里一个模拟器上