Flutter示例项目在Chrome运行显示空白页面，求解决方案

一、基础配置与依赖排查 #

• 确认IntelliJ运行配置里，目标设备已选中Chrome，而非Android模拟器或其他设备。
• 执行flutter pub get确保项目依赖全部安装完毕后，重新运行项目。
• 清理Flutter缓存：执行flutter clean，再重新构建并运行项目。

二、切换Web渲染模式 #

Flutter 3.3稳定版默认使用CanvasKit渲染，部分环境下可能出现加载异常导致空白，可切换为HTML渲染：

• 临时生效：运行时执行命令 flutter run -d chrome --web-renderer html
• 永久配置：在项目根目录的web/index.html中、flutter.js加载前添加以下代码：

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

三、检查代码与浏览器控制台 #

• 打开Chrome开发者工具（F12），查看Console栏的报错信息（如资源加载失败、JS运行异常），这类错误通常是页面空白的直接原因。
• 确认main.dart核心逻辑完整，比如runApp(MyApp())代码未被注释或修改。

四、关于flutter doctor异常的说明 #

你提供的检测结果里，Android toolchain缺失组件、Linux toolchain依赖不全、Android Studio找不到Java环境这些问题，不会影响Flutter Web的运行，它们仅针对Android和Linux桌面开发场景，可后续按需修复。

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