Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flutter mask a circle into a container

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: enter image description here

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?

like image 608
Fabrizio Avatar asked Dec 05 '18 19:12

Fabrizio


People also ask

How do you give a circular shape to a container in flutter?

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.

How do you cut the circle out of the container in flutter?

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.

How do you clip containers in flutter?

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.


2 Answers

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.

like image 190
rmtmckenzie Avatar answered Sep 23 '22 08:09

rmtmckenzie


ClipRRect worked best for me.

See reference video: https://www.youtube.com/watch?v=eI43jkQkrvs&vl=en

ClipRRect(
  borderRadius: BorderRadius.cirular(10),
  child: myContainerWithCircleWidget,
);
like image 36
Travis M. Avatar answered Sep 24 '22 08:09

Travis M.