Flutter's workaround for blank web page with web release

If you finished your Flutter web project and uploaded your excellent HTML and related file to your hosting.

Then boom! Nothing appears, just a white shiny web page. you may need the following workaround

A. Release with HTML web renderer

Flutter team mentioned it in document that with default selection. Flutter will choose a web renderer according to the environment:

• HTML for Mobile browser
• Canvaskit for Desktop browser

In some condition, Canvaskit will not render your production-ready web application. But HTML one will do.

Try the following build command:

flutter build web --web-renderer html

This command will force your release to use HTML renderer instead of Canvaskit.

B. Remove that base element

I found out in this repository's issue where people mention that by removing (or yes, comment it out) <base> element in index.html will do the trick.

<base href="/">

Any better way?

I know that these workarounds might not be the best. But if you found a better solution to solve this problem. Please feel free to comment below.