原因
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
备注
鉴于Dart本身可以将整个Flutter框架编译成JS,将Flutter运行在Web上的核心问题就是将移动应用的底层C++渲染引擎替换成对应的Web平台API。
Flutter并不是简单地将Widget编译成对应的HTML元素。相反,其Web引擎提供了两种渲染后端选择,HTML后端用于降低包大小,并提供广泛的兼容度。CanvasKit后端使用了WebAssembly和WebGL来在浏览器Canvas上渲染Skia绘图指令, 具有