
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?
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;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With