Flutter Container BorderRadius

Question

I need to create the border radius of the container like this picture

I tried various ways but my result like this

My code for border radius

Container(
  decoration: const BoxDecoration(
    borderRadius: BorderRadius.only(
      bottomLeft: Radius.circular(24),
      bottomRight: Radius.circular(24),
    ),
    image: DecorationImage(
      image: AssetImage(
        'assets/images/gold-bg.png',
      ),
      fit: BoxFit.fitWidth,
    ),
  ),
  height: 200,
  alignment: Alignment.topCenter,
),

Is that possible to add borderradius like this

Answer 1

You can achieve this with a CustomClipper

Check this out:

1. Create the CustomClipper

class NewClipper extends CustomClipper<Path> {
  final double heightFactor;

  NewClipper({this.heightFactor = 90.0});
  @override
  Path getClip(Size size) {
    Path path = Path();
    path.lineTo(0, size.height - heightFactor);
    path.quadraticBezierTo(
      size.width / 2,
      size.height,
      size.width,
      size.height - heightFactor,
    );
    path.lineTo(size.width, 0);
    return path;
  }

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

2. Use it like so:

ClipPath(
  clipper: NewClipper(),
  child: Container(
    width: 500,
    height: 400,
    color: Colors.pink,
  ),
)

The output: