Flutter 開啟web建構以及web的兩種渲染模式

文章目錄

• ​​舊項目開啟web端建構​​
• ​​渲染模式​​

• ​​HTML渲染模式​​
• ​​CanvasKit渲染模式​​
• ​​auto的渲染模式（預設）​​

舊項目開啟web端建構

flutter config --enable-web      

在項目路徑下執行（其實就是對目前項目重新配置一下）：

flutter create .      

通過：

flutter config      

可以看到目前支援的終端：

Settings:
  enable-macos-desktop: true
  enable-web: true      

渲染模式

HTML渲染模式

html渲染模式：flutter會采用HTML的custom element，CSS，Canvas和SVG來渲染UI元素

優點：

• 應用體積更小

缺點：

• 渲染性能差
• 跨端一緻性可能受影響

flutter build web --web-renderer html      

CanvasKit渲染模式

當canvaskit渲染模式：flutter将 Skia 編譯成 WebAssembly 格式，并使用 WebGL 渲染。應用在移動和桌面端保持一緻，有更好的性能，以及降低不同浏覽器渲染效果不一緻的風險。但是應用的大小會增加大約 2MB。

flutter build web --web-renderer canvaskit      

優點：

• 像素級跨端一緻性
• 更好的渲染性能

• 應用體積變大，需要加載一個2.5MB的​

  ​webaseembly​

  ​格式的代碼

auto的渲染模式（預設）