flutterdarttextflame

How can I change the size of the text in TextComponent using Flutter Flame?


How do you change the size of the text in the TextComponent in Flame? I want to make the text larger

I used the Flame documentation to get this, but I don't know how to modify it for a larger text size (like 20pt vs 14pt). Also, what is the anchor?

final style = TextStyle(color: BasicPalette.darkBlue.color);
final regular = TextPaint(style: style);

TextComponent startText = TextComponent(text: 'test text', textRenderer: regular)
  ..anchor = Anchor.topCenter
  ..x = (width * 0.2)
  ..y = (height - (height*0.5))
  ..priority = 300;

Solution

  • final style = TextStyle(
      color: BasicPalette.darkBlue.color,
      fontSize: 20.0, // Change the font size here
    );
    final regular = TextPaint(style: style);
    
    TextComponent startText = TextComponent(
      text: 'test text',
      textRenderer: regular,
    )
      ..anchor = Anchor.topCenter
      ..x = (width * 0.2)
      ..y = (height - (height * 0.5))
      ..priority = 300;
    

    What's anchor?

    The anchor in Flame's TextComponent determines where the text is positioned relative to its given coordinates (x and y). You can choose from options like top-left, top-center, top-right, center-left, center, center-right, bottom-left, bottom-center, and bottom-right to align the text as you want. Adjust the anchor and position values to position the text as needed.