[英]How to code rectangle+ellipse shape in Flutter
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;
}
}
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;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.