Support ShaderMask on web #44152

justinmc · 2019-11-05T00:35:28Z

I discovered in the CupertinoContextMenu PR that Flutter Web does not support the ShaderMask widget right now. Running tests that created this widget caused assertion unimplemented errors for pushShaderMask. See a Cirrus run.

We should implement support for ShaderMask and remove the conditional skipTest: isBrowser in context_menu_test.dart.

The text was updated successfully, but these errors were encountered:

eyjiang · 2019-11-24T19:27:36Z

Hi! Could I try taking this task? Thanks!

justinmc · 2019-12-04T00:46:56Z

@eyjiang Yeah please do! Sorry for the delayed response.

@yjbanov Do you have any more context for implementing ShaderMask on web?

diegoveloper · 2020-01-13T23:41:18Z

Check this sample I created: https://dartpad.dev/5536c9d19d9ea15874416dc4835ba06d , it works fine in mobile.
If you check this condition child: true ? ShaderMask to false it will work.

yjbanov · 2020-01-15T00:36:07Z

Sorry for late response. TBH I've no idea what shader mask does, so I cannot provide much context. I imagine the change would be similar to flutter/engine@3381392. For the CanvasKit backend it's likely a matter of forwarding the right method call. For the HTML backend the trick is to find the HTML/canvas equivalent of this effect.

Dibitybopty · 2020-03-01T13:32:46Z

Anything new on supporting ShaderMask for Web? Looks like a great widget to use.

BrutalCoding · 2020-05-04T21:19:40Z

Still broken as of now with the latest beta. Getting the following error 'Another exception was thrown: PersistedOffset: is in an unexpected state.' when using the ShaderMask() widget. The properties my widget has are just the shaderCallback and a child. Returning null or a LinearGradient in the shaderCallback makes no difference for the error.

Flutter (Channel beta, v1.17.0-3.4.pre, on Mac OS X 10.15.4 19E287, locale en-GB)
• Flutter version 1.17.0-3.4.pre at /Users/danielbreedeveld/Development/Tools/flutter
• Framework revision e6b34c2 (2 days ago), 2020-05-02 11:39:18 -0700
• Engine revision 540786dd51
• Dart version 2.8.1

pravnviji · 2020-07-02T07:17:48Z

I'm new to flutter development. is ShaderMask is supported in 1.19.0-4.2.pre- channel beta ?

justinmc · 2020-07-06T15:54:38Z

ShaderMask is not supported on web yet, but it is supported on other platforms. If someone adds support on web, this issue will be updated.

ferhatb · 2021-02-12T18:12:35Z

@diegoveloper , thanks for patience on this issue. We have a fix, tested with your DartPad sample. It should land shortly in master. Great sample btw.

mzdm · 2021-02-12T22:17:31Z

@ferhatb Nice! I wonder whether it will make hnvn/flutter_shimmer#25 shimmer package workable (on web)?

Niggelgame · 2021-02-13T09:10:05Z

@ferhatb Nice! I wonder whether it will make hnvn/flutter_shimmer#25 shimmer package workable (on web)?

Probably, since the only problem there was ShaderMask

justinmc · 2021-03-11T01:25:53Z

Closing this as it seems from #52967 (comment) and @ferhatb's comment above that ShaderMask is now supported on web. Let me know if that's not right!

arvind-iyer-2001 · 2021-04-27T18:53:38Z

I'm still facing errors with ShaderMasks on Flutter Web Builds. Has any fix arrived for this now? It seems to work fine on Emulators and Physical Devices but not on the Web~. Even Windows Desktop Flutter App seems to work.

ferhatb · 2021-04-27T22:31:29Z

@arvind-iyer-2001 please file a new issue with a small sample to reproduce. Some fixes may have only landed on master channel and propagating through dev->beta->stable releases.

vargascarlitos · 2021-05-03T19:31:28Z

It does not work for me for web applications

pd. In my work they only let me use the stable branch :(

Container(
                        color: background_light_3,
                        height: 8,
                        child: ShaderMask(
                          blendMode: BlendMode.srcATop,
                          shaderCallback: (rect) {
                            return gradient.createShader(rect);
                          },
                          child: LinearProgressIndicator(
                            value: value,
                            minHeight: 8,
                            backgroundColor: Colors.transparent,
                            valueColor: AlwaysStoppedAnimation<Color>(background_light),
                          ),
                        ),
                      ),

`Flutter 2.0.6 • channel stable • https://github.com/flutter/flutter.git
Framework • revision 1d9032c7e1 (hace 4 días) • 2021-04-29 17:37:58 -0700
Engine • revision 05e680e202
Tools • Dart 2.12.3

Running flutter doctor...
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 2.0.6, on macOS 11.2.3 20D91 darwin-x64, locale es-419)
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
[✓] Xcode - develop for iOS and macOS
[✓] Chrome - develop for the web
[✓] Android Studio (version 4.1)
[✓] VS Code (version 1.42.1)
[✓] Connected device (1 available)
`

[══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY ╞═════════════════════════════════════════════════════════
js_primitives.dart:30 The following UnimplementedError was thrown during a scheduler callback:
js_primitives.dart:30 UnimplementedError
js_primitives.dart:30
js_primitives.dart:30 When the exception was thrown, this was the stack:
js_primitives.dart:30 dart-sdk/lib/internal/js_dev_runtime/private/ddc_runtime/errors.dart 236:49 throw
js_primitives.dart:30 lib/_engine/engine/html/scene_builder.dart 231:5 pushShaderMask
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 2261:34 addToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 891:12 [_addToSceneWithRetainedRendering]
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 1515:50 addChildrenToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 2431:12 addToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 891:12 [_addToSceneWithRetainedRendering]
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 1515:50 addChildrenToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 1620:12 addToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 891:12 [_addToSceneWithRetainedRendering]
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 1515:50 addChildrenToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 1620:12 addToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 891:12 [_addToSceneWithRetainedRendering]
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 1515:50 addChildrenToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 1620:12 addToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 891:12 [_addToSceneWithRetainedRendering]
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 1515:50 addChildrenToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 1723:12 addToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 891:12 [_addToSceneWithRetainedRendering]
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 1515:50 addChildrenToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 1620:12 addToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 891:12 [_addToSceneWithRetainedRendering]
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 1515:50 addChildrenToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 2431:12 addToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 891:12 [_addToSceneWithRetainedRendering]
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 1515:50 addChildrenToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 1620:12 addToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 891:12 [_addToSceneWithRetainedRendering]
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 1515:50 addChildrenToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 1620:12 addToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 891:12 [_addToSceneWithRetainedRendering]
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 1515:50 addChildrenToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 2073:12 addToScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 1299:12 buildScene
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 4918:48 compositeFrame
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 6164:25 drawFrame
js_primitives.dart:30 packages/flutter/src/widgets/widget_span.dart.js 51658:15 drawFrame
js_primitives.dart:30 packages/flutter/src/rendering/layer.dart.js 6124:12 [_handlePersistentFrameCallback]
js_primitives.dart:30 packages/flutter/src/scheduler/binding.dart.js 776:9 [_invokeFrameCallback]
js_primitives.dart:30 packages/flutter/src/scheduler/binding.dart.js 744:37 handleDrawFrame
js_primitives.dart:30 packages/flutter/src/scheduler/binding.dart.js 699:12 [_handleDrawFrame]
js_primitives.dart:30 lib/_engine/engine/platform_dispatcher.dart 896:13 invoke
js_primitives.dart:30 lib/_engine/engine/platform_dispatcher.dart 145:5 invokeOnDrawFrame
js_primitives.dart:30 lib/_engine/engine.dart 259:45
js_primitives.dart:30 ════════════════════════════════════════════════════════════════════════════════════════════════════
2js_primitives.dart:30 Another exception was thrown: UnimplementedError
5805js_primitives.dart:30 Another exception was thrown: PersistedPhysicalShape: is in an unexpected state. ]

Ahmadre · 2021-05-03T21:12:43Z

@diegoveloper , thanks for patience on this issue. We have a fix, tested with your DartPad sample. It should land shortly in master. Great sample btw.

Thank you guys soo much :)) it also works in beta channel

Ahmadre · 2021-05-05T13:56:30Z

Is there any plan to have this on the stable channel?

renanmgs · 2021-05-26T22:43:25Z

Any update?
In some mobile resolutions is doesn't seem to work.

Desktop:

Pixel 2:

Iphone:

On my physical device don't work too.

renanmgs · 2021-06-14T15:26:53Z

Closing this as it seems from #52967 (comment) and @ferhatb's comment above that ShaderMask is now supported on web. Let me know if that's not right!

Appears to be not working as expected in some mobile browsers.

justinmc · 2021-06-23T23:17:04Z

@renanmgs Can you open a new issue with instructions to reproduce and tag me and @ferhatb?

renanmgs · 2021-06-23T23:28:16Z

@justinmc Its very simple, just an image with a LinearGradient from black to transparent. In some mobile browsers the gradient don't work. Its reproducible in chrome in the Device Toolbar. Some Mobile aspects the gradient work as expected, in others (like Pixel 2) don't. In every mobile browser that i tested physically does not work as well.

But i can open in a new issue if you really want.

justinmc · 2021-06-24T16:35:20Z

Yes please if you have time! That way this bug will get triaged and someone will look at it.

As the ShaderMask should work again (flutter/flutter#44152), the notice that it would not work was removed

github-actions · 2021-07-31T02:12:41Z

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.

justinmc added f: cupertino flutter/packages/flutter/cupertino repository platform-web Web applications specifically labels Nov 5, 2019

yjbanov added this to the Near-term Goals milestone Nov 5, 2019

yjbanov added the engine flutter/engine repository. See also e: labels. label Nov 5, 2019

Hixie added the framework flutter/packages/flutter repository. See also f: labels. label Nov 26, 2019

jonahwilliams mentioned this issue Dec 30, 2019

<WEB> Uninplemented error on layer.dart #47964

Closed

mariamhas added the customer: webeap label Jan 13, 2020

yjbanov mentioned this issue Mar 19, 2020

Dartpad example in docs is broken #52766

Closed

This was referenced Mar 20, 2020

CupertinoContextMenu doesn't fully work on the web #52967

Closed

Enable CupertinoContextMenu on Web #52977

Merged

TahaTesser added the c: new feature Nothing broken; request for a new capability label Mar 27, 2020

jmagman added this to Awaiting triage in iOS Platform - Cupertino widget review Apr 16, 2020

TahaTesser mentioned this issue May 7, 2020

[WEB] ShaderMask crash #56541

Closed

kf6gpe added the P1 High-priority issues at the top of the work list label May 29, 2020

kf6gpe modified the milestone: Near-term Goals Jun 1, 2020

ferhatb added this to To Do in [web] Rendering API / Fidelity Jun 15, 2020

jagmit mentioned this issue Jun 16, 2020

Not supported for web. hnvn/flutter_shimmer#25

Closed

yjbanov added P2 Important issues not at the top of the work list and removed P1 High-priority issues at the top of the work list labels Jun 16, 2020

Piinks mentioned this issue Jul 7, 2020

Skip Audit - Widgets Library #60936

Merged

9 tasks

yjbanov added e: web_html HTML rendering backend for Web c: rendering UI glitches reported at the engine/skia rendering level and removed f: cupertino flutter/packages/flutter/cupertino repository framework flutter/packages/flutter repository. See also f: labels. labels Jan 28, 2021

ferhatb self-assigned this Feb 10, 2021

justinmc closed this as completed Mar 11, 2021

iOS Platform - Cupertino widget review automation moved this from Awaiting triage to Engineer reviewed Mar 11, 2021

[web] Rendering API / Fidelity automation moved this from To Do to Done Mar 11, 2021

justinmc mentioned this issue Mar 11, 2021

ShaderMask on web for CupertinoContextMenu #77864

Merged

justinmc added a commit to justinmc/flutter that referenced this issue Mar 11, 2021

Unskip tests that needed flutter#44152

526b219

SirusCodes mentioned this issue Mar 11, 2021

LiquidTextFill throwing Unimplemented Error on Web aagarwal1012/Animated-Text-Kit#206

Closed

TahaTesser mentioned this issue Mar 24, 2021

ShaderMask on Web moves incorrectly with window size #78959

Closed

daniel-naegele mentioned this issue Jul 9, 2021

Remove shader mask for web on shimmer loading cookbok notice flutter/website#6009

Merged

sfshaza2 pushed a commit to flutter/website that referenced this issue Jul 14, 2021

Remove shader mask on web notice (#6009)

2155d8d

As the ShaderMask should work again (flutter/flutter#44152), the notice that it would not work was removed

github-actions bot locked as resolved and limited conversation to collaborators Jul 31, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Support ShaderMask on web #44152

Support ShaderMask on web #44152

justinmc commented Nov 5, 2019 •

edited

eyjiang commented Nov 24, 2019

justinmc commented Dec 4, 2019

diegoveloper commented Jan 13, 2020

yjbanov commented Jan 15, 2020

Dibitybopty commented Mar 1, 2020

BrutalCoding commented May 4, 2020

pravnviji commented Jul 2, 2020

justinmc commented Jul 6, 2020

ferhatb commented Feb 12, 2021

mzdm commented Feb 12, 2021

Niggelgame commented Feb 13, 2021

justinmc commented Mar 11, 2021

arvind-iyer-2001 commented Apr 27, 2021

ferhatb commented Apr 27, 2021 •

edited

vargascarlitos commented May 3, 2021

Ahmadre commented May 3, 2021 •

edited

Ahmadre commented May 5, 2021

renanmgs commented May 26, 2021

renanmgs commented Jun 14, 2021

justinmc commented Jun 23, 2021

renanmgs commented Jun 23, 2021

justinmc commented Jun 24, 2021

github-actions bot commented Jul 31, 2021

Support ShaderMask on web #44152

Support ShaderMask on web #44152

Comments

justinmc commented Nov 5, 2019 • edited

eyjiang commented Nov 24, 2019

justinmc commented Dec 4, 2019

diegoveloper commented Jan 13, 2020

yjbanov commented Jan 15, 2020

Dibitybopty commented Mar 1, 2020

BrutalCoding commented May 4, 2020

pravnviji commented Jul 2, 2020

justinmc commented Jul 6, 2020

ferhatb commented Feb 12, 2021

mzdm commented Feb 12, 2021

Niggelgame commented Feb 13, 2021

justinmc commented Mar 11, 2021

arvind-iyer-2001 commented Apr 27, 2021

ferhatb commented Apr 27, 2021 • edited

vargascarlitos commented May 3, 2021

Ahmadre commented May 3, 2021 • edited

Ahmadre commented May 5, 2021

renanmgs commented May 26, 2021

renanmgs commented Jun 14, 2021

justinmc commented Jun 23, 2021

renanmgs commented Jun 23, 2021

justinmc commented Jun 24, 2021

github-actions bot commented Jul 31, 2021

justinmc commented Nov 5, 2019 •

edited

ferhatb commented Apr 27, 2021 •

edited

Ahmadre commented May 3, 2021 •

edited