[Fixed] Object progressevent error in flutter web app with firebase backend – Flutter

The Problem:

In a Flutter web app with a Firebase backend, uploaded images are not visible but instead display the error message "object ProgressEvent". This error occurs only in the web version of the app, while the Android version displays the images correctly.

The Solutions:

Solution 1: Change Renderer to HTML

In the index.html file of your Flutter web app, modify the renderer option from CanvasKit to html:

<script>
  window.addEventListener('load', function (ev) {
    // ...

    _flutter.loader.loadEntrypoint({
      serviceWorker: {
        serviceWorkerVersion: serviceWorkerVersion,
      },
      onEntrypointLoaded: async function (engineInitializer) {
        let appRunner = await engineInitializer.initializeEngine({
          hostElement: document.querySelector("#flutter_app"),
          renderer: "html", // Change renderer to HTML
        }).then(function (appRunner) {
          return appRunner.runApp();
        });
      }
    })
  });
</script>

This change will enable the use of the HTML renderer instead of CanvasKit. The HTML renderer uses HTML and CSS for rendering, which supports displaying images from Firebase storage.

Video Explanation:

The following video, titled "”[100%", provides additional insights and in-depth exploration related to the topics discussed in this post.

This video provides further insights and detailed explanations related to the content discussed in the article.

– flutter web app image.network error” description=”Was this Tutorial helpful? Spread Motivation on me by supporting https://paypal.me/RajatPalankar Hi Guys, Welcome to Proto Coders Point.”]