一、起源

Flutter 的起源就很有意思，大家都知道早期 Flutter 最先支持的平臺是 Android 和 iOS，至今最核心的維護(hù)平臺依然是 Android 和 iOS，但是事實(shí)上Flutter 來源于前端 Chrome 團(tuán)隊(duì)。另外前端的同學(xué)應(yīng)該知道，Dart 起初也是為了 Web 而生，事實(shí)上 Dart 誕生至今也有 10 年了，所以可以說 Flutter 其實(shí)充滿了 Web 的基因。

二、渲染邏輯

首先 Flutter Web 和其他 Flutter 平臺一樣共用一套 Framework，理論上絕大多數(shù)的控件實(shí)現(xiàn)都是通用的，而由于 Web 的特殊場景，F(xiàn)lutter Web 在 "幾經(jīng)周折" 之后落地了兩種不同的渲染邏輯: html 和 canvaskit，它們的不同之處在于:

• html 的實(shí)現(xiàn)更輕量級，渲染實(shí)現(xiàn)基本依賴于 Web 平臺的各種 HTMLElement，它更貼近現(xiàn)在的 Web 環(huán)境，所以有時候我們也稱呼它為 DomCanvas。
• canvaskit 的實(shí)現(xiàn)可以說是更貼近 Flutter 理念，因?yàn)樗鋵?shí)就是 Skia + WebAssembly 的實(shí)現(xiàn)邏輯，能和其他平臺的實(shí)現(xiàn)更一致，性能更好，比如滾動列表的渲染流暢度更高等。

Flutter For Web和Flutter For Mobile的上層實(shí)現(xiàn)基本類似，但是在下層的實(shí)現(xiàn)有很大的差別。Flutter For Mobile中的繪制是使用了Engine中的Dart、Skia和Text，然后再調(diào)用iOS和Android提供的底層繪制能力來實(shí)現(xiàn)的。

三、打包處理

默認(rèn)情況下 Flutter Web 在打包渲染時會把 html 和 canvaskit 都打包進(jìn)去，然后再 PC 端使用 canvaskit 模式，在 mobile 端使用 html 模式，當(dāng)然您也可以在打包時通過 flutter build web --web-renderer html --release 之類的配置強(qiáng)行指定渲染模式。

四、配置開發(fā)環(huán)境

• 首先需要master或者dev渠道的Flutter SDK來獲取Web支持

flutter channel stableflutter upgradeflutter config --enable-web

• 創(chuàng)建一個名為myapp的應(yīng)用

flutter create myappcd myapp

• 編譯當(dāng)前應(yīng)用

flutter build web

你可以通過運(yùn)行 release 模式 (flutter run --release) 或運(yùn)行 flutter build web 來構(gòu)建 release 模式的應(yīng)用。同時，你可以使用（--web-renderer html）或者（--web-renderer canvaskit）分別切換 HTML 或 CanvasKit 渲染器。

• 為現(xiàn)有項(xiàng)目添加 Web 支持

flutter create .

測試應(yīng)用

你可以在命令行使用 flutter run -d chrome 命令測試應(yīng)用程序。這會構(gòu)建出 debug 版本的應(yīng)用。

對于增加了對Flutter For Web支持的Flutter應(yīng)用，在代碼目錄中增加了一個Web文件夾，其中index.html 文件是整個Web應(yīng)用的入口。其中引用了一個JS文件是main.dart.js，但在工程目錄中找不到該文件。其實(shí)這個文件是Flutter工程編譯后生成的js文件，如果曾編譯成功過這個工程，會在編譯后的build文件夾中看到該js文件。

和普通的Flutter應(yīng)用一樣，主要的功能實(shí)現(xiàn)還是在工程中的lib文件夾中。但是如果需要有資源文件、js 文件等 web 所需資源，可以放到Web這個文件夾中。

結(jié)束語