Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to code rectangle+ellipse shape in Flutter

Shape

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?

like image 300
vendrick Avatar asked Oct 22 '25 14:10

vendrick


1 Answers

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;
  }
}
like image 105
RaSha Avatar answered Oct 25 '25 06:10

RaSha