How to code rectangle+ellipse shape in Flutter - flutter

Question

I'm trying to achieve shape in the shown image. I can't find out how to do this. Last thing I tried was:
Container(
height: 175,
decoration: BoxDecoration(
borderRadius: BorderRadius.vertical(
bottom: Radius.elliptical(175, 45),
),
),
)
How can I create this shape?

Answer 1

You can use custom painter:
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Container(
child: Container(
color: Colors.transparent,
height: 155,
width: 375,
child: CustomPaint(
painter: CurvePainter(),
),
),
);
}
}
class CurvePainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
var paint = Paint();
paint.color = Color(0XFF382b47);
paint.style = PaintingStyle.fill;
var path = Path();
path.moveTo(0, size.height * 0.26);
path.quadraticBezierTo(
size.width / 2, size.height, size.width, size.height * 0.26);
path.lineTo(size.width, 0);
path.lineTo(0, 0);
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}

Answer 2

View Image
If you want to add ovel shape on top borders:
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Transform(
alignment: Alignment.center,
transform: Matrix4.rotationX(math.pi),
child: Container(
color: Colors.red,
height: 120,
width: double.infinity,
child: CustomPaint(
painter: CurvePainter(),
),
),
),;
}
}
class CurvePainter extends CustomPainter {
#override
void paint(Canvas canvas, Size size) {
var paint = Paint();
paint.color = Color(0XFF382b47);
paint.style = PaintingStyle.fill;
var path = Path();
path.moveTo(0, size.height * 0.26);
path.quadraticBezierTo(
size.width / 2, size.height, size.width, size.height * 0.26);
path.lineTo(size.width, 0);
path.lineTo(0, 0);
canvas.drawPath(path, paint);
}
#override
bool shouldRepaint(CustomPainter oldDelegate) {
return true;
}
}