Flutter Web在Chrome运行仅显示白屏问题求助

核心问题定位 #

控制台输出的TypeError: Cannot set properties of undefined (setting 'nativeCommunication')是导致白屏的关键——这说明某个Web插件的JavaScript代码在最新Flutter Web引擎下无法正常运行，直接阻断了Dart代码的执行（所以你的main()开头的打印语句完全没输出）。

针对性解决方案 #

1. 强制更新Web相关插件 #

你的依赖中存在几个版本较旧的Web插件，与Flutter 3.22.x兼容性存疑：

• html_editor_enhanced: 当前^2.6.0版本发布时间较早，远早于Flutter 3.22，必须升级到最新稳定版
• flutter_tts: 当前^4.0.2版本同样需要更新到适配最新Flutter的版本

操作步骤：

1. 修改pubspec.yaml中对应插件的版本号为最新兼容版（可查看插件的pub.dev页面确认）
2. 执行以下命令：

flutter clean
flutter pub get
flutter run -d chrome

2. 检查Web初始化脚本顺序 #

打开web/index.html，确保第三方服务（如Firebase）的初始化脚本早于Flutter的入口脚本：

<!-- 先加载Firebase等第三方脚本 -->
<script src="https://www.gstatic.com/firebasejs/对应版本/firebase-app.js"></script>
<!-- 再加载Flutter脚本 -->
<script src="main.dart.js" type="application/javascript"></script>

3. 重置Chrome缓存 #

Chrome的旧缓存可能干扰新代码运行：

• 按F12打开DevTools，切换到Network标签
• 勾选「Disable cache」选项
• 刷新页面重新运行项目

4. 极简测试隔离问题 #

如果以上方法无效，创建一个最简main.dart验证基础运行环境：

import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: Scaffold(
      body: Center(child: Text('Hello Web')),
    ),
  ));
}

若此版本能正常显示，说明问题出在原项目的依赖或初始化逻辑中，逐步添加原代码和依赖来定位具体模块。

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