Since Flutter supports both mobile and web applications, it has 2 different kinds of renderers. The most common is HTML, which is used by default for mobile builds. With the introduction of a stable web version of Flutter, the Webapp version uses CanvasKit Renderer, which is more efficient.
While running the app on the web, you may encounter the following in your app:
The images are not loading in places where they should be.
You might also see this error message in your terminal:
*Rest of URL blurred to prevent token and location of our storage to be seen by the public*
To keep things simple, we will simply tell Flutter that we want to use HTML Renderer as the default. The Webapp uses CanvasKit because it is more efficient for the web.
Running Locally
When you are writing code and want to see images when building and testing, run the following command to run the app using HTML Renderer:
flutter run -d chrome --web-renderer htmlDeployment
When you deploy the app for the web, you have to first build the web version and then send it using the terminal (this is explained in another guide).
To build the app so that it is using HTML Renderer when users visit the website, use the following command:
flutter build web --web-renderer html --releaseas opposed to the old way of building:
flutter build web