Flutter web - Alternative to canvas BlendMode

345 views Asked by At

I have an app in Flutter who use blend mode but it's very unstable on the web version even when I build with the command flutter build web --release --dart-define=FLUTTER_WEB_USE_SKIA=true, when we open the web page on mobile, it crashs.

On my page with canvas, I display a svg on background with a grey foreground and transparent rectangle to hightlight some part of the svg so I need to use BlendMode.

Here the code:

      Rect sourceRect = output.asRect(sourceSize, sourcePos);
      Rect destinationRect = input.asRect(destinationSize, destinationPos);

      canvas.drawColor(Color.fromRGBO(0, 0, 0, 0.5), BlendMode.dstATop);

      // Highlight used ports
      canvas.drawRect(sourceRect, Paint()..blendMode = BlendMode.clear);
      canvas.drawRect(destinationRect, Paint()..blendMode = BlendMode.clear);

      // Highlight options
      for (Option option in deviceLink.options) {
        canvas.drawRect(option.box.asRect(sourceSize, sourcePos),
            Paint()..blendMode = BlendMode.clear);
      }

I search an alternative to the BlendMode in canvas for my program.

0

There are 0 answers