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;
}
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.