Text Rendering

Flame has some dedicated classes to help you render text.


A Text Config contains all typographical information required to render texts; i.e., font size and color, family, etc.

Example usage:

const TextConfig config = TextConfig(fontSize: 48.0, fontFamily: 'Awesome Font', anchor: Anchor.rightBottom);
  • fontFamily : a commonly available font, like Arial (default), or a custom font added in your pubspec (see here how to do it)
  • fontSize : font size, in pts (default 24.0)
  • color : the color, as a ui.Color (default black)

For more information regarding colors and how to create then, see the Colors and the Palette guide.

After the creation of the config you can use its render method to draw some string on a canvas:

config.render(canvas, "Flame is awesome", Position(10, 10));

Text Components

Flame provides two text components that make it even easier to render text in your game: TextComponent and TextBoxComponent.


TextComponent is a simple component that renders a single line of text.

Example usage:

TextConfig regular = TextConfig(color: BasicPalette.white.color);

class MyGame extends BaseGame {
  MyGame() {

  _start() async {
    Size size = await Flame.util.initialDimensions();

    add(TextComponent('Hello, Flame', config: regular)
      ..anchor = Anchor.topCenter
      ..x = size.width / 2
      ..y = 32.0);


TextBoxComponent is very similar to TextComponent, but as its name suggest, is used to render a text inside a bounding box, creating line breaks according to the provided box size.

Example usage:

class MyTextBox extends TextBoxComponent {
  MyTextBox(String text) : super(text, config: tiny, boxConfig: TextBoxConfig(timePerChar: 0.05));

  void drawBackground(Canvas c) {
    Rect rect = Rect.fromLTWH(0, 0, width, height);
    c.drawRect(rect, new Paint()..color = Color(0xFFFF00FF));
        new Paint()
          ..color = BasicPalette.black.color
          ..style = PaintingStyle.stroke);

Both components are showcased on a working example here