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.
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.