原因
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