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 进行保存操作，发现刚刚的更改马上在模拟器上就有了变化。感觉这个非常有助于提升开发调试代码的效率。
网友评论