Mask / crop image

Question

What is the best approach for displaying a cropped / masked image in Flutter?

Suppose I have one image with a mask (for example, an irregular star shape with a transparent background) and another image that I want to hide with this star, so that only a part inside the star of the original image will be displayed.

I am aiming for something like PorterDuffXfermode on Android (a similar question here is Android, how do I apply a mask to ImageView? ).

In the case of simple mask shapes, is the RenderClipOval way a good approach?

Answer 1

I would just draw it using CustomPainter by setting Paint.BlendMode to Paint, which you pass to the method when drawing the image.

See https://docs.flutter.io/flutter/dart-ui/Canvas/drawImageRect.html and https://docs.flutter.io/flutter/dart-ui/Paint/blendMode.html and https: // docs.flutter.io/flutter/widgets/CustomPaint-class.html .