Flutter - Draw down facing Arc

Question

I need to draw something like this:

I tried doing it by creating a CustomClipper<Path> and using it in a ClipPath()

This is my code:

class ArcBackground extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return ClipPath(
      child: Container(
        width: double.infinity,
        height: 400.0,
        color: Colors.orange,
      ),
      clipper: RoundedClipper(),
    );
  }
}

class RoundedClipper extends CustomClipper<Path> {
  @override
  Path getClip(Size size) {
    var path = Path();
    path.lineTo(0.0, size.height);
    path.quadraticBezierTo(
      size.width / 2, 
      size.height - 100, 
      size.width, 
      size.height
    );
    path.lineTo(size.width, 0.0);
    path.close();
    return path;
  }

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

This code gives me the following output:

As you can see the arc points up because I set the quadraticaBezierTo() y1 property to size.height - 100, I was expecting I could have the arc pointing down by having the y1 property to be size.height + 100 but it didn't work.

How can I achieve a down pointing Arc?

Answer 1

Would this work for you?

@override
Path getClip(Size size) {
  var path = Path();
  path.lineTo(0.0, size.height-100);
  path.quadraticBezierTo(
    size.width / 2, 
    size.height,
    size.width,
    size.height - 100
  );
  path.lineTo(size.width, 0.0);
  path.close();
  return path;
}