[英]How to create a custom container with rounded edges in flutter?
I am trying to create a custom container with round edges but not able to make the corners round.我正在尝试创建一个具有圆形边缘但无法使角变圆的自定义容器。 I just want to make the corners of green container round.我只想把绿色容器的角弄圆。
class MyPainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
var paint = Paint()
..color = Colors.green.withOpacity(0.8)
..strokeWidth = 5
..strokeCap = StrokeCap.round;
final shapeBounds = Rect.fromLTRB(0, 0, size.width, size.height);
final path = Path()
..moveTo(shapeBounds.left + 10, shapeBounds.top) //3
..lineTo(shapeBounds.bottomLeft.dx + 10,shapeBounds.bottomLeft.dy)
..lineTo(shapeBounds.bottomRight.dx,shapeBounds.bottomRight.dy - size.height * 0.12)
..lineTo(shapeBounds.topRight.dx - 20,
shapeBounds.topRight.dy + size.height * 0.12) //7
..close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
// TODO: implement shouldRepaint
return false;
}
}
You can use ClipPath .您可以使用ClipPath 。 Use a Custom Clipper in it.在其中使用自定义剪辑器。 In the Custom Clipper, while drawing the path use quadraticBezierTo.在 Custom Clipper 中,绘制路径时使用quadraticBezierTo。
class MyContainer extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ClipPath(
clipper: MyClipper(),
child: Container(
child: Text("Dummy Text"),
alignment: Alignment.center,
color: Colors.green,
width: 200,
height: 200,
),
);
}
}
class MyClipper extends CustomClipper<Path> {
Path getClip(Size size) {
final path = Path();
path
..lineTo(0.0, size.height * 0.1)
..quadraticBezierTo(0, 0, size.width * 0.1, 0)
..lineTo(size.width * 0.8, size.height * 0.12)
..quadraticBezierTo(size.width * 0.9, size.height * 0.15,
size.width * 0.9, size.height * 0.2)
..lineTo(size.width, size.height * 0.9)
..quadraticBezierTo(
size.width, size.height, size.width * 0.9, size.height)
..lineTo(size.width * 0.2, size.height * 0.9)
..quadraticBezierTo(size.width * 0.1, size.height * 0.9, size.width * 0.1,
size.height * 0.8)
..close();
return path;
}
@override
bool shouldReclip(CustomClipper oldClipper) {
return false;
}
}
Rather than using Rect
which gives you a normal rectangle use RRect
which will give the desired rounded rectangle, comment if you need a demo code.与其使用为您提供普通矩形的Rect
,不如使用RRect
来提供所需的圆角矩形,如果您需要演示代码,请发表评论。
if you want a rounded edge in all corners.如果你想在所有角落都有一个圆润的边缘。
Container(
decoration:BoxDecoration(
borderRadius:BorderRadius.circular(double radius)
)
)
if you want a rounded edge in a particular corner.如果你想在一个特定的角落有一个圆润的边缘。
Container(
decoration:BoxDecoration(
borderRadius:BorderRadius.only(
topLeft:Radius.circular()
topRight :Radius.circular()
bottomLeft :Radius.circular()
bottomRight :Radius.circular()
)
)
)
For more details check out this link: https://api.flutter.dev/flutter/painting/BorderRadius-class.html有关更多详细信息,请查看此链接: https://api.flutter.dev/flutter/painting/BorderRadius-class.html
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.