Flutter web打包後,訪問頁面顯示空白

原因

Flutter在運行和構建Web應用程序時,可以在兩個不同的渲染器之間進行選擇。 

這兩個渲染器是:

  • HTML。CSS,Canvas元素和SVG元素。 該渲染器的下載大小較小。
  • Canvaskit。使用Skia編譯爲WebAssembly並使用WebGL渲染。 該渲染器與Flutter移動設備和臺式機完全一致,具有更快的性能,並且不太可能在瀏覽器之間出現差異,但下載大小增加了大約2MB。

Flutter官方文檔上對這個選項的默認設置的說明是

  • 當應用程序在移動瀏覽器中運行時,此選項選擇HTML渲染器;

  • 當應用程序在桌面瀏覽器中運行時,選擇CanvasKit渲染器。

那麼在build web端應用的時候, 系統默認設置的是CanvasKit渲染器。

造成頁面空白的原因應該就是瀏覽器下載CanvasKit出錯導致的問題.


解決方式

改用打包命令 flutter build web --web-renderer html


參考

Flutter 寫的app, 需要源碼可以私信~~


最好的筆記軟件

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章