Question

我目前正在尝试将Web应用程序支持添加到现有的Flutter项目（使用Firebase）中。我已按照说明使用Firebase for Web和Flutter进行所有设置。但是，当我尝试在Chrome中运行项目时，出现黑屏，并且记录了以下错误：

我已经测试过可以在Chrome上运行“ Flutter演示”，并且可以运行。另外，我只能在最新的开发者频道上运行“ Flutter演示”，所以这就是我现在正在使用的东西。 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>

请让我知道其他信息是否有帮助。预先大谢谢！：）

Answer 1

请参阅此链接GitHub-thread-for-whiteScreenIssue-in-Flutter

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

flutter channel dev
flutter upgrade
flutter run -d chrome

Answer 2

我觉得您正在使用不推荐使用的flutter_web项目。您看到的错误是此repo的一部分。

因此，我想说，正如github存储库中所建议的那样，将标准颤动与该page中的指令一起使用。根据其他答案的建议，您可以在dev频道中，也可以按照其文档建议保留在beta频道中的文档进行常规开发，如果需要更多最新版本，请直接使用{{1} }频道。

由于master中使用了许多软件包，因此必须确保Flutter Web中支持每个软件包。例如，Flutter Web中不支持所有的Firebase软件包。这将花费一些时间进行检查，但这是向前迈进的必要步骤。

Answer 3

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

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

1、将flutter频道改为beta或dev
2、如果你的firebase web连接到firebase然后把firebase配置添加到index.js
4、选择设备--Microsoft Edge(web)
3、使用 -- Run 按钮或终端运行应用

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

Flutter Web：白屏（PersistedOffset错误）

3 个答案: