How to add images to any shapes in flutter?


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:

      clipper: _CustomClipper(),
      child: Container(...),

Your case should be similar to mine so check out quadraticBezierTo function.
My example:

class _CustomClipper extends CustomClipper<Path> {
  Path getClip(Size size) {
    final double heightDelta = size.height / 2.2;

    return Path()
          Rect.fromLTWH(0, heightDelta, size.width, size.height - heightDelta))
      ..moveTo(0, heightDelta)
        size.width / 2,
        heightDelta - size.width / 2,

  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)

Leave a Reply

Your email address will not be published. Required fields are marked *