Flutter Web: White screen (PersistedOffset error)

firebase flutter dart flutter-web

3,442

Refer to this link GitHub-thread-for-whiteScreenIssue-in-Flutter

I've encountered this problem also I just followed the steps told in the thread

flutter channel dev
flutter upgrade
flutter run -d chrome

3,442

Author by

Rasmus Lian

Updated on December 18, 2022

Comments

Rasmus Lian over 1 year

I'm currently trying to add web app support to an existing Flutter project (which uses Firebase). I've followed the instructions to set up everything both with Firebase for Web, and Flutter. But when I'm trying to run the project in Chrome I get a blank screen and this error logs:

I've tested to run the "Flutter Demo" on Chrome, which works. Also, I only got the "Flutter Demo" to run on the latest dev channel, so that's what I'm using right now. The Beta channel didn't work.

Here's my pubspec.yaml:

And here's my 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>

Please let me know if any other information could be of help. Big thank you in advance! :)