Custom clip path appbar flutter

Question

I want to create custom appbar shape as shown in below image. How we can do such shape using clippath?

Tried code:

class CustomAppBarShape extends CustomClipper<Path> {
  @override
  getClip(Size size) {
    double height = size.height;
    double width = size.width;
    var path = Path();
    path.lineTo(0, size.height);
    path.arcToPoint(Offset(size.width, size.height),
        radius: Radius.elliptical(30, 10),
    );
    path.lineTo(size.width, 0);
    path.close();

    return path;
  }

  @override
  bool shouldReclip(CustomClipper oldClipper) {
    return true;
  }
}

Answer 1

I created the desired AppBar shape by giving custom shape to the AppBar border, check out the live example here.

If you want to clip the AppBar you can use similar Path in the clipper too but I think giving custom shape to the border is better.

code for custom AppBar border shape:

class CustomAppBarShape extends ContinuousRectangleBorder {
   @override
  Path getOuterPath(Rect rect, {TextDirection? textDirection}) {
    double height = rect.height;
    double width = rect.width;
    var path = Path();
    path.lineTo(0, height + width * 0.1);
    path.arcToPoint(Offset(width * 0.1, height),
        radius: Radius.circular(width * 0.1),
    );
    path.lineTo(width * 0.9,  height);
    path.arcToPoint(Offset(width, height + width * 0.1),
        radius: Radius.circular(width * 0.1),
    );
    path.lineTo(width,  0);
    path.close();

    return path;
  }
}

Answer 2

if you still prefer to use clipper instead of custom shape, you can use my code below for clip image.

class BannerClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var height = size.height;
    var width = size.width;

    double radius = 20;

    Path path = Path()
      ..lineTo(0, height)
      ..arcToPoint(Offset(20, height - 20), radius: Radius.circular(radius))
      ..lineTo(width - 20, height - 20)
      ..arcToPoint(Offset(width, height), radius: Radius.circular(radius))
      ..lineTo(width, 0)
      ..close();

    return path;
  }

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