CODEWITHSUNDEEP
flutterdart
Alireza Beitari
Alireza Beitari

Reputation: 516

Make a half circle with ClipPath

I want to build this

snap

I used a ClipPath like this:

ClipPath(
  clipper: HeaderClipper(),
  child: Image.asset(
    "assets/images/stores/bg1.jpg",
    fit: BoxFit.cover,
  ),
),

And this is my HeaderClipper class:

class HeaderClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    final path = Path();

    final heightFactor = 5 / 8;

    path.lineTo(0, size.height * heightFactor);

    path.quadraticBezierTo(
      50,
      size.height,
      size.width / 4,
      size.height,
    );

    path.lineTo(size.width * (3 / 4), size.height);

    path.quadraticBezierTo(
      size.width - 50,
      size.height,
      size.width,
      size.height * heightFactor,
    );

    path.lineTo(size.width, 0);

    path.close();

    return path;
  }

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

But I don't know why it doesn't look like the picture. Can you help me what parameters should I change or should I use another method instead of quadraticBezierTo?

Upvotes: 1

Views: 1064

Answers (1)

anmol.majhail
anmol.majhail

Reputation: 51206

You can simply achieve it using - ClipRRect

Code:

ClipRRect(
      borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(140.0),
          bottomRight: Radius.circular(140.0)),
      child: Container(
        child:
            Image(image: NetworkImage('https://placeimg.com/640/480/people')),
      ),
    )

enter image description here

Upvotes: 2

Related Questions