How achieve given UI using custom clipper in flutter

I want to achieve a bottom clip to a container similar to the below ui and have partially achieved it, However the spacing at the last position is not consistent according to the device width, Either the circle is clipped or extra straight line is added so the UI doesn't look symmetric, Is there any suggestions how can I calculate the spacing and set it so the UI is symmetric.

I have tried using this code but could achieve a partial result.

import 'package:flutter/material.dart';

class CardClipper extends CustomClipper<Path> {
  CardClipper();

  @override
  Path getClip(Size size) {
    final path = Path()
      ..lineTo(0, size.height)
      ..lineTo(size.width, size.height)
      ..lineTo(size.width, 0)
      ..lineTo(0, 0);

    const radius = 11.0;
    double lineOffset = 22;
    const diameter = 2 * radius;

    final holePath = Path();

       var curXPos = 0.0;
       while (curXPos < size.width && ((curXPos + diameter) < size.width)) {
         final dx = lineOffset + curXPos;
         holePath.addOval(
           Rect.fromCircle(
             center: Offset(dx, height),
             radius: radius,
           ),
         );
         curXPos = dx + lineOffset / 2;
       }

    return Path.combine(PathOperation.difference, path, holePath);
  }

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