How can I make such clip circles in flutter?

Question

I want to do the same thing.Firstly I did it with stack widget.However the result is not desired.I want to make these circles transparent.How can I do it?

I used custom_clippers 2.0.0 package.However I could not find the same pattern inside of this package.

Answer 1

I think the ClipPath is the thing you need.

Here is an exemple that should gives you similar result using:

import 'package:flutter/cupertino.dart';



class MyClipper extends CustomClipper<Path> {
  MyClipper({this.position, this.holeRadius = 16});

  double? position;
  final double holeRadius;

  @override
  Path getClip(Size size) {
    final path = Path()
      ..moveTo(0, 0)
      ..lineTo(size.width, 0.0)
      ..lineTo(size.width, position! - holeRadius)
      ..arcToPoint(
        Offset(size.width, position!),
        clockwise: false,
        radius: const Radius.circular(1),
      )
      ..lineTo(size.width, size.height)
      ..lineTo(0, size.height)
      ..lineTo(0, position!)
      ..arcToPoint(
        Offset(0, position! - holeRadius),
        clockwise: false,
        radius: const Radius.circular(1),
      );

    path.lineTo(0.0, size.height);

    path.close();
    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) => oldClipper != this;
}

And you can use it like following:

ClipPath(
    clipper: MyClipper(position: 50,holeRadius: 20),
    child: Container(
    height: 200,
    color: Colors.green,
    ),
   )

Result:

It is a very minimal exemple, you can modify it to achieve your result.