I want to make an effect as shown below, I have added a Card and a Container in a Stack to show the upper badge. But I am not sure what or which widget to use for that upper left corner of the badge.

Can anyone guide me on how to achieve that effect.
My current state:

use a CustomPaint for the triangle part and composite with your text in a Row
class TrianglePainter extends CustomPainter {
@override
void paint(Canvas canvas, Size size) {
Paint paint = Paint()
..color = Colors.grey
..strokeWidth = 2.0;
Path path = Path();
path.moveTo(0.0, size.height);
path.lineTo(size.width, 0.0);
path.lineTo(size.width, size.height);
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) {
return false;
}
}
and in your Row
Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 8.0,
width: 5.0,
child: CustomPaint(
painter: TrianglePainter(),
),
),
Container(
decoration: BoxDecoration(
color: Colors.red,
borderRadius: BorderRadius.only(
topRight: Radius.circular(6.0),
bottomLeft: Radius.circular(6.0))),
width: 120.0,
height: 30.0,
child: Center(
child: Text(
'Customer Replay',
style: TextStyle(color: Colors.white),
),
),
),
],
),

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With