Flutter Web中继承ColorFilter时出现‘父类无ColorFilter.mode构造函数’错误

问题背景 #

自定义继承ColorFilter的类在Android、iOS平台运行正常，但Web平台抛出错误：

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

Web平台错误信息：

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

问题根源 #

ColorFilter.mode是工厂构造函数，Dart语法规则禁止子类通过super调用父类的工厂构造。移动端因引擎兼容处理未触发错误，Web平台严格执行语法规则导致报错。

修复方案 #

方案1：封装而非继承（推荐） #

放弃继承ColorFilter，改为封装一个持有ColorFilter实例的类，既安全又符合Dart设计规范：

class CustomColorFilter {
  final Color color;
  final BlendMode blendMode;
  final ColorFilter _innerFilter;

  const CustomColorFilter(this.color, {this.blendMode = BlendMode.srcIn})
      : _innerFilter = ColorFilter.mode(color, blendMode);

  // 对外提供可用的ColorFilter实例
  ColorFilter get toFilter => _innerFilter;
}

使用时通过customFilter.toFilter获取可直接使用的ColorFilter对象。

方案2：调用私有构造（不推荐） #

若必须保持继承关系，可调用ColorFilter的私有构造，但该方式依赖Flutter内部实现，后续版本存在变更风险：

class CustomColorFilter extends ColorFilter {
  final Color color;
  final BlendMode blendMode;

  const CustomColorFilter(this.color, {this.blendMode = BlendMode.srcIn})
      : super._();

  // 可重写父类方法实现自定义逻辑
  @override
  ColorFilter invert() {
    return ColorFilter.mode(color, blendMode);
  }
}

内容的提问来源于stack exchange，提问作者MSARKrish