Home > Enterprise >  Flutter: CurveClipper with Container
Flutter: CurveClipper with Container

Time:10-15

I'm trying to curve a container using this code:

class CurveClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    int curveHeight = 40;
    Offset controlPoint = Offset(size.width / 2, size.height   curveHeight);
    Offset endPoint = Offset(size.width, size.height - curveHeight);

    Path path = Path()
      ..lineTo(0, size.height - curveHeight)
      ..quadraticBezierTo(controlPoint.dx, controlPoint.dy, endPoint.dx, endPoint.dy)
      ..lineTo(size.width, 0)
      ..close();

    return path;
  }

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

Usage:

Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // The title text which will be shown on the action bar
        title: Text(title),
      ),
      body: Container(
        child: ClipPath(
          clipper: CurveClipper(),
          child: Container(
            color: Colors.red,
            height: 200.0,
          ),
        ),
      ),
    );
  }

However, this gets me this: This is the screenshot of the output

  • Related