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

原因

Flutter在運行和構(gòu)建Web應(yīng)用程序時，可以在兩個不同的渲染器之間進行選擇。

這兩個渲染器是：

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

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

  • 當應(yīng)用程序在移動瀏覽器中運行時，此選項選擇HTML渲染器；

  • 當應(yīng)用程序在桌面瀏覽器中運行時，選擇CanvasKit渲染器。

那么在build web端應(yīng)用的時候, 系統(tǒng)默認設(shè)置的是CanvasKit渲染器。

造成頁面空白的原因應(yīng)該就是瀏覽器下載CanvasKit出錯導(dǎo)致的問題.

解決方式

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

參考

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

最好的筆記軟件

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容