前言

接觸Flutter開發的時間並不長，最先關注到Flutter，就是據說它能夠跨端開發iOS，Android，Web端。直到上週看了Flutter2.0的發佈，才知道，原來跨web端纔剛剛stable呀...javascript

那咱們來真實的體驗一下，Flutter發佈web應用究竟靠不靠譜？html

開啓web端構建

使用下面這個命令才能夠開啓Web端構建的支持java

flutter config --enable-web
複製代碼

開啓後咱們再次輸入flutter config能夠看到web

這樣每次新建Flutter項目時，都是支持web端構建的，會默認多出一個構建配置目錄web。chrome

即便某個項目不須要支持web端構建也無須去特地關掉這個支持，不使用構建web的命令便可編程

其實就是對當前項目從新配置一下canvas

flutter create .
複製代碼

在沒有其餘端環境可用的狀況下，使用如下命令會直接編譯web端並打開chrome進行調試瀏覽器

flutter run
複製代碼

Flutter在構建web端應用時，能夠選擇兩種渲染模式。下面給你們演示下，你們注意仔細看看截圖中我標記了紅框的部分。markdown

flutter build web --web-renderer html
複製代碼

當咱們採用html渲染模式時，flutter會採用HTML的custom element，CSS，Canvas和SVG來渲染UI元素框架

優勢：

缺點：

flutter build web --web-renderer canvaskit
複製代碼

當咱們採用canvaskit渲染模式時，flutter將 Skia 編譯成 WebAssembly 格式，並使用 WebGL 渲染。應用在移動和桌面端保持一致，有更好的性能，以及下降不一樣瀏覽器渲染效果不一致的風險。可是應用的大小會增長大約 2MB。

優勢：

缺點：

還有一個auto的渲染模式（默認），會自動根據是運行在移動瀏覽器端仍是桌面瀏覽器端來選擇渲染模式

隨着Flutter2.0的發佈，這個帶着【全平臺像素級跨端一致性的】框架會更加倍受關注。雖然Web端的編譯結果不管哪一種渲染方式暫時在國內的web體驗標準下都還差點意思，可是真的很值得期待。

一個設計師出身，但熱愛編程的老程序猿

近期文章（感謝掘友的鼓勵與支持🌹🌹🌹）

本文正在參與「掘金 2021 春招闖關活動」, 點擊查看活動詳情