Этот приведенный ниже код может создать кастом path, и если на topLeft и topRight нет кривых, не могли бы вы помочь мне, как мне это сделать?
мне нужно сделать то же самое, что и на этом снимке экрана:
class CurvedPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = DV.$light
..style = PaintingStyle.fill;
final path = Path()
..moveTo(0, size.height * 0.7)
..quadraticBezierTo(size.width * 0.25, size.height * 0.8, size.width * 0.4, size.height * 0.6)
..quadraticBezierTo(size.width * 0.65, size.height * 0.3, size.width, size.height * 0.6)
..lineTo(size.width, 0)
..lineTo(0, 0);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
Чтобы создать собственный путь с прямыми линиями в углах topLeft и topRight вместо кривых, вы можете изменить путь, определенный вами в классе CurvedPainter.
class CustomPathPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = Colors.lightBlue
..style = PaintingStyle.fill;
final path = Path()
..moveTo(0, size.height * 0.7)
..lineTo(size.width * 0.25, size.height * 0.7) // Top-left corner
..lineTo(size.width * 0.4, size.height * 0.6)
..quadraticBezierTo(size.width * 0.65, size.height * 0.3, size.width, size.height * 0.6)
..lineTo(size.width, 0)
..lineTo(0, 0);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
Чтобы добавить закругленные углы в правом верхнем и левом верхнем углу, я рекомендую вам использовать arcToPoint:
Вот как вы можете его использовать:
class CurvedPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
final paint = Paint()
..color = DV.$light
..style = PaintingStyle.fill;
final path = Path()
..moveTo(40, 0)
..arcToPoint(
const Offset(0, 40),
radius: const Radius.circular(40),
clockwise: false,
)
..lineTo(0, size.height * 0.7)
..quadraticBezierTo(size.width * 0.25, size.height * 0.8, size.width * 0.4, size.height * 0.6)
..quadraticBezierTo(size.width * 0.65, size.height * 0.3, size.width, size.height * 0.6)
..lineTo(size.width, 40)
..arcToPoint(
Offset(size.width - 40, 0),
radius: const Radius.circular(40),
clockwise: false,
)
..lineTo(40, 0)
..close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}