I want to paint a triangle with a text, with top-right absolute position on a card
for example:
I almost achieve this but 1. I want to know if there is a simple approach 2. the text is not exactly centered...
This is my code: (I use paint for the triangle and rotate for the text)
class ShapesPainter extends CustomPainter {
final Color color;
ShapesPainter(this.color);
@override
void paint(Canvas canvas, Size size) {
final paint = Paint();
paint.color = color;
// create a path
var path = Path();
path.moveTo(size.width, 0);
path.lineTo(size.width, size.height);
path.lineTo(size.width - size.height, 0);
// close the path to form a bounded shape
path.close();
canvas.drawPath(path, paint);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
}
class EventStatusIndicator extends StatelessWidget{
final E.EventStatus eventStatus;
EventStatusIndicator(this.eventStatus);
Widget build(ct) {
return Stack(
children: <Widget>[
CustomPaint(
painter: ShapesPainter(eventStatusMap[this.eventStatus].color),
child: Container(
height: 100,
),
),
Align (alignment: Alignment.topRight, child: Container(
margin: EdgeInsets.fromLTRB(0, 30, 0, 0),
height: 60.0,
width: 90,
child: Transform.rotate(angle: math.pi / 4, child:
Text(eventStatusMap[this.eventStatus].display, textAlign: TextAlign.center, style: TextStyle(color: eventStatusIndicatorColor, fontSize: 17)))
))
],
);
}
}
My results:
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