Flutter Web: White screen (PersistedOffset error)

user_9332479 0
Viewed 4906

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: enter image description here enter image description here enter image description here

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:

enter image description here

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! :)

flutter-web firebase dart flutter
4 Answers
user_58214240

I have a feeling you are using the deprecated flutter_web project. The errors you see are somewhat part of this repo.

So I would say, as suggested in the github repo use the standard flutter with the instructions from this page. As suggested in the other answer you can be in dev channel, also as per the doc its advised to stay in beta channel for usual development and if you need more latest release directly use the master channel.

Since you are using so many packages in your pubspec.yaml you will have to ensure each and every one of them is supported in flutter web. For example, not all firebase packages are supported in flutter web. This will take time to check, but its a necessary step to move forward.

user_30439440

I have already faced this issue and I have tried the answers but nothing works for me . Then I have run my flutter web on Microsoft Edge then it was working good .

If your chrome browser is showing blank screen Try these steps ----------

1, change flutter channel to beta or dev
2, If your firebase web is connected to firebase then add the firebase configuration to index.js
4, select device - - Microsoft Edge(web)
3, Run app by using -- Run button or terminal

Good luck ..........

user_141567280
  1. build your web project in release mode by using command -

flutter build web --release

  1. Now go to your project root folder -> go to build , now you will find folder named as web. Now that's the folder that will be deployed for hosting.

  2. Now you have to open your command prompt into your project root folder , you can also open your cmd in build folder but I suggest you to open in root folder so that you don't have to initialize firebase different functions again and again.

  3. Now initialize firebase by using command -

firebase init

  1. Now choose the firebase hosting option -> choose your project

  2. Note this is the main step -- On asking 'what do you want to use as your public directory ?'

what do you want to use as your public directory ? (public)

just hit backspace and delete (public) and write build/web

what do you want to use as your public directory ? build/web

then press enter

  1. Now after two commands it will ask to overwrite your index.html another main step.

file web/index.html already exists. Overwrite ?y/n

just press n for No. We don't want to overwrite that file

  1. Now after you firebase initialization successful completion write -

firebase deploy

And your project/webapp will run with no blank white screen :)

user_91946710
Related