flutterdartflutter-layoutflutter-webdart-webui

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?


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.