Flutter Web集成Firebase后启动白屏 报Assertion failed错误

页面白屏、控制台抛出firebase_core_web.dart:273:11断言失败，是两个问题叠加导致的：

• 你当前使用的Flutter master为开发测试分支，API变动频繁，和依赖拉取到的firebase_core_web 1.6.6版本存在兼容冲突
• index.html中没有引入Firebase Web端的JS SDK、也没有配置项目初始化参数，Firebase初始化时找不到全局实例直接触发断言崩溃，这是白屏的核心原因

• 先切换到Flutter稳定版，从根源避免开发分支的兼容问题，终端依次执行以下命令：

flutter channel stable
flutter upgrade
flutter clean
flutter pub get

• 调整pubspec.yaml中的Firebase依赖，删掉手动写死的firebase_core_web版本约束，让pub自动拉取和当前Flutter版本匹配的依赖包，调整后的依赖段参考：

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.2
  flutter_svg:
  provider:
  firebase_auth: ^3.4.2
  shared_preferences: ^2.0.15
  firebase_core: ^1.19.2
  cloud_firestore: ^3.3.0
  image_picker: ^0.8.5+3
  firebase_storage: ^10.3.3

修改完成后重新执行flutter pub get同步依赖。

• 修改web/index.html，在引入flutter.js的script标签之前，加入Firebase JS SDK引入和你自己的项目配置，配置参数从Firebase控制台的项目设置中获取，替换掉代码里的占位符即可：

<!-- Firebase Web配置 开始 -->
<script src="https://www.gstatic.com/firebasejs/9.9.2/firebase-app.js"></script>
<script>
  var firebaseConfig = {
    apiKey: "替换为你的项目apiKey",
    authDomain: "替换为你的项目authDomain",
    projectId: "替换为你的项目projectId",
    storageBucket: "替换为你的项目storageBucket",
    messagingSenderId: "替换为你的项目messagingSenderId",
    appId: "替换为你的项目appId"
  };
  firebase.initializeApp(firebaseConfig);
</script>
<!-- Firebase Web配置 结束 -->
<!-- 原有flutter.js引入代码保持原有位置不变 -->
<script src="flutter.js" defer></script>

• 检查lib/main.dart的初始化逻辑，必须在runApp之前完成Firebase初始化，正确写法参考：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await Firebase.initializeApp();
  runApp(const MyApp());
}

• 所有配置修改完成后，重新启动项目到Chrome即可：

flutter run -d chrome

• 本地调试如果出现跨域报错，用flutter run -d chrome --web-port=8080指定固定端口，把对应本地地址加到Firebase控制台的授权域名列表中即可
• 后续升级Firebase依赖时，不要手动指定firebase_core_web的版本，只需要配置firebase_core的版本号，web端适配包会自动拉取兼容版本
• 生产环境项目不要使用Flutter master分支，日常开发用stable分支即可，避免不必要的兼容问题

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