Flutter Web在Chrome、Edge运行时页面空白无报错，该如何解决？

解决方案 #

• 优先检查浏览器侧的报错信息：打开调试页面后按F12调出开发者工具，切换到「Console」和「Network」标签，确认是否有资源加载失败（最常见的是Canvaskit渲染依赖的wasm文件加载超时/失败，Flutter侧控制台不会输出这类错误）
• 强制指定HTML渲染器运行：你当前使用的Flutter 2.2.3版本默认启用Canvaskit渲染，需要从境外CDN加载依赖资源，大概率是资源加载失败导致的空白。本地调试无需额外指定--web-hostname和端口参数，默认localhost即可，避免网卡权限或防火墙规则导致的访问异常，运行时添加渲染器参数即可：

  flutter run -d chrome --web-renderer html
  

  也可以在项目web/index.html的<head>标签中加入以下配置固定渲染器：

  <script>
    window.flutterWebRenderer = "html";
  </script>
  

• 清理项目缓存后重试：依次执行以下命令后再启动调试

  flutter clean
  flutter pub get
  

• 检查web/index.html完整性：确认文件中存在Flutter Web初始化的必要脚本，没有被误修改的内容
• 若以上方案都无效，可考虑升级Flutter稳定版到3.0及以上版本，2.x分支的Web支持存在较多已知兼容性问题，高版本已修复大量相关bug

内容的提问来源于stack exchange，提问作者Marc