I want to add a circle effect over a container, but I want the circle to not extend the dimensions of the container, but instead get clipped by it. This is what I'm trying to achieve:
As you can see the white circle naturally would extend the red container but instead, I'm trying to make it stay into the borders. How can I do it?
To display a Round Image in Flutter, you can use Container with BoxDecoration, and use BoxShape. circle for shape and provide the image for image property.
The simplest way to do this is to using an overlap and cliprect. The OverFlowBox allows the circle to draw outside the bounds of its parent, and then the cliprect cuts it back to the edge.
You can use CustomPaint to draw a round rectangle and ClipRect to only render its half to be a "notch." CustomPaintNotch paints a round rectangle at the edge of the top-center part of the Container widget. Since ClipRect was used, paint beyond the area won't be rendered. This will be the notch of the rectangle.
The simplest way to do this is to using an overlap and cliprect.
class OverlapSquare extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Container(
height: 200,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
color: Colors.red,
),
child: ClipRect(
clipBehavior: Clip.hardEdge,
child: OverflowBox(
maxHeight: 250,
maxWidth: 250,
child: Center(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
shape: BoxShape.circle,
),
),
),
),
),
);
}
}
The OverFlowBox allows the circle to draw outside the bounds of its parent, and then the cliprect cuts it back to the edge.
Just an FYI - on my device I'm getting a tiny red line at the top & bottom of the white circle. I'm fairly sure that's a recently-introduced bug in flutter as I'm also seeing something similar if I put a white border around the container. I've raised an issue on github for that.
ClipRRect worked best for me.
See reference video: https://www.youtube.com/watch?v=eI43jkQkrvs&vl=en
ClipRRect(
borderRadius: BorderRadius.cirular(10),
child: myContainerWithCircleWidget,
);
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With