Invisible part of container

Question

I try to make invisible part of container, a circle that is cut out of it.

That's my goal: https://www.autodraw.com/share/FU2LW3XS7H18

This is my container:

Container(
      color: Colors.white,
        height: size.height/2 - size.width/2,
        width: size.width,
    );

And the circle that I want to cut out:

child: GestureDetector(
            child: Container(
                child: Opacity(opacity: 1),
                width: 50,
                height: 50,
                decoration: ShapeDecoration(
                    shape: new CircleBorder(
                        side: new BorderSide(
                            width: 10.0, color: Colors.black)))))

And this is what I tried but didn't work:

Container(
      color: Colors.white,
        height: size.height/2 - size.width/2,
        width: size.width,
        child: Opacity(opacity: 1, child: GestureDetector(
            child: Container(
                width: 50,
                height: 50,
                decoration: ShapeDecoration(
                    shape: new CircleBorder(
                        side: new BorderSide(
                            width: 10.0, color: Colors.black)))))),
    );

score 0 · Answer 1 · answered Jun 12 '20 at 00:18

You can use CustomClipper to achieve this look. fillType = PathFillType.evenOdd is required.

class InvertedClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    return Path()
      ..addRect(Rect.fromLTWH(0, 0, size.width, size.height))
      ..addOval(Rect.fromCircle(
          center: Offset(size.width / 2, size.height / 2),
          radius: 50))
      ..fillType = PathFillType.evenOdd;
  }

  @override
  bool shouldReclip(CustomClipper<Path> oldClipper) => false;
}

You will need to adjust values for your needs.

Please note that this will not work on web. This is a known bug reported here.

In the widget tree use ClipPath to use InvertedClipper. Here's implementation:

ClipPath(
  clipper: InvertedClipper(),
  child: Container(
    color: Colors.red,
    height: 200
  ),
),

Source: https://stackoverflow.com/a/49396544/7616528

Invisible part of container

1 Answers1