Mask/crop an image

Question

What is the best approach to display a cropped/masked image in Flutter?

Lets say I have one image with a mask (eg. an irregular star shape with transparent background) and the other image which I want to mask with this star, so that only the part inside the star of original image would be rendered.

I'm aiming for something like PorterDuffXfermode on Android (similar question here - Android how to apply mask on ImageView?).

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

Answer 1

I would just paint it using a CustomPainter, setting the Paint.BlendMode on the Paint you pass to the method when you paint 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.