How to create curve in container in flutter

Question

How to create curve in container like this

Answer 1

If you need to create a curve for the container that the profile picture lives on top of, your best bet would be to use a ClipPath with a custom clipper.

Something like this would do the trick:

ClipPath(
  clipper: CurveClipper(),
  child: Container(
    color: Colors.red,
    height: 200.0,
  ),
);

Our custom CurveClipper requires us to draw a path that includes a bézier curve, to get that curve shape at the bottom of our container:

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;
}