CODEWITHSUNDEEP
flutterdartflutter-web
sabetai
sabetai

Reputation: 93

Flutter web hangs on ios safari/chrome with no errors

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.

Upvotes: 7

Views: 8198

Answers (3)

arad
arad

Reputation: 11

1-First Update you're flutter to 3.27.1 >.

2-if you're using CachedNetworkImage First add this Package: https://pub.dev/packages/cached_network_image_platform_interface then in your CachedNetworkImage add this line: imageRenderMethodForWeb: ImageRenderMethodForWeb.HttpGet,

3-then run this: build web --web-renderer canvaskit

Upvotes: 0

arad
arad

Reputation: 11

If you're using CachedNetworkImage, remove it and use Image.network and then use Flutter:

build web --web-renderer canvaskit

It will do the job.

Upvotes: 1

Mithson
Mithson

Reputation: 1782

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.

Upvotes: 14

Related Questions