Flutter: Downwards curved custom appbar with ClipPath

Issue

Hey I have a custom Appbar and I want it to look like this:

mockup

So far I have successfuly created a custom app bar and clipped it with ClipPath to get a special form:

return ClipPath(
  clipper: WaveClip(),
  child: PreferredSize(
    preferredSize: preferredSize,
    child: Container(
      color: getAppBarColor(),
      child: Column(
        ...
      ),
    ),
  ),
);

But I have failed to create this exact app bar. My clip form looks like this:

class WaveClip extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double height = size.height;
    double width = size.width;
    double curveHeight = size.height / 2;
    var p = Path();
    p.lineTo(0, height - curveHeight);
    p.quadraticBezierTo(width / 4, height, width/2, height - curveHeight);
    p.lineTo(width, 0);
    p.close();
    return p;
  }
...

This results in some ugly wave like appbar. Is there any online tool that creates ClipPaths for me? I don’t really want to have to bother with mathemical functions to create custom shapes 😅 If not can anyone help me out with this? Thanks.

Solution

While using CustomClipper, you can follow this

class WaveClip extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    double curveHeight = size.height / 2;
    var p = Path()
      ..lineTo(0, size.height)
      ..quadraticBezierTo(0, curveHeight, curveHeight, curveHeight)
      ..lineTo(size.width - curveHeight, curveHeight)
      ..quadraticBezierTo(size.width, curveHeight, size.width, size.height)
      ..lineTo(size.width, 0);

    return p;
  }

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

And use

ClipPath(
  clipper: WaveClip(),
  child: Container(
    height: 200,
    padding: EdgeInsets.all(24),
    alignment: Alignment(0, -.5),
    color: Colors.amber,
    child: Text("sdsdsd"),
  ),
),

enter image description here

You can check more about cubic-bezier-curves-with-svg-paths and also check bezier.method.ac site.

Answered By – Yeasin Sheikh

Answer Checked By – Pedro (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.