CODEWITHSUNDEEP
flutterdartflutter-layout
vendrick
vendrick

Reputation: 538

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?

Upvotes: 4

Views: 3209

Answers (2)

Prince
Prince

Reputation: 11

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;
  }
}

Upvotes: 1

RaSha
RaSha

Reputation: 1482

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;
  }
}

Upvotes: 5

Related Questions