快捷導(dǎo)航

使用Flutter 構(gòu)建Web應(yīng)用邏輯解析

更新時間：2022年12月06日 10:30:37 作者：顧安

這篇文章主要為大家介紹了使用Flutter 構(gòu)建Web應(yīng)用邏輯解析，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪

一、起源

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

二、渲染邏輯

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

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

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

三、打包處理

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

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

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

flutter channel stableflutter upgradeflutter config --enable-web

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

flutter create myappcd myapp

編譯當前應(yīng)用

flutter build web

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

為現(xiàn)有項目添加 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，但在工程目錄中找不到該文件。其實這個文件是Flutter工程編譯后生成的js文件，如果曾編譯成功過這個工程，會在編譯后的build文件夾中看到該js文件。

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