ColorFiltered doesn't work on web #61780
Assignees
Labels
a: images
Loading, displaying, rendering images
c: crash
Stack traces logged to the console
customer: june
customer: web10
found in release: 1.21
Found to occur in 1.21
framework
flutter/packages/flutter repository. See also f: labels.
has reproducible steps
The issue has been confirmed reproducible and is ready to work on
P1
High-priority issues at the top of the work list
platform-web
Web applications specifically
waiting for PR to land (fixed)
A fix is in flight
Milestone
Comments
|
You can use box shadow instead !! |
Yes, but then it will be inconsistent across platforms, also what if I want to apply different blend modes? |
|
Hi @VrajGohil codeimport 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key);
static const Widget _home = MyHomePage(key: Key('home'));
@override
Widget build(BuildContext context) => MaterialApp(
home: _home,
);
}
class MyHomePage extends StatelessWidget {
const MyHomePage({Key key}) : super(key: key);
static const String _url =
'https://ih1.redbubble.net/image.1076687066.0716/st,small,507x507-pad,600x600,f8f8f8.jpg';
@override
Widget build(BuildContext context) => Material(
child: Center(
child: ColorFiltered(
colorFilter: ColorFilter.mode(Colors.blue, BlendMode.color),
child: Image.network(_url),
),
),
);
}
logs[ +4 ms] MSG : Got dependencies!
[ +20 ms] Running "flutter pub get" in flutter_tools... (completed in 2.1s)
[ +75 ms] Updating assets
[ +154 ms] Syncing files to device Chrome...
[ +51 ms] Generating /Users/nevercode/Desktop/projects/master/android/app/src/main/java/io/flutter/plugins/GeneratedPluginRegistrant.java
[ +50 ms] <- reset
[ +8 ms] /Users/nevercode/development/flutter_master/bin/cache/dart-sdk/bin/dart --disable-dart-dev
/Users/nevercode/development/flutter_master/bin/cache/artifacts/engine/darwin-x64/frontend_server.dart.snapshot --sdk-root
/Users/nevercode/development/flutter_master/bin/cache/flutter_web_sdk/ --incremental --target=dartdevc --debugger-module-names --experimental-emit-debug-metadata
-Ddart.developer.causal_async_stacks=true --output-dill /var/folders/c3/l5jpznsj5k37yrj47l__xpw40000gn/T/flutter_tools.yPk6hn/flutter_tool.Mjdq39/app.dill --libraries-spec
file:///Users/nevercode/development/flutter_master/bin/cache/flutter_web_sdk/libraries.json --packages .packages -Ddart.vm.profile=false -Ddart.vm.product=false
--bytecode-options=source-positions,local-var-info,debugger-stops,instance-field-initializers,keep-unreachable-code,avoid-closure-call-instructions --enable-asserts
--track-widget-creation --filesystem-root /var/folders/c3/l5jpznsj5k37yrj47l__xpw40000gn/T/flutter_tools.yPk6hn/flutter_tools.XgTBw0 --filesystem-scheme org-dartlang-app
--initialize-from-dill build/cache.dill.track.dill --platform file:///Users/nevercode/development/flutter_master/bin/cache/flutter_web_sdk/kernel/flutter_ddc_sdk.dill
[ +17 ms] <- compile org-dartlang-app:/web_entrypoint.dart
[+20224 ms] Syncing files to device Chrome... (completed in 20,351ms, longer than expected)
[ +2 ms] Synced 23.9MB.
[ ] <- accept
[ +1 ms] Caching compiled dill
[+1275 ms] [CHROME]:
[ +5 ms] [CHROME]:DevTools listening on ws://127.0.0.1:54837/devtools/browser/b011effd-bfcc-4fa8-ba5b-7a9dcfa013e8
[+5881 ms] Debug service listening on ws://127.0.0.1:54865/zYRfPnEwuzA=
[ +414 ms] Debug service listening on ws://127.0.0.1:54865/zYRfPnEwuzA=
[ +1 ms] Warning: Flutter's support for web development is not stable yet and hasn't
[ ] been thoroughly tested in production environments.
[ ] For more information see https://flutter.dev/web
[ +1 ms] 🔥 To hot restart changes while running, press "r" or "R".
[ +1 ms] For a more detailed help message, press "h". To quit, press "q".
[+1810 ms] ══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY ╞═════════════════════════════════════════════════════════
[ +3 ms] The following UnimplementedError was thrown during a scheduler callback:
[ ] UnimplementedError
[ +1 ms] When the exception was thrown, this was the stack:
[ +1 ms] dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 213:49 throw_
[ +1 ms] lib/_engine/engine/surface/scene_builder.dart 185:5 pushColorFilter
[ ] packages/flutter/src/rendering/layer.dart 1512:26 addToScene
[ ] packages/flutter/src/rendering/layer.dart 444:5 [_addToSceneWithRetainedRendering]
[ ] packages/flutter/src/rendering/layer.dart 1035:14 addChildrenToScene
[ ] packages/flutter/src/rendering/layer.dart 2013:5 addToScene
[ ] packages/flutter/src/rendering/layer.dart 444:5 [_addToSceneWithRetainedRendering]
[ ] packages/flutter/src/rendering/layer.dart 1035:14 addChildrenToScene
[ ] packages/flutter/src/rendering/layer.dart 1173:5 addToScene
[ ] packages/flutter/src/rendering/layer.dart 444:5 [_addToSceneWithRetainedRendering]
[ ] packages/flutter/src/rendering/layer.dart 1035:14 addChildrenToScene
[ ] packages/flutter/src/rendering/layer.dart 1173:5 addToScene
[ ] packages/flutter/src/rendering/layer.dart 444:5 [_addToSceneWithRetainedRendering]
[ ] packages/flutter/src/rendering/layer.dart 1035:14 addChildrenToScene
[ ] packages/flutter/src/rendering/layer.dart 1621:5 addToScene
[ +2 ms] packages/flutter/src/rendering/layer.dart 772:5 buildScene
[ +1 ms] packages/flutter/src/rendering/view.dart 243:36 compositeFrame
[ +1 ms] packages/flutter/src/rendering/binding.dart 408:18 drawFrame
[ ] packages/flutter/src/widgets/binding.dart 881:13 drawFrame
[ ] packages/flutter/src/rendering/binding.dart 286:5 [_handlePersistentFrameCallback]
[ ] packages/flutter/src/scheduler/binding.dart 1117:15 [_invokeFrameCallback]
[ +3 ms] packages/flutter/src/scheduler/binding.dart 1056:9 handleDrawFrame
[ ] packages/flutter/src/scheduler/binding.dart 865:7 <fn>
[ ] dart-sdk/lib/_internal/js_dev_runtime/private/isolate_helper.dart 48:19 internalCallback
[ ] ════════════════════════════════════════════════════════════════════════════════════════════════════
[ ] Another exception was thrown: UnimplementedError
[ +77 ms] Another exception was thrown: UnimplementedError
[+3963 ms] Another exception was thrown: UnimplementedError
doctor[✓] Flutter (Channel master, 1.21.0-2.0.pre.66, on Mac OS X 10.15.5 19F101, locale en-GB)
• Flutter version 1.21.0-2.0.pre.66 at /Users/nevercode/development/flutter_master
• Framework revision 54c9441723 (2 days ago), 2020-07-17 18:56:12 -0400
• Engine revision d327828632
• Dart version 2.9.0 (build 2.9.0-21.0.dev 9dca49e71e)
[✓] Android toolchain - develop for Android devices (Android SDK version 29.0.2)
• Android SDK at /Users/nevercode/Library/Android/sdk
• Platform android-29, build-tools 29.0.2
• Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
• All Android licenses accepted.
[✓] Xcode - develop for iOS and macOS (Xcode 11.5)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Xcode 11.5, Build version 11E608c
• CocoaPods version 1.9.0
[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome
[✓] Android Studio (version 4.0)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin version 46.0.2
• Dart plugin version 193.7361
• Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
[✓] VS Code
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.12.2
[✓] Connected device (4 available)
• Pixel 3a (mobile) • 965AY0WP5C • android-arm64 • Android 10 (API 29)
• macOS (desktop) • macos • darwin-x64 • Mac OS X 10.15.5 19F101
• Web Server (web) • web-server • web-javascript • Flutter Tools
• Chrome (web) • chrome • web-javascript • Google Chrome 83.0.4103.116
• No issues found!I experience the behaviour you are describing; Thank you |
iapicca
added
a: images
|
another repo case from customer: |
|
At first blush it seems like this should have been fixed in #50897 ? Just hit this today as well, have to remove it for web platforms. |
12 tasks
12 tasks
|
In master |
|
Are you saying if I switch to the master channel in Flutter and upgrade, that this should work now? I just did that and the ColorFilter still doesn't work as it should (it's just pitch white - the same as before this was merged in). My usage looks like this (I increase the blend as the scroll progresses) |
|
@lewcianci , the PR fixes the filed issue (see above example: BlendMode.color). There is no support for BlendMode.clear on the web platform AFAIK (all other blend modes are supported). Please file a new issue specifically for BlendMode.clear with use case, thx. |
|
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 |
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Steps to Reproduce
Original image:
Expected results: (works on android)
Actual results:
Only shows white screen on web. Throws UnimplementedError
Logs
The text was updated successfully, but these errors were encountered: