Flutter是什么但校？
Flutter 是 Google 發(fā)布的一款完全免費、開源的移動 UI 框架。它是當下非常熱門的跨端解決方案牙捉。開發(fā)者可以通過一套代碼庫快速高效地構建多平臺應用，支持iOS材失、Android痕鳍、Web以及桌面等多端開發(fā)。
渲染引擎
要想了解Flutter龙巨，可以先了解下它的底層圖像渲染引擎Skia笼呆。
Skia
skia 是用 C++ 開發(fā)的性能強悍的 2D 圖像繪制引擎。起初它是一款向量繪圖軟件旨别。2005年被Google收購诗赌，因其優(yōu)秀的繪制表現(xiàn)，被 Google 廣泛應用在 Chorme 和 Android 等關鍵產(chǎn)品上秸弛。
目前铭若，Skia是Android的官方渲染引擎，因此 Flutter Android SDK 無需內(nèi)嵌 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發(fā)布颓影，增加了對桌面和 Web 應用的支持，最大的特點是基于 Skia 實現(xiàn)的自繪引擎亿汞，使用的 Dark 語言瞭空，既支持即時編譯（JIT，just in time）也支持提前編譯（AOT疗我，ahead of time）咆畏，在開發(fā)階段使用即時編譯，以便提高開發(fā)時效吴裤，在發(fā)布階段使用提前編譯旧找，以便提高編譯性能。任何一個 Flutter 項目都可以編譯成 web 應用麦牺，想要更詳細了解可以參考 Flutter web 文檔钮蛛，這里不做展開鞭缭，后面的章節(jié)我們再進行描述。
Flutter web 渲染模式
這里簡單進行 Flutter web 渲染模式的學習魏颓。因為是講 web岭辣，所以這里討論的是 web 渲染器。在開發(fā)過程中甸饱，我們可以選擇兩種不同的渲染器來運行和構建 web 應用：
HTML 渲染器沦童，結合了 HTML元素、CSS叹话、Canvas 和 SVG偷遗，該渲染模式的下載文件體積較小驼壶；
CanvasKit 渲染器氏豌，渲染效果與 Flutter 移動端和桌面端完全一致，性能更好热凹，widget 密度更高泵喘，但增加了大約 2M 的下載文件體積；
選擇合適的渲染器
為了針對不同的設備特性優(yōu)化 Flutter web 應用碌嘀，渲染模式默認設置為自動（auto）選項涣旨。比如在移動端瀏覽器平臺上更關心應用的大小，可以設置為 HTML 渲染器模式股冗；而在桌面瀏覽器上更關心應用性能霹陡，可以設置為 CanvasKit 渲染模式。
使用 HTML 渲染器構建應用：
flutter run -d chrome --web-renderer html
該模式下構建的應用止状，通過審查元素查看控制臺元素以及請求可以發(fā)現(xiàn)烹棉，使用 HTML、CSS怯疤、Canvas 和 SVG 元素來渲染浆洗，應用的大小相對來說比較小，元素數(shù)量多集峦。
使用 CanvasKit 渲染器構建應用：
flutter run -d chrome --web-renderer canvaskit
該模式下元素數(shù)量要比 HTML 模式下少很多伏社，但是它需要請求 canvaskit.wasm，該文件大小大約在 7M 左右（網(wǎng)絡請求壓縮大約是2.8M）塔淤，默認是存放在 unpkg.com 服務器下摘昌，國內(nèi)加載速度較慢，可以考慮把文件放在國內(nèi) cdn 以便提供訪問下載速度高蜂。
關于 WebAssembly（wasm）的介紹：https://zhuanlan.zhihu.com/p/74461203
關于舊版本項目
如果是之前不支持 Web 的 Flutter 舊項目聪黎，或者之前安裝的 Flutter SDK，在這個時候你想要讓它生成對 Web 應用的支持备恤，其實也是很簡單的稿饰。
運行如下的命令來升級新版本的 Flutter SDK：
$ flutter channel stable
$ flutter upgrade
通過 cd 命令進入到之前創(chuàng)建的舊項目的目錄下锦秒，執(zhí)行下面的命令，以便生成 web 應用的支持：
$ flutter create .
總結
如果單單是想要構建SPA應用喉镰，使用 JS 仍然是第一選擇旅择。雖然 Flutter 經(jīng)過幾年的發(fā)展，其生態(tài)已經(jīng)有了很多開源的輪子侣姆，但是穩(wěn)定性還是無法超過 JS砌左。Flutter web 通過編譯成瀏覽器可運行的代碼，性能上還是存在些不足铺敌。是否使用 Flutter web 還是取決于你的實際需求。
安裝
由于安裝的環(huán)境不同屁擅，安裝步驟均有差異偿凭，根據(jù)不同的操作系統(tǒng)和環(huán)境按照指引進行安裝即可，這里推薦幾個網(wǎng)站：
專門為中國開發(fā)者準備的官方文檔
Flutter 官方文檔
Flutter 中文網(wǎng)的教程
由于沒有更新最新版本的系統(tǒng)派歌，我的操作系統(tǒng)環(huán)境是 MacOS Big Sur 11.6弯囊。而我使用的編輯器是 VS Code，VS Code 是一個可以運行和調(diào)試 Flutter 的輕量級編輯器胶果，如果你有安裝該編輯器那么可以直接使用它來進行編碼工作匾嘱。
按照【安裝和環(huán)境配置】和【編輯工具設定】章節(jié)一通操作下來，VS Code 已經(jīng)可以進行編碼調(diào)試了早抠。
創(chuàng)建一個 Flutter Demo 應用
這里我是以 VS Code 作為編輯器來進行操作
1霎烙、我們先打開VS Code；
2蕊连、然后在菜單工具欄上找到菜單：View > Command Palette...悬垃；
-
3、進入到命令面板后我們輸入“flutter”甘苍，可以在下拉選項中看到：Flutter: New Project尝蠕，選擇這一項即可;
新建 Flutter 項目 4、輸入 Flutter 項目的名稱载庭，這里我輸入hello_world看彼，按下回車，選擇項目存放目錄囚聚；
5靖榕、等待項目創(chuàng)建完成后，就看到了一個通過模板實現(xiàn)的 Flutter 應用了靡挥。
- 6序矩、嘗試運行一下 hello_world 項目，注意跋破，可以選擇不同的設備來運行（iOS 模擬器簸淀、Android 模擬器瓶蝴、macOS桌面應用、Chrome瀏覽器）租幕，這里由于我沒有安裝Android 模擬器舷手，所以暫時無法演示，看看下面的運行效果截圖：
1）找到 VS Code 的藍色狀態(tài)欄上劲绪，也就是編輯器的右下角男窟，我們可以看到運行設備的切換按鈕；
2）點擊該按鈕后贾富，會彈出可以選擇的設備列表歉眷，選擇需要運行的設備后；
3）在菜單工具欄上選擇：Run > Start Debugging颤枪，或者直接按下 F5 調(diào)試快捷鍵汗捡；
4）等待 App 運行起來即可，可以在 Debug Console 看到打印了信息
或許你更享受通過終端輸入命令的方式創(chuàng)建項目畏纲，那么這里我們也可以通過終端輸入命令來創(chuàng)建應用
- 1扇住、打開終端，通過 flutter create 命令來創(chuàng)建一個項目
$ flutter create hello_world
- 2盗胀、通過 cd 命令進入到剛剛創(chuàng)建的項目目錄：hello_world
$ cd hello_world
- 3艘蹋、檢查一下哪些設備已經(jīng)連接可以進行調(diào)試運行我們的項目
$ flutter devices
- 4、我準備用 iOS 模擬器來運行 hello_world 項目票灰，但是發(fā)現(xiàn)設備列表并沒有找到女阀，那么通過輸入如下的命令把我們的模擬器運行起來
$ open -a simulator
- 5、模擬器成功運行起來后屑迂，輸入 flutter run 命令即可
$ flutter run
如果你是通過終端命令行的方式來運行 flutter 項目强品，但是并沒有安裝（啟動） iOS 或者 Android 模擬器，這個時候直接運行 flutter run 命令屈糊，會提示你選擇運行的設備的榛，只需要輸入設備序號即可運行你的項目。
選擇運行設備
Flutter 熱重載（hot reload）
簡單來說逻锐，就是 Flutter 開發(fā)支持應用程序在運行狀態(tài)下重載代碼夫晌，而不需要重新啟動應用程序或者丟失程序的運行狀態(tài)。
修改一下應用程序的代碼昧诱，然后按下 ctrl+ s 進行保存操作晓淀，發(fā)現(xiàn)剛剛的更改馬上在模擬器上就有了變化。感覺這個非常有助于提升開發(fā)調(diào)試代碼的效率盏档。
