Flutter Web：白屏（PersistedOffset 错误）答案

【问题标题】：Flutter Web: White screen (PersistedOffset error)Flutter Web：白屏（PersistedOffset 错误）
【发布时间】：2020-07-05 21:38:07
【问题描述】：

我目前正在尝试将网络应用支持添加到现有的 Flutter 项目（使用 Firebase）。我已按照说明使用 Firebase for Web 和 Flutter 设置所有内容。但是当我尝试在 Chrome 中运行该项目时，我得到一个空白屏幕，并且这个错误日志：

我已经测试过在 Chrome 上运行“Flutter Demo”，它可以工作。另外，我只有在最新的开发频道上运行“Flutter Demo”，所以这就是我现在正在使用的。 Beta 通道不起作用。

这是我的 pubspec.yaml：

这是我的 index.html：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta content="IE=Edge" http-equiv="X-UA-Compatible">
  <meta name="description" content="A new Flutter project.">

  <!-- iOS meta tags & icons -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="astoria">
  <link rel="apple-touch-icon" href="icons/Icon-192.png">

  <!-- Favicon -->
  <link rel="shortcut icon" type="image/png" href="favicon.png"/>

  <title>astoria</title>
  <link rel="manifest" href="manifest.json">
</head>
<body>
  <!-- This script installs service_worker.js to provide PWA functionality to
       application. For more information, see:
       https://developers.google.com/web/fundamentals/primers/service-workers -->
  <script>
    if ('serviceWorker' in navigator) {
      window.addEventListener('load', function () {
        navigator.serviceWorker.register('flutter_service_worker.js');
      });
    }
  </script>

  <!-- The core Firebase JS SDK is always required and must be listed first -->
  <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-app.js"></script>

  <!-- TODO: Add SDKs for Firebase products that you want to use
      https://firebase.google.com/docs/web/setup#available-libraries -->
  <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-analytics.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-auth.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-firestore.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-functions.js"></script>
  <script src="https://www.gstatic.com/firebasejs/7.12.0/firebase-storage.js"></script>

  <script>
    // Your web app's Firebase configuration
    var firebaseConfig = {
      apiKey: "...",
      authDomain: "...",
      databaseURL: "...",
      projectId: "...",
      storageBucket: "...",
      messagingSenderId: "...",
      appId: "...",
      measurementId: "..."
    };
    // Initialize Firebase
    firebase.initializeApp(firebaseConfig);
    firebase.analytics();
  </script>

  <script src="main.dart.js" type="application/javascript"></script>
</body>
</html>

如果有任何其他信息可以提供帮助，请告诉我。非常感谢您提前！ :)

【问题讨论】：

你能在这里分享一个颤振医生的输出吗？

标签： firebase flutter dart flutter-web

【解决方案1】：

参考此链接GitHub-thread-for-whiteScreenIssue-in-Flutter

我也遇到过这个问题，我只是按照线程中告诉的步骤进行的

flutter channel dev
flutter upgrade
flutter run -d chrome

【讨论】：

【解决方案2】：

我感觉您正在使用已弃用的 flutter_web 项目。您看到的错误是 repo 的一部分。

所以我想说，正如 github 存储库中所建议的那样，使用标准颤振和来自 page 的说明。正如其他答案中所建议的，您可以在dev 频道中，也根据文档，建议您留在beta 频道进行常规开发，如果您需要更多最新版本，请直接使用master 频道。

由于您在 pubspec.yaml 中使用了如此多的包，您必须确保它们中的每一个都在 Flutter Web 中得到支持。例如，不是所有的 firebase 包都在 flutter web 中受支持。这需要时间来检查，但这是前进的必要步骤。

【讨论】：

【解决方案3】：

我已经遇到过这个问题，我已经尝试了答案，但对我没有任何作用。然后我在 Microsoft Edge 上运行了我的 Flutter Web，然后它运行良好 ?。

如果您的 chrome 浏览器显示空白屏幕试试这些步骤 ----------

1、将flutter通道改为beta或dev
2、如果你的firebase web连接到firebase，那么将firebase配置添加到index.js
4、选择设备——Microsoft Edge(web)
3、使用--运行按钮或终端运行应用程序

祝你好运???..........

【讨论】：