How to XOR two images in Flutter

Question

I have these two images

What I want to do is to xor them to get this image:

I have tried to do it using CustomPaint and setting BlendMode to XOR But it gives me a black screen

Here's the code I used:

class XorPainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) async {
    if (imageA != null && imageB != null) {
      canvas.drawImage(imageA, Offset.zero, Paint());
      canvas.save();
      canvas.drawImage(
          imageB, Offset.zero, Paint()..blendMode = BlendMode.xor);
      canvas.restore();
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }

For more information: see this

Answer 1

I believe its more of a a misconception of the BlendMode.xor, what they do is just like a regular xor truth table where every pixel is either 0 (transparent) if both of them are some color or unaffected where both overlap if one of them is transparent in that same area, because of that you will always get a transparent black square (unless for example you make the apple image with a transparent background, in which case the second image will have an empty space with the shape of the apple in the middle). I think what you really wanted was difference or exlusion to have that negated effect

class XorPainter extends CustomPainter {
  final ui.Image imageA;
  final ui.Image imageB;
  
  XorPainter(this.imageA, this.imageB);
  
  @override
  void paint(Canvas canvas, Size size) async {
    canvas.drawImage(imageA, Offset.zero, Paint());
    canvas.saveLayer(null, Paint()..blendMode = BlendMode.difference); // or BlendMode.exclusion
    canvas.drawImage(imageB, Offset.zero, Paint());
    canvas.restore();
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}