Flutter TextPainter - center char inside circle

Viewed 477

I need to draw circle + one character inside circle. Character should be centered inside my circle, how do I do that? My code:

class CirclePainter extends CustomPainter {

  String text;
  
  @override
  void paint(Canvas canvas, Size size) {
    var paint1 = Paint()
      ..color = Color(Colors.blueGrey.value + 100*text.codeUnitAt(0))
      ..style = PaintingStyle.fill;

    canvas.drawCircle(Offset(0, 0), 20, paint1);

    TextSpan span = new TextSpan(
        text: text.toUpperCase(),
        style: TextStyle(
          fontFamily: AppTheme.fontName,
          fontWeight: FontWeight.w400,
          fontSize: 22,
          color: Colors.white,));

    TextPainter tp = new TextPainter(
        text: span,
        textAlign: TextAlign.center,
        textDirection: TextDirection.ltr);

    tp.layout(minWidth: 20, maxWidth: 20);


    tp.paint(canvas, Offset(-10.0, -10.0));
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

With my current approach still some letters are not correctly centered (horizontal and vertical directions) inside my circle. What is valid solution?

0 Answers
Related