无法在 Chrome 中启动 Flutter 项目答案

【问题标题】：Unable to launch Flutter Project in Chrome无法在 Chrome 中启动 Flutter 项目
【发布时间】：2021-11-27 00:17:05
【问题描述】：

我正在运行 Windows 10 的笔记本电脑上使用 xCode 编写我的 Flutter 应用程序。我在 1 个月前从同样运行 Windows 10 的桌面转移了该项目。

当我通过 android 模拟器运行项目时，应用程序运行良好。当我通过谷歌浏览器运行应用程序时，谷歌浏览器窗口启动，甚至有颤动的启动动画，但页面随后完全空白，背景为白色。当应用程序启动时，它会在 web_entrypoint.dart 文件中的 xCode 上突出显示以下行。

await ui.webOnlyInitializerPlatform();

颤振医生没有给出任何错误，调试控制台也没有给出错误。调试控制台的最后一行是“Connecting to VM service at ...

我尝试在终端中使用flutter build web，但这并没有解决问题。我认为这可能与我的应用程序与 Firebase 的连接有关。我已经成功地将应用程序配置为与 android 和 ios 一起使用，但我不确定如果在 web 方面有任何事情需要做什么。任何有关如何解决此问题的想法将不胜感激。谢谢

【问题讨论】：

标签： windows xcode firebase flutter dart

【解决方案1】：

所以我通过重新创建应用并重新配置我的 Firebase 初始化代码解决了这个问题。

在 main.dart 中

void main() {
  // USED FOR FIREBASE FLUTTER WEB
  WidgetsFlutterBinding.ensureInitialized();
  runApp(MyApp());
}

在 MyApp 类下的 main.dart 中

    // USED FOR FIREBASE FLUTTER WEB
  final Future<FirebaseApp> _initialization = Firebase.initializeApp();

在 Widget build 下的 main.dart 中

// USED FOR FIREBASE FLUTTER WEB
  home: FutureBuilder(
    future: _initialization,
    builder: (context, snapshot) {
      if (snapshot.hasError) {
        print("Error");
      }
      if (snapshot.connectionState == ConnectionState.done) {
        return Nav();
      }
      return const CircularProgressIndicator();
    },
  ),

在 index.html 中

    <!--  USED FOR FIREBASE FLUTTER WEB  -->
  <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-app.js"></script>
  <script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-analytics.js"></script>
  <!--<script src="https://www.gstatic.com/firebasejs/8.4.1/firebase-firestore.js"></script>-->
  <script>

    // For Firebase JS SDK v7.20.0 and later, measurementId is optional
    var firebaseConfig = {
      apiKey: "***",
      authDomain: "***",
      projectId: "***",
      storageBucket: "***",
      messagingSenderId: "***",
      appId: "***",
      measurementId: "***"
    };

    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
  </script>

您可以从 Firebase 控制台获取特定于您的项目的代码。我还必须从代码中删除一些 const 标识符，因为它们给出了错误。我的代码的这种修改现在允许我通过 chrome 等网络浏览器无错误地连接到 firebase。这是一个帮助我克服错误的视频。 https://www.youtube.com/watch?v=l0cFOUJJcGQ&t

【讨论】：