FLutter web app 运行显示空白页

Flutter作为一个可移植的UI框架,已经支持现代Web应用开发了! 我们很开心已经发布了SDK预览版,这样你可以在Web浏览器里直接运行你的Flutter UI代码。

从去年Beta版发布以来,我们现在已经可以直接使用flutter sdk来支持web应用了,网上有太多早期 flutter for web 的新手教程,大家在还是跟着官方文档尝试以下吧。

简单来说就分几步

google 已经把 flutter_web merge 到 flutter 主工程,但是现在看起来还是 beta 版本才能使用 flutter_web.

所以我们要先切换分支

 flutter channel beta
 flutter upgrade
 flutter config --enable-web

 创建和运行

 flutter create flutter_web_dome
 cd flutter_web_dome
 flutter run -d chrome

 当然也可以将已经存在的工程做web支持:

 flutter create .

 当然这并不是重点,官方文档上很清楚,一步一步跟着做就是了。

如果上面的步骤都没问题,我们应该会看到这个页面。

FLutter web app 运行显示空白页_第1张图片

然而,事情就是没有这么的顺利,我的页面一直是这样

FLutter web app 运行显示空白页_第2张图片

是的 你没有看错,一个空白的页面,log没有输出,没有任何的错误提示,刚开始也为是防火墙端口问题,后来也调试了相关浏览器的设置,sdk版本更新等等问题。都无解,就在我对着白屏发呆的时候,它自己刷新出现了...  马上查看控制台一切正常,log也输出了,那么这个白屏应该就发生在我们程序代码执行之前,在run以下,又是白屏,这次没有这么幸运,始终没有加载出来。查看了github遇到此问题的还真不少,https://github.com/flutter/flutter/issues/61464。在这里也没有找到有用的答案。于是这个问题被我就困扰了我好几天,终于在一个朋友的buff加持下,又有了灵感。

FLutter web app 运行显示空白页_第3张图片

===========================================言归正传================================================

研究了以下配置信息发现了一个关键的地方,问题可能出现在渲染程序上。在翻了几遍文档之后,发现了一些端倪。

Flutter在运行和构建Web应用程序时,可以在两个不同的渲染器之间进行选择。  这两个渲染器是:

  1. HTML。CSS,Canvas元素和SVG元素。 该渲染器的下载大小较小。
  2. Canvaskit。使用Skia编译为WebAssembly并使用WebGL渲染。 该渲染器与Flutter移动设备和台式机完全一致,具有更快的性能,并且不太可能在浏览器之间出现差异,但下载大小增加了大约2MB。

Flutter官方文档上对这个选项的默认设置的说明是,当应用程序在移动浏览器中运行时,此选项选择HTML渲染器;当应用程序在桌面浏览器中运行时,选择CanvasKit渲染器。那么看样子系统为我们设置的是CanvasKit渲染器。

于是分别用命令:

flutter run -d chrome --web-renderer html

flutter run -d chrome --web-renderer canvaskit

使用html的显示出了正常的页面,而使用canvaskit的则显示空白页面。那么到目前位置,我们基本也可以定位,应该是浏览器下载CanvasKit出错导致的问题。于是,经过了一系列的科学上网设置,问题解决。

 

 

 

你可能感兴趣的:(flutter学习系列,web,app,flutter)