title: flutter - paint a top-right triangle with a text on a card
body: <p>I want to paint a triangle with a text, with  top-right absolute position on a card</p>
  
  <p>for example:</p>
  
  <p><a href="https://i.stack.imgur.com/97fnq.png" rel="noreferrer"><img src="https://i.stack.imgur.com/97fnq.png" alt="enter image description here"></a></p>
  
  <p>I almost achieve this but
  1. I want to know if there is a simple approach
  2. the text is not exactly centered...</p>
  
  <p>This is my code: (I use paint for the triangle and rotate for the text)</p>
  
  <pre><code>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) =&gt; false;
  }
  
  class EventStatusIndicator  extends StatelessWidget{
    final E.EventStatus eventStatus;
  
  EventStatusIndicator(this.eventStatus);
  
    Widget build(ct) {
     return     Stack(
          children: &lt;Widget&gt;[
            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)))
  
          ))
  
          ],
        );
  
  
    }
  }
  </code></pre>
  
  <p>My results:
  <a href="https://i.stack.imgur.com/WQQDI.png" rel="noreferrer"><img src="https://i.stack.imgur.com/WQQDI.png" alt="enter image description here"></a></p>