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 .

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

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

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

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

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

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

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出错导致的问题。于是，经过了一系列的科学上网设置，问题解决。