Reputation: 437

Flutter Web: White screen (PersistedOffset error)

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

Upvotes: 4

Answers (4)

Malkhan Singh Gaur

Reputation: 189

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

change flutter channel to master
If your flutter web is connected to firebase then add the firebase configuration to index.html
select device -- Microsoft Edge(web)
Run app by using -- Run button or terminal

This worked for me :)

Upvotes: 0

Vishal Agrawal

Reputation: 354

build your web project in release mode by using command -

flutter build web --release

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.
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.
Now initialize firebase by using command -

firebase init

Now choose the firebase hosting option -> choose your project
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

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

Now after you firebase initialization successful completion write -

firebase deploy

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

Upvotes: 0

Abhilash Chandran

Reputation: 7509

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.

Upvotes: 0

Dean Villamia

Reputation: 636

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

Upvotes: 3

Flutter Web: White screen (PersistedOffset error)

Answers (4)

Related Questions