CODEWITHSUNDEEP
flutterdart
Varad Gauthankar
Varad Gauthankar

Reputation: 105

How to round the corners of canvas in flutter

I am looking to round the corners of an image drawn on the canvas.

My end result should look like this below image. An image with rounded corners and drop shadow, I have managed to add the drop shadow.

goal_image

Here's my painter code so far.

class ImagePainter extends CustomPainter {
  final ui.Image image;

  const ImagePainter(this.image);

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint();
    double shadowBlurRadius = 22.0;
    Color shadowColor = Colors.black38;

    //Adds a Drop Shadow
    canvas.drawPath(
      Path()
        ..addRect(Rect.fromPoints(
            Offset(0, 0), Offset(size.width + 15, size.height + 15))),
      Paint()
        ..color = shadowColor
        ..maskFilter = MaskFilter.blur(
            BlurStyle.normal, (shadowBlurRadius * 0.57735 + 0.5)),
    );

    //Draw Image
    canvas.drawImage(image, Offset.zero, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => false;
}

Upvotes: 1

Views: 1281

Answers (1)

krumpli
krumpli

Reputation: 742

Try wrapping your canvas in ClipRRect.

ClipRRect(
    borderRadius: BorderRadius.circular(10),
    child: //your canvas
    ),
)

Upvotes: 1

Related Questions