在浏览器运行搭载Firebase后端的Flutter应用提示未初始化默认应用如何解决

这个报错是因为Flutter Web端调用Firebase服务时，默认实例没有被正确初始化，根因是index.html中Firebase初始化脚本写法错误、资源加载顺序冲突导致的，按照以下步骤修复即可：

步骤1：修正index.html中的Firebase配置与加载逻辑 #

你当前的index.html存在三个错误：

• 使用CDN引入Firebase 8.x版本时，不能用ES模块的import语法导入方法，8.x版本会暴露全局firebase对象可直接调用
• 重复声明了main.dart.js的加载标签，和下方service worker的动态加载逻辑冲突
• Firebase JS SDK版本和firebase_core: ^1.10.0不匹配

把index.html中Firebase相关的script代码替换为以下内容，同时删掉你手动写的<script src="main.dart.js" type="application/javascript"></script>标签：

<!-- 替换为和firebase_core 1.10.0匹配的8.10.0版本 -->
<script src="https://www.gstatic.com/firebasejs/8.10.0/firebase-app.js"></script>
<script>
  // 你的web app的Firebase配置，替换为Firebase控制台获取的真实值
  const firebaseConfig = {
    apiKey: "你的真实apiKey",
    authDomain: "你的真实authDomain",
    projectId: "你的真实projectId",
    storageBucket: "你的真实storageBucket",
    messagingSenderId: "你的真实messagingSenderId",
    appId: "你的真实appId",
    measurementId: "你的真实measurementId"
  };
  // 直接用全局firebase对象初始化
  firebase.initializeApp(firebaseConfig);
</script>

如果后续使用Firebase其他服务（如Auth、Firestore），需要在firebase-app.js下方引入对应服务的8.10.0版本JS SDK。

步骤2：优化main.dart中Firebase初始化逻辑 #

将初始化逻辑提前到main函数中执行，避免组件实例化时初始化时序异常：

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

// main函数改为async
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  // 这里先初始化完成再启动App
  await Firebase.initializeApp();
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'osama test for research'),
    );
  }
}

// 后面的MyHomePage代码保持不变即可

步骤3：清除缓存重新构建 #

执行以下命令清理旧的构建缓存，重新拉取依赖：

flutter clean
flutter pub get

重启项目后即可正常运行。

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