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, 需要源码可以私信~~


最好的笔记软件

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