Skip to content

ColorFiltered with BlendMode dst and dstIn not working on web #123537

@Dampfwalze

Description

@Dampfwalze

Steps to Reproduce

ColorFiltered(
  colorFilter: ColorFilter.mode(
    Colors.red,
    BlendMode.dst, // or BlendMode.dstIn
  ),
  child: Text('Hello World'),
),
Test all modes
import 'package:flutter/material.dart';

void main() {
  runApp(const MaterialApp(
    home: MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int index = 0;

  @override
  Widget build(BuildContext context) => Scaffold(
        floatingActionButton: FloatingActionButton(
          onPressed: () => setState(() {
            index = (index + 1) % BlendMode.values.length;
            // if (BlendMode.values[index] == BlendMode.dst || BlendMode.values[index] == BlendMode.dstIn) {
            //   index = (index + 1) % BlendMode.values.length;
            // }
          }),
        ),
        appBar: AppBar(
          title: Text(BlendMode.values[index].toString()),
        ),
        body: Center(
          child: ColorFiltered(
            colorFilter: ColorFilter.mode(
              Colors.red,
              BlendMode.values[index],
            ),
            child: const Text('Hello World'),
          ),
        ),
      );
}

Expected results:

The text should be rendered without any change to it

Actual results:

The render step of the application fails catastrophically with the following error (Other than that, the application runs still fine):

══╡ EXCEPTION CAUGHT BY SCHEDULER LIBRARY ╞═════════════════════════════════════════════════════════
The following ArgumentError was thrown during a scheduler callback:
Invalid argument(s): Invalid parameters for blend mode ColorFilter
When the exception was thrown, this was the stack:
Stack
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 266:49      throw_
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/canvaskit/color_filter.dart 103:7                              [_initRawColorFilter]
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/canvaskit/color_filter.dart 23:48                              createDefault
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/canvaskit/skia_object_cache.dart 222:41                        new
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/canvaskit/color_filter.dart 17:3                               new
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/canvaskit/painting.dart 213:31                                 set colorFilter
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/canvaskit/layer.dart 568:10                                    paint
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/canvaskit/layer.dart 141:14                                    paintChildren
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/canvaskit/layer.dart 368:5                                     paint
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/canvaskit/layer.dart 141:14                                    paintChildren
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/canvaskit/layer.dart 368:5                                     paint
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/canvaskit/layer.dart 141:14                                    paintChildren
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/canvaskit/layer.dart 368:5                                     paint
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/canvaskit/layer.dart 141:14                                    paintChildren
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/canvaskit/layer.dart 154:5                                     paint
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/canvaskit/layer_tree.dart 54:17                                paint
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/canvaskit/layer_tree.dart 97:16                                <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/profiler.dart 34:18                                            timeAction
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/canvaskit/layer_tree.dart 96:5                                 raster
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/canvaskit/rasterizer.dart 33:22                                draw
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/canvaskit/renderer.dart 349:16                                 renderScene
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/platform_dispatcher.dart 645:14                                render
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/ui/window.dart 107:50                                                         render
packages/flutter/src/rendering/view.dart 240:15                                                                                compositeFrame
packages/flutter/src/rendering/binding.dart 520:18                                                                             drawFrame
packages/flutter/src/widgets/binding.dart 865:13                                                                               drawFrame
packages/flutter/src/rendering/binding.dart 381:5                                                                              [_handlePersistentFrameCallback]
packages/flutter/src/scheduler/binding.dart 1289:15                                                                            [_invokeFrameCallback]
packages/flutter/src/scheduler/binding.dart 1218:9                                                                             handleDrawFrame
packages/flutter/src/scheduler/binding.dart 1076:5                                                                             [_handleDrawFrame]
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/platform_dispatcher.dart 1168:13                               invoke
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/platform_dispatcher.dart 218:5                                 invokeOnDrawFrame
C:/b/s/w/ir/cache/builder/src/out/host_debug/lib/_engine/engine/initialization.dart 190:45                                     <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 367:37  _checkAndCall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 372:39  dcall
Flutter doctor
[√] Flutter (Channel stable, 3.7.8, on Microsoft Windows [Version 10.0.19045.2728], locale de-DE)
    • Flutter version 3.7.8 on channel stable at [...]
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 90c64ed42b (6 days ago), 2023-03-21 11:27:08 -0500
    • Engine revision 9aa7816315
    • Dart version 2.19.5
    • DevTools version 2.20.1

[X] Windows Version (Unable to confirm if installed Windows version is 10 or greater)

[√] Android toolchain - develop for Android devices (Android SDK version 31.0.0)     
    • Android SDK at [...]
    • Platform android-31, build-tools 31.0.0
    • Java binary at: C:\Program Files\Android\Android Studio\jre\bin\java
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)
    • All Android licenses accepted.

[√] Chrome - develop for the web
    • Chrome at C:\Program Files\Google\Chrome\Application\chrome.exe

[√] Visual Studio - develop for Windows (Visual Studio Professional 2022 17.4.4)     
    • Visual Studio at C:\Program Files\Microsoft Visual Studio\2022\Professional    
    • Visual Studio Professional 2022 version 17.4.33213.308
    • Windows 10 SDK version 10.0.22000.0

[√] Android Studio (version 2020.3)
    • Android Studio at C:\Program Files\Android\Android Studio
    • Flutter plugin can be installed from:
       https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
       https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.10+0-b96-7249189)

[√] VS Code (version 1.76.2)
    • VS Code at [...]
    • Flutter extension version 3.60.0

[√] Connected device (3 available)
    • Windows (desktop) • windows • windows-x64    • Microsoft Windows [Version 10.0.19045.2728]
    • Chrome (web)      • chrome  • web-javascript • Google Chrome 111.0.5563.111
    • Edge (web)        • edge    • web-javascript • Microsoft Edge 111.0.1661.54

[√] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

Metadata

Metadata

Assignees

No one assigned

    Labels

    P2Important issues not at the top of the work liste: web_canvaskitCanvasKit (a.k.a. Skia-on-WebGL) rendering backend for Webengineflutter/engine related. See also e: labels.found in release: 3.7Found to occur in 3.7has reproducible stepsThe issue has been confirmed reproducible and is ready to work onplatform-webWeb applications specificallyr: fixedIssue is closed as already fixed in a newer versionteam-webOwned by Web platform teamtriaged-webTriaged by Web platform team

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions