邂逅Flutter开发

首先，有问题查文档，英文文档地址是flutter.dev，中文文档地址是flutter.cn。

适合人员

• 课程适合的人群：具备半年以上Android或者iOS或者RN等开发经验或者一年以上前端开发经验；
• 课程的名称：Flutter从入门到实战（假设所有的同学没有任何的Flutter经验）；
• 每个人基础不一样，知识储备不一样，相互尊重，共同进步；

学习路线和课程大纲

Flutter是什么

对上面的话进行总结：

• Flutter是一个UI SDK（Software Development Kit）；
• 可以进行移动端（iOS、Android），Web端（Beta），桌面（technical preview），跨平台解决方案；
• 移动端目前已经很多公司在用，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 是开放的，它是一个完全开源的项目。

跨平台历史

我们知道，任何一种技术的出现都是为了解决之前技术的痛点，其实在长久以来一直在寻找一种跨平台的解决方案。跨平台解决方案经历过怎样的历史了？（移动端）

1. 平台独立开发

完整的软件系统需要移动端：iOS端和Android端，对于公司来说成本其实是非常高的。

• iOS端使用OC、Swift来进行开发，大部分iOS程序员目前这两个都需要掌握；（iOS开发工程师）
• Android端使用Java、Kotlin来进行开发，使用Java开发Android会更多一些；（Android开发工程师）

在很长一段时间内，大家都在需求一种移动端的跨平台解决方案，希望可以通过一套代码开发出可以同时运行在iOS和Android两个系统上的应用程序。

2. 跨平台解决方案一：webview

基于 JavaScript 和 WebView的跨平台。

• 最早出现的跨平台框架是基于 JavaScript 和 WebView，代表框架有PhoneGap，Apache Cordova，Ionic 等等。
• 主要是通过HTML来构建自己的界面，再将其显示在各个平台的WebView中。
• 但是它默认是不能调用本地的一些服务的（比如相机、蓝牙等），所以需要通过JavaScript进行桥接调用Native 的一些代码来完成某些功能。
• 但是，它本身的体验、性能都并不理想，而且开发过程中的坑非常多。

3. 跨平台解决方案二：React 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进行开发。

4. 跨平台解决方案三：Flutter

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

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

• Flutter利用Skia绘图引擎，直接通过CPU、GPU进行绘制，不需要依赖任何原生的控件。
• Android操作系统中，我们编写的原生控件实际上也是依赖于Skia进行绘制，所以flutter在某些Android操作系统上甚至还要高于原生（因为原生Android中的Skia必须随着操作系统进行更新，而Flutter SDK中总是保持最新的）。
• 而类似于RN的框架，必须通过某些桥接的方式先转成原生进行调用，之后再进行渲染。

Flutter绘制原理图

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

1. GPU将信号同步到 UI 线程
2. UI 线程用Dart来构建图层树
3. 图层树在GPU 线程进行合成
4. 合成后的视图数据提供给Skia 引擎
5. 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绘制原理图

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

1. GPU将信号同步到 UI 线程
2. UI 线程用Dart来构建图层树
3. 图层树在GPU 线程进行合成
4. 合成后的视图数据提供给Skia 引擎
5. Skia 引擎通过OpenGL 或者 Vulkan将显示内容提供给GPU

这也是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 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 平台上的渲染效果是完全一致的。

大前端学不动系列

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

客户端开发者：从Android到iOS，或者从iOS到Android，到RN，甚至现在越来越多的客户端开发者接触前端相关知识（Vue、React、Angular、小程序）。
前端开发者：从jQuery到AngularJS，到三大框架并行：Vue、React、Angular，还有小程序，甚至现在也要接触客户端开发（比如RN、Flutter），包括TypeScript、Webpack、uniapp、Nodejs。

大前端开发就是，不像服务器一样可能几年甚至几十年还是那一套的东西，新技术会层出不穷。但是每一样技术的出现都会让惊喜，因为他必然是解决了之前技术的某一个痛点的，所以我们要学会拥抱这种变化。并且很多知识在学习的过程中，你会发现他们都是相同的，并不是说都要从头再来，最重要的是建立属于自己的知识体系。

Flutter如何学？
Dart语言学习 -> Flutter实战技术学习 -> Flutter底层技术、源码阅读

环境搭建整个流程

操作系统选择

学习阶段：Windows或者macOS（苹果操作系统）都是可以的。
开发阶段：一般需要使用macOS，因为我们需要针对iOS进行调试，通常方便起见还是选择macOS。

如果以后做Flutter开发，公司必然会给你配备macOS的。Flutter可以在Windows上学习，也可以在macOS上，因为我之后的课程要进行Android和iOS的调试，所以我当前使用的环境是macOS。这里我再次强调，学习阶段使用Windows是没有任何问题，我之前也在Windows上写过很多Flutter的东西。在安装的过程中，我也会说到很多Windows安装的注意事项，大家按照步骤一步步完成即可。

安装Flutter SDK

Flutter SDK下载地址：https://flutter.dev/docs/development/tools/sdk/releases 选择自己的操作系统和最新稳定的版本（Stable版本）。

下载之后是一个压缩包，将压缩包解压，会有一个flutter文件夹，我们的flutter的dart就在这个文件夹下，将flutter文件夹拖到如下以为电脑名字命名的文件夹下：

打开上面的.bash_profile文件，进行环境变量配置：

MacOS环境变量配置：

# Flutter
# Flutter 配置镜像
export PUB_HOSTED_URL=https://pub.flutter-io.cn
export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn
# Flutter 配置环境变量
export FLUTTER_HOME=/Users/xujincheng/flutter
export PATH=$PATH:$FLUTTER_HOME/bin
export PATH=$PATH:$FLUTTER_HOME/bin/cache/dart-sdk/bin
# Flutter END

如果bash_profile文件没生效，可以再执行命令：

source ~/.bash_profile

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用户还是需要修改环境变量：

点击计算机图标 - 属性 - 高级系统设置 - 高级 - 环境变量
新建 变量 PUB_HOSTED_URL，其值为https://pub.flutter-io.cn
新建 变量 FLUTTER_STORAGE_BASE_URL，其值为https://storage.flutter-io.cn

配置iOS环境

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

如何安装Xcode呢？
第一种方式：直接在App Store上搜索Xcode，找到安装即可。
第二种方式：安装自己想要的Xcode的版本，需要手动去下载https://developer.apple.com/download/more

选择自己的iOS模拟器：

配置Android环境

如果想为Flutter配置Android开发环境，需要在我们的电脑上安装一个Android Studio，Android 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是最近非常非常流行的开发工具，并且非常好用！VSCode最近已经有取代WebStorm作为前端首选开发工具的趋势了。VSCode其实并不能称之为是一个IDE，它只是一个编辑器而已，所以它非常的轻量级，不会占用你非常大的内存消耗，而且启动速度等都非常快，对于电脑配置不是特别高的同学，肯定是一个非常好的选择。并且你可以在VSCode上安装各种各样的插件来满足自己的开发需求。

VSCode的缺点：
很多Android Studio包括的方便操作没有，比如点击启动、热更新点击等；而且在某些情况下会出现一些问题；比如之前我在使用的过程中，有时候热更新不及时常常看不到效果，必须重启；比如某些情况下，没有代码提示不够灵敏；

Android Studio

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

Android Studio的优点：
集成开发环境（IDE）不用多说，你需要的功能基本都有，而且上面说的VSCode存在的问题，在Android Studio中基本不会出现。

Android Studio的缺点：一个字：重，无论是IDE本身，还是使用Android Studio启动项目，都会相对慢一些，占据的计算机资源也很多，所以电脑配置较低是会出现卡顿。

使用须知：使用Android Studio开发Flutter我们需要安装两个插件：Flutter和Dart。
课堂的选择：Dart学习过程中使用VSCode，Flutter学习使用Android Studio。

创建Flutter项目

有两种方式创建Flutter应用：通过终端和通过编辑器，这里我先选择通过终端：（Windows和macOS都是一样的命令）

创建项目之前我们先看看flutter和dart环境有没有ok，终端执行如下命令：

// 查看flutter版本
flutter --version

// 查看dart版本
dart --version

// flutter医生检查
flutter doctor

结果如下：

ColadeMBP:~ xujincheng$ flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.3.9, on Mac OS X 10.15.7 19H1417 darwin-x64,
    locale zh-Hans-CN)
[✗] Android toolchain - develop for Android devices
    ✗ cmdline-tools component is missing
      Run `path/to/sdkmanager --install "cmdline-tools;latest"`
      See https://developer.android.com/studio/command-line for more details.
[!] Xcode - develop for iOS and macOS (Xcode 12.1)
    ✗ Flutter requires Xcode 13 or higher.
      Download the latest version or update via the Mac App Store.
    ! CocoaPods 1.10.1 out of date (1.11.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.
[✓] Chrome - develop for the web
[!] Android Studio (version 2022.1)
    ✗ Unable to find bundled Java version.
[✓] VS Code (version 1.66.0)
[✓] Connected device (2 available)
[✓] HTTP Host Availability

! Doctor found issues in 3 categories.

如果Android Studio和Flutter没问题，基本就没问题，其他问题自己看。

cd到桌面，创建flutter项目：

flutter create helloflutter

将代码运行到模拟器中：

flutter run –d 模拟器id

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

除了使用命令行，更推荐直接使用Android Studio打开已存在的flutter项目，然后选择模拟器，点击运行就可以了。

运行效果：