How to add images to any shapes in flutter?

Issue

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?

Solution

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.

Answered By – oziem

Answer Checked By – Pedro (FlutterFixes Volunteer)