I have created class called CustomColorFilter by extending ColorFilter class

class CustomColorFilter extends ColorFilter {
  const CustomColorFilter(this.color, {this.blendMode = BlendMode.srcIn}) : super.mode(color, blendMode);
  final Color color;
  final BlendMode blendMode;
}

This code working fine when i'm running with Android and iOS platform. But throwing error while running with Web platform.

Error: Superclass has no constructor named 'ColorFilter.mode'
const CustomColorFilter(this.color, {this.blendMode = BlendMode.srcIn}) : super.mode(color, blendMode);
                                                                          ^^^^^

I have created class called CustomColorFilter by extending ColorFilter class

class CustomColorFilter extends ColorFilter {
  const CustomColorFilter(this.color, {this.blendMode = BlendMode.srcIn}) : super.mode(color, blendMode);
  final Color color;
  final BlendMode blendMode;
}

This code working fine when i'm running with Android and iOS platform. But throwing error while running with Web platform.

Error: Superclass has no constructor named 'ColorFilter.mode'
const CustomColorFilter(this.color, {this.blendMode = BlendMode.srcIn}) : super.mode(color, blendMode);
                                                                          ^^^^^

• flutter
• dart
• colorfilter
• flutter-ui

• I tested it and got the same error. Interestingly, just calling the constructor directly like ColorFilter.mode(Colors.green, BlendMode.srcIn) for example works fine. I wonder if it's a bug. – Ivo Commented Mar 11 at 14:40
• 1 @mmcdon20 dart:ui is a Flutter package, so issues should be taken to the Flutter repository. – Abion47 Commented Mar 11 at 19:02

1 Answer 1

The reason this isn't working is because the ColorFilter type is defined differently in the native version of dart:ui versus the web version.

(flutter/ui)

class ColorFilter implements ImageFilter {
  const ColorFilter.mode(Color color, BlendMode blendMode)
    : _color = color,
      _blendMode = blendMode,
      _matrix = null,
      _type = _kTypeMode;

  ...
}

(flutter/web_ui)

class ColorFilter implements ImageFilter {
  const factory ColorFilter.mode(Color color, BlendMode blendMode) 
    = engine.EngineColorFilter.mode;

  ...
}

As you can see, in the flutter/ui version, ColorFilter.mode is a regular const constructor, but in the flutter/web_ui version, it is a factory constructor. You cannot call a factory constructor from an initializer with super because the factory constructor might return an instance of a completely different subclass. In fact, this is exactly what happens here, as ColorFilter.mode in flutter/web_ui returns an instance of EngineColorFilter which has nothing to do with your CustomColorFilter.

This is certainly an inconsistency in the Flutter SDK, so it should probably be brought up in the Flutter SDK Github Issues (not the Dart SDK repository, as dart:ui is a Flutter package). But at the same time, I'm not sure what you're trying to accomplish by creating a custom ColorFilter. Color filters are generally handled by the Flutter internal engine and their implementations are platform-specific, and as such, they aren't really meant to be extended by user code. (They should probably be marked as sealed, to be honest.)

If your goal is just to be able to access the color and blendMode properties, I'd recommend making a wrapper class instead of a subclass:

class ColorFilterWrapper {
  ColorFilterWrapper(this.color, {this.blendMode = BlendMode.srcIn}) 
    : colorFilter = ColorFilter.mode(color, blendMode);
  
  final Color color;
  final BlendMode blendMode;
  final ColorFilter colorFilter;
}