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.

One thing for people to be aware of before copying the code above is that it is relatively expensive to recreate the TextPainter each time (specifically, the call to `layout` is expensive). Where possible, you want to keep the TextPainter around and reuse it, only calling `layout` on it when the arguments to that method change. — Ian Hickson, Dec 29 '16 at 00:12
@IanHickson whenever I try to reuse a textpainer, I get "TextPainter.paint called when text geometry was not yet calculated". I can create a new textpainter every time, and it works, but seem unable to reuse a textpainter. Are there any examples out there you are aware of which show this ? (actually I think it needs a new painter every time text changes, so not quite sure how often one would be able to reuse the painter ?) — Ian, Aug 31 '20 at 15:10
You have to make sure to call "layout" on the text painter after setting any of its properties, to recompute the geometry. — Ian Hickson, Sep 01 '20 at 17:32

Suragch · Answer 1 · 2021-05-09T01:44:26.783

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) {
  final textStyle = TextStyle(
    color: Colors.black,
    fontSize: 30,
  );
  final 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;
  }
}

Thanks. Everything worked perfectly. The only improvement would be to figure out an automatic way of centering the text instead of using `Offset(50, 100)` - left/top padding. — kosiara - Bartosz Kosarzycki, May 08 '21 at 09:47
@kosiara-BartoszKosarzycki, After you call `textPainter.layout` you will have access to `textPainter.width` and `textPainter.width`. I've updated the answer to center the text. — Suragch, May 09 '21 at 01:45

score 37 · Accepted Answer · answered Dec 29 '16 at 00:05

37

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.

answered Dec 29 '16 at 00:05

Reagankm

4,780
9
27
52

3

The default text color is indeed white. – Ian Hickson Dec 29 '16 at 00:11

score 23 · Answer 3 · edited Jan 26 '20 at 23:50

23

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));

edited Jan 26 '20 at 23:50

Steph Thirion

9,313
9
50
58

answered Mar 19 '18 at 19:52

Michael Kanzieper

709
1
10
20

How do you use a TextPainter to draw text?

3 Answers3

Notes:

Context

See also

Linked