Reputation: 105
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.
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
Reputation: 742
Try wrapping your canvas in ClipRRect
.
ClipRRect(
borderRadius: BorderRadius.circular(10),
child: //your canvas
),
)
Upvotes: 1