Flutter ClipPath, 1 pixel black line visible from the bottom layer, how to remove it?

Question

I was trying to create a container with a small section clipped from the bottom right corner. To do that I used a stack, where I added a container with border-radius 20, and black color, then I placed another container with position right 0 & bottom 0, and somehow I managed to make the shape but unfortunately a small black line is visible from the previous layer, and I don't know how to remove it, I have tried everything from removing border to removing margin...

return Scaffold(
     backgroundColor: const Color.fromARGB(255, 245, 245, 245),
      body: SafeArea(
        child: Center(
          child: Stack(
            children: [
              Container(
                margin: EdgeInsets.all(0),
                height: 150,
                width: 350,
                decoration: const BoxDecoration(
                  color: Colors.black,
                  borderRadius: BorderRadius.all(
                    Radius.circular(20),
                  ),
                ),
              ),
              Positioned(
                right: 0,
                bottom: 0,
                child: ClipPath(
                  clipper: MyCustomCliper(),
                  child: Container(
                    color: const Color.fromARGB(255, 245, 245, 245),
                    height: 60,
                    width: 100,
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );

Code for ClipPath

class MyCustomCliper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    Path path = Path()
      ..moveTo(0, size.height)
      ..quadraticBezierTo(20, size.height, 20, 40)
      ..quadraticBezierTo(20, 20, 40, 20)
      ..lineTo(size.width - 20, 20)
      ..quadraticBezierTo(size.width, 20, size.width, 0)
      ..lineTo(size.width, size.height)
      ..close();

    return path;
  }

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

Please help, if anyone has encountered this issue.

score 1 · Accepted Answer · answered Mar 15 '23 at 11:25

I made the same shape not too long ago. Here is my code (not necessary the best way, since it was my 1st time writing a code for a Clip):

class MyClip extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double x = size.width, y = size.height;
    Path path = Path();
    const double ref = 12;
    path
      ..moveTo(0, ref)
      ..arcToPoint(const Offset(ref, 0), radius: const Radius.circular(12))
      ..lineTo(x - ref, 0)
      ..arcToPoint(Offset(x, ref), radius: const Radius.circular(12))
      ..lineTo(x, (y - y / 7) - ref)
      ..arcToPoint(Offset(x - ref, y - y / 7), radius: const Radius.circular(12))
      ..lineTo(x - x / 3.8, (y - y / 7))
      ..arcToPoint(Offset((x - x / 3.8) - ref, (y - y / 7) + ref), radius: const Radius.circular(12), clockwise: false)
      ..lineTo((x - x / 3.8) - ref, y - ref)
      ..arcToPoint(Offset((x - x / 3.8) - 24, y), radius: const Radius.circular(12))
      ..lineTo(ref, y)
      ..arcToPoint(Offset(0, y - ref), radius: const Radius.circular(12));

    return path;
  }

  @override
  bool shouldReclip(covariant CustomClipper oldClipper) => true;
}

I didn't use a Stack though.

Flutter ClipPath, 1 pixel black line visible from the bottom layer, how to remove it?

1 Answers1