Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

flutter - paint a top-right triangle with a text on a card

Tags:

I want to paint a triangle with a text, with top-right absolute position on a card

for example:

enter image description here

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: enter image description here