I am new to flutter and bumped into this problem of adding images to shapes in flutter. I have created the custom shape but I am not able to insert image into it. Here is what I want to achieve : A picture inside a custom shape
I tried giving Image as the child of CustomPainter but still no good results.
Can anyone suggest a good approach?
Like Mindhun MP wrote you need to use a custom clipper. Here is an example clipping the Container:
ClipPath(
clipper: _CustomClipper(),
child: Container(...),
);
Your case should be similar to mine so check out quadraticBezierTo function. My example:
class _CustomClipper extends CustomClipper<Path> {
@override
Path getClip(Size size) {
final double heightDelta = size.height / 2.2;
return Path()
..addRect(
Rect.fromLTWH(0, heightDelta, size.width, size.height - heightDelta))
..moveTo(0, heightDelta)
..quadraticBezierTo(
size.width / 2,
heightDelta - size.width / 2,
size.width,
heightDelta,
);
}
@override
bool shouldReclip(CustomClipper<Path> oldClipper) => true;
}
Also here is a great article that explains more about Paths in Flutter.