ImageShader not implemented for web platform

[enGMzizo]

I am trying to run the example using the following version of flutter :

Flutter 2.0.6 • channel stable • git@github.com:flutter/flutter.git
Framework • revision 1d9032c7e1 (10 days ago) • 2021-04-29 17:37:58 -0700
Engine • revision 05e680e202
Tools • Dart 2.12.3

And I got this error in iPad Pro Web Google Chrome , But it works fine in iPad Pro Web Safari

I want to know which flutter version you used to build your project in https://rydmike.com/flexcolorpicker/#/ because it is working fine on iPad Pro Web Chrome.

[rydmike]

Thanks @enGMzizo for the report.

I still build all Flutter Web apps with the canvskit renderer. https://flutter.dev/docs/development/tools/web-renderers

If you use the canvaskit renderer it will work on all current Flutter versions on all channels, I just tested with:

• Flutter stable (2.0.6)
• Flutter beta (2.2.0-10.2.pre)
• Flutter dev (2.3.0-0.1.pre)
• Flutter master (2.3.0-1.0.pre.269)

There are imo just too many feature gaps and issues with the Flutter html render for it to be a viable alternative.

To run with canvaskit in Chrome browser:

flutter run -d chrome --web-renderer canvaskit --debug

or run in release mode

flutter run -d chrome --web-renderer canvaskit --release

or to build for a release

flutter build web --web-renderer canvaskit --release

When you build with the (auto) default renderer it actually embeds both versions, then on a mobile device it should default to download and run the version that was built with the html render, as it is bit smaller and loads faster, and on desktop it will download and run the canvaskit renderer build.

Based on your report I can conclude that you built with the default "auto" renderer. It is interesting that the Flutter PWA Web loader thinks it is running on a mobile device with your iPad Pro and downloads the html version that fails, and on Safari it thinks you are on desktop and downloads the Canvaskit version that works.

Maybe if you with Chrome on the iPad request the desktop version it gives you the canvaskit version that works, just an idea, seems like Safari might be doing that by default.

Still to ensure you always just get the version that works, only build and deploy the canvaskit version.

There is as far as I know only one thing the html render is better on and that is if your app uses emojies, those are horrendous on canvaskit due to their large font file download.

---

This is a good find though, at minimum I will update the docs and advise users to only use canvaskit builds when using the picker on the Web platform if they intend to use the opacity slider.

I could add some workarounds for web build html render builds too I guess, or change the implemntation to something that works on both, perhaps a custom painter with the box pattern in the slider could work instead, but I don't know if it is worth it. Eventually Flutter SDK will support this for html renderer too.

Here are two Flutter SDK reported Web issues related to the issue your ran into:

https://github.com/flutter/flutter/issues/45213 https://github.com/flutter/flutter/issues/33616

Even if Flutter Web is available on stable channel, it is still considered beta sw, this is a good example of why.

[enGMzizo]

Thanks @rydmike for your response , I also thought that canvaskit is the problem. I added --web-renderer canvaskit to my build command and it worked fine now in iPad Pro Chrome.