一、起源

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

二、渲染邏輯

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

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

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

三、打包處理

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

四、配置開發環境

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

flutter channel stableflutter upgradeflutter config --enable-web

• 創建一個名為myapp的應用

flutter create myappcd myapp

• 編譯當前應用

flutter build web

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

• 為現有項目添加 Web 支持

flutter create .

測試應用

你可以在命令行使用 flutter run -d chrome 命令測試應用程序。這會構建出 debug 版本的應用。

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

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

結束語