Issue
I’ve deployed my flutter web app to https://buildcode.app, but the site hangs for ios chrome/safari and not for android or desktop. No runtime errors appear when I inspect with the console, I’m not sure how to debug in this situation.
Solution
There might be problem with renderers here, as flutter uses two renderers html and canvaskit and auto(default) if we dont choose which to use it selects whats best for the targeting platform as this option chooses the HTML renderer when the app is running in a mobile browser, and CanvasKit renderer when the app is running in a desktop browser.
HTML renderer: Uses a combination of HTML elements, CSS, Canvas elements, and SVG elements. This renderer has a smaller download size.
CanvasKit renderer: This renderer is fully consistent with Flutter mobile and desktop, has faster performance with higher widget density, but adds about 2MB in download size.
When we run flutter build web then flutter will run your app with auto renderer as we didnt mentioned which renderer to use for build/run.
we can specify which renderer to use by using two flags html and canvaskit:
This flag can be used with the run or build subcommands.
For example:
flutter run -d chrome --web-renderer html
flutter build web --web-renderer canvaskit
So try build your web app with html renderer for ios release as this renderer has smaller download size as mentioned in flutter docs here.
Try running flutter build web --web-renderer html --release in console and then it should work flawless in ios chrome/safari browser.
Answered By – Abhishek Vishwakarma
Answer Checked By – Mary Flores (FlutterFixes Volunteer)