Object progressevent error in flutter web app with firebase backend

Question

I have developed a Flutter app with Firebase backend, where one can create an account and upload images. In the Android app I don't have errors displaying previously uploaded images. But in the web version of the app the uploaded images are not visible and instead of each image this message is displayed:

[object ProgressEvent]

I tried changing the rules in Firebase but didn't help.

Changing the Firebase rules, opening Chrome with incognito mode, trying other browsers.

Answer 1

Solution: at index.html in your project change renderer from CanvasKit to html

 <script>
    window.addEventListener('load', function (ev) {
      // var loading = document.querySelector('#loading');
      // loading.textContent = "Loading entrypoint...";
      // Download main.dart.js
      _flutter.loader.loadEntrypoint({
        serviceWorker: {
          serviceWorkerVersion: serviceWorkerVersion,
        },
        onEntrypointLoaded: async function (engineInitializer) {
          let appRunner = await engineInitializer.initializeEngine({
            hostElement: document.querySelector("#flutter_app"),
            renderer: "html"
          }).then(function (appRunner) {
            return appRunner.runApp();
          });
        }
      })
    });
  </script>

I was having same error when I was trying to display images from firebase storage. Apparently, firebase storage images has headers.

This is the error before my fix:

Response: ImageCodecException: Failed to detect image file format using the file header.
File header was [0x3c 0x21 0x44 0x4f 0x43 0x54 0x59 0x50 0x45 0x20].
Image source: encoded image bytes.response

I did little research, and what I found is if you are using Canvas Kit as renderer instead of HTML that will cause the problem

FYI-

HTML: this renderer uses a combination of HTML, CSS, Canvas 2D, and SVG to render UI. It uses the element to render images. CanvasKit: this renderer uses WebGL to render UI, and therefore requires access to the pixels of the image.

Hope this will help!