How to create container like this, bottom border must be curved
You can make a CustomPainter to draw the shape:
CustomPainter
class MyPainter extends CustomPainter { final Color color; final double strokeWidth; MyPainter({this.color = Colors.black, this.strokeWidth = 5.0}); @override void paint(Canvas canvas, Size size) { final paint = Paint() ..color = color ..style = PaintingStyle.stroke ..strokeWidth = strokeWidth; final path = Path() ..lineTo(size.width, 0) ..lineTo(size.width, size.height) ..moveTo(0, 0) ..lineTo(0, size.height) ..moveTo(0, size.height) ..quadraticBezierTo(size.width / 2, 0, size.width, size.height); canvas.drawPath(path, paint); } @override bool shouldRepaint(CustomPainter oldDelegate) => false; }
Usage:
CustomPaint( painter: MyPainter(strokeWidth: 4), child: Container( width: 300, height: 50, ), )
Result:
Note: Instead of quadricBezierTo you can use arcTo:
quadricBezierTo
arcTo
(remember to import dart:math to use pi)
dart:math
pi
... final path = Path() ..lineTo(size.width, 0) ..lineTo(size.width, size.height) ..moveTo(0, 0) ..lineTo(0, size.height) ..moveTo(0, size.height) ..arcTo(Rect.fromLTWH(0, size.height / 2, size.width, size.height), -pi, pi, false); // arc instead of quadricBezier ...
You can make a
CustomPainter
to draw the shape:Usage:
Result:
Note: Instead of
quadricBezierTo
you can usearcTo
:(remember to import
dart:math
to usepi
)Result: