Flutter调试模式Web端白屏问题求助（集成Firebase）

核心问题是调试模式下ff_trigger_$windowVar对应的JS回调未被触发，导致Completer一直处于等待状态，页面无法继续渲染；而Release模式下脚本加载和执行时机更稳定，所以能正常运行。以下是具体解决步骤：

1. 确保脚本加载完成后再执行JS调用 #

你当前的代码直接在append脚本后就调用globalContext.callMethod，但调试模式下脚本可能还没加载完毕，导致找不到目标函数。修改代码，先等待脚本加载完成：

web.document.head!.appendChild(script);

// 新增：等待脚本加载完成
Completer scriptLoaded = Completer();
script.onLoad.listen((_) => scriptLoaded.complete());
await scriptLoaded.future;

Completer completer = Completer();

globalContext.callMethod(
  'ff_trigger_$windowVar'.toJS,
  (JSAny module) {
    globalContext[windowVar] = module;
    globalContext.delete('ff_trigger_$windowVar'.toJS);
    completer.complete();
  }.toJS,
);

await completer.future;

2. 验证全局JS函数是否存在 #

打开Chrome开发者工具的Console面板，手动执行以下命令（替换your_windowVar为实际的windowVar值）：

typeof ff_trigger_your_windowVar

如果返回undefined，说明脚本未正确加载或目标函数未注册，需要检查：

• 脚本的src路径是否正确
• 脚本内部是否正确定义了ff_trigger_xxx函数

3. 添加超时处理避免无限等待 #

给Completer的future添加超时逻辑，防止页面一直卡在白屏状态，同时便于排查问题：

await completer.future.timeout(
  const Duration(seconds: 5),
  onTimeout: () {
    print('调用ff_trigger_$windowVar超时，检查脚本加载和函数定义');
    return null; // 可根据业务返回默认值或抛出错误
  },
);

4. 改用FlutterFire官方初始化方式 #

如果你是在手动初始化Firebase，建议使用FlutterFire的官方集成方案，避免直接操作JS上下文，减少调试模式下的兼容性问题：

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/widgets.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp(
    options: DefaultFirebaseOptions.currentPlatform,
  );
  runApp(MyApp());
}

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