Flutter入门笔记

Flutter是什么？

Flutter 是 Google 发布的一款完全免费、开源的移动 UI 框架。它是当下非常热门的跨端解决方案。开发者可以通过一套代码库快速高效地构建多平台应用，支持iOS、Android、Web以及桌面等多端开发。

渲染引擎

要想了解Flutter，可以先了解下它的底层图像渲染引擎Skia。

Skia

skia 是用 C++ 开发的性能强悍的 2D 图像绘制引擎。起初它是一款向量绘图软件。2005年被Google收购，因其优秀的绘制表现，被 Google 广泛应用在 Chorme 和 Android 等关键产品上。

目前，Skia是Android的官方渲染引擎，因此 Flutter Android SDK 无需内嵌 Skia 引擎就可以获得渲染支持；然而对于 iOS 平台来说，由于 Skia 是跨平台的，所以它作为 Flutter iOS 渲染引擎被嵌入到 Flutter 的iOS SDK中，替换了 iOS 闭源的 Core Graphics / Core Animation / Core Text，这也是为什么 Flutter iOS SDK 打包的 App 包体积会比 Android 的要大一些的原因。

正是由于 Skia 渲染引擎的存在，使得同一套代码在 iOS 和 Android 两种平台上的渲染效果完全一致，在最大程度上保证一款应用在不同平台、不同设备上的体验一致性。

Flutter for Web 简述

2021年3月 Flutter 2.0发布，增加了对桌面和 Web 应用的支持，最大的特点是基于 Skia 实现的自绘引擎，使用的 Dark 语言，既支持即时编译（JIT，just in time）也支持提前编译（AOT，ahead of time），在开发阶段使用即时编译，以便提高开发时效，在发布阶段使用提前编译，以便提高编译性能。任何一个 Flutter 项目都可以编译成 web 应用，想要更详细了解可以参考 Flutter web 文档，这里不做展开，后面的章节我们再进行描述。

Flutter web 渲染模式

这里简单进行 Flutter web 渲染模式的学习。因为是讲 web，所以这里讨论的是 web 渲染器。在开发过程中，我们可以选择两种不同的渲染器来运行和构建 web 应用：

HTML 渲染器，结合了 HTML元素、CSS、Canvas 和 SVG，该渲染模式的下载文件体积较小；

CanvasKit 渲染器，渲染效果与 Flutter 移动端和桌面端完全一致，性能更好，widget 密度更高，但增加了大约 2M 的下载文件体积；

选择合适的渲染器

为了针对不同的设备特性优化 Flutter web 应用，渲染模式默认设置为自动（auto）选项。比如在移动端浏览器平台上更关心应用的大小，可以设置为 HTML 渲染器模式；而在桌面浏览器上更关心应用性能，可以设置为 CanvasKit 渲染模式。

使用 HTML 渲染器构建应用：

flutter run -d chrome --web-renderer html

该模式下构建的应用，通过审查元素查看控制台元素以及请求可以发现，使用 HTML、CSS、Canvas 和 SVG 元素来渲染，应用的大小相对来说比较小，元素数量多。

使用 CanvasKit 渲染器构建应用：

flutter run -d chrome --web-renderer canvaskit

该模式下元素数量要比 HTML 模式下少很多，但是它需要请求 canvaskit.wasm，该文件大小大约在 7M 左右（网络请求压缩大约是2.8M），默认是存放在 unpkg.com 服务器下，国内加载速度较慢，可以考虑把文件放在国内 cdn 以便提供访问下载速度。

canvankit资源文件

canvankit.wasm文件大小

关于 WebAssembly（wasm）的介绍：https://zhuanlan.zhihu.com/p/74461203

关于旧版本项目

如果是之前不支持 Web 的 Flutter 旧项目，或者之前安装的 Flutter SDK，在这个时候你想要让它生成对 Web 应用的支持，其实也是很简单的。

运行如下的命令来升级新版本的 Flutter SDK：

$ flutter channel stable
$ flutter upgrade

通过 cd 命令进入到之前创建的旧项目的目录下，执行下面的命令，以便生成 web 应用的支持：

$ flutter create .

总结
如果单单是想要构建SPA应用，使用 JS 仍然是第一选择。虽然 Flutter 经过几年的发展，其生态已经有了很多开源的轮子，但是稳定性还是无法超过 JS。Flutter web 通过编译成浏览器可运行的代码，性能上还是存在些不足。是否使用 Flutter web 还是取决于你的实际需求。

安装

由于安装的环境不同，安装步骤均有差异，根据不同的操作系统和环境按照指引进行安装即可，这里推荐几个网站：

专门为中国开发者准备的官方文档
Flutter 官方文档
Flutter 中文网的教程

由于没有更新最新版本的系统，我的操作系统环境是 MacOS Big Sur 11.6。而我使用的编辑器是 VS Code，VS Code 是一个可以运行和调试 Flutter 的轻量级编辑器，如果你有安装该编辑器那么可以直接使用它来进行编码工作。

按照【安装和环境配置】和【编辑工具设定】章节一通操作下来，VS Code 已经可以进行编码调试了。

VS Code编辑器

创建一个 Flutter Demo 应用

这里我是以 VS Code 作为编辑器来进行操作

• 1、我们先打开VS Code；

• 2、然后在菜单工具栏上找到菜单：View > Command Palette...；

• 3、进入到命令面板后我们输入“flutter”，可以在下拉选项中看到：Flutter: New Project，选择这一项即可;

  
  
  新建 Flutter 项目

• 4、输入 Flutter 项目的名称，这里我输入hello_world，按下回车，选择项目存放目录；

• 5、等待项目创建完成后，就看到了一个通过模板实现的 Flutter 应用了。

hello_world 项目

• 6、尝试运行一下 hello_world 项目，注意，可以选择不同的设备来运行（iOS 模拟器、Android 模拟器、macOS桌面应用、Chrome浏览器），这里由于我没有安装Android 模拟器，所以暂时无法演示，看看下面的运行效果截图：

1）找到 VS Code 的蓝色状态栏上，也就是编辑器的右下角，我们可以看到运行设备的切换按钮；
2）点击该按钮后，会弹出可以选择的设备列表，选择需要运行的设备后；
3）在菜单工具栏上选择：Run > Start Debugging，或者直接按下 F5 调试快捷键；
4）等待 App 运行起来即可，可以在 Debug Console 看到打印了信息

运行在 iOS 模拟器上

运行在 Chrome Web上

运行在 MacOS 桌面应用上

---

或许你更享受通过终端输入命令的方式创建项目，那么这里我们也可以通过终端输入命令来创建应用

• 1、打开终端，通过 flutter create 命令来创建一个项目

$ flutter create hello_world

• 2、通过 cd 命令进入到刚刚创建的项目目录：hello_world

$ cd hello_world

• 3、检查一下哪些设备已经连接可以进行调试运行我们的项目

$ flutter devices

检查设备列表

• 4、我准备用 iOS 模拟器来运行 hello_world 项目，但是发现设备列表并没有找到，那么通过输入如下的命令把我们的模拟器运行起来

$ open -a simulator

• 5、模拟器成功运行起来后，输入 flutter run 命令即可

$ flutter run

项目运行在 iOS 模拟器上

如果你是通过终端命令行的方式来运行 flutter 项目，但是并没有安装（启动） iOS 或者 Android 模拟器，这个时候直接运行 flutter run 命令，会提示你选择运行的设备，只需要输入设备序号即可运行你的项目。

选择运行设备

---

Flutter 热重载（hot reload）

简单来说，就是 Flutter 开发支持应用程序在运行状态下重载代码，而不需要重新启动应用程序或者丢失程序的运行状态。

修改一下应用程序的代码，然后按下 ctrl+ s 进行保存操作，发现刚刚的更改马上在模拟器上就有了变化。感觉这个非常有助于提升开发调试代码的效率。