How do you use a TextPainter to draw text?

Question

The documentation for CustomPainter's paint method says, "To paint text on a Canvas, use a TextPainter". So within my MyCustomPainter's paint method I have the following:

TextSpan span = new TextSpan(text: 'Yrfc');
TextPainter tp = new TextPainter(text: span, textAlign: TextAlign.left);
tp.layout();
tp.paint(canvas, new Offset(5.0, 5.0));

I've tried a variety of offsets (Offset.zero, Offset.infinite, new Offset(10.0, 10.0) but I never am able to see the text painted on the screen.

Answer 1

I found the answer as I was typing up this question but I've been wrestling with it for a while now, so posting in case it helps anyone else.

What solved it was changing the TextSpan line to:

TextSpan span = new TextSpan(style: new TextStyle(color: Colors.grey[600]), text: 'Yrfc');

Apparently it was either drawing the text invisibly or as white (background) color since I hadn't made my color choice explicit.

Answer 2

To paint in Flutter you use the CustomPaint widget. The CustomPaint widget takes a CustomPainter object as a parameter. In that class you have to override the paint method, which gives you a canvas that you can paint on. Here is the code to draw the text in the image above.

@override
void paint(Canvas canvas, Size size) {
  const textStyle = TextStyle(
    color: Colors.black,
    fontSize: 30,
  );
  const textSpan = TextSpan(
    text: 'Hello, world.',
    style: textStyle,
  );
  final textPainter = TextPainter(
    text: textSpan,
    textDirection: TextDirection.ltr,
  );
  textPainter.layout(
    minWidth: 0,
    maxWidth: size.width,
  );
  final xCenter = (size.width - textPainter.width) / 2;
  final yCenter = (size.height - textPainter.height) / 2;
  final offset = Offset(xCenter, yCenter);
  textPainter.paint(canvas, offset);
}

Notes:

• If you are using a white background, be sure to set the text color to some other color besides white, which is the default.
• Flutter makes an effort to not assume a text direction, so you need to set it explicitly. The abbreviation ltr stands for left-to-right, which languages like English use. The other option is rtl (right-to-left), which languages like Arabic and Hebrew use. This helps to reduce bugs when the code is used in language contexts that developers were not thinking about.

Context

Here is the main.dart code so that you can see it in context.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: HomeWidget(),
      ),
    );
  }
}

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: CustomPaint( //                       <-- CustomPaint widget
        size: Size(300, 300),
        painter: MyPainter(),
      ),
    );
  }
}

class MyPainter extends CustomPainter { //         <-- CustomPainter class
  @override
  void paint(Canvas canvas, Size size) {
    //                                             <-- Insert your painting code here.
  }
  
  @override
  bool shouldRepaint(CustomPainter old) {
    return false;
  }
}

See also

See this article for my fuller answer.

Answer 3

In the TextPainter constructor, need also specify the TextDirection parameter, otherwise you'll receive an exception:

TextSpan span = new TextSpan(style: new TextStyle(color: Colors.blue[800]), text: name);
TextPainter tp = new TextPainter(text: span, textAlign: TextAlign.left, textDirection: TextDirection.ltr);
tp.layout();
tp.paint(canvas, new Offset(5.0, 5.0));