What happened?

Even add Anchor.center to TextComponent still can't center it to container and no regular pattern, some are above, some are below.

What do you expect?

Text can auto center to container

How can we reproduce this?

import 'dart:async';

import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flame_forge2d/flame_forge2d.dart' hide Transform;
import 'package:flutter/material.dart';
import 'package:flame/extensions.dart';

void main() {
  runApp(
    MaterialApp(
      home: Scaffold(
        body: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Row(
                children: [
                  Container(
                    width: 30, height: 30,
                    margin: const EdgeInsets.all(8),
                    color: Colors.blue,
                    child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
                  ),
                  Container(
                    width: 40, height: 40,
                    margin: const EdgeInsets.all(8),
                    color: Colors.blue,
                    child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
                  ),
                  Container(
                    width: 50, height: 50,
                      margin: const EdgeInsets.all(8),
                      color: Colors.blue,
                      child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
                  ),
                  Container(
                    width: 55, height: 55,
                    margin: const EdgeInsets.all(8),
                    color: Colors.blue,
                    child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
                  ),
                  Container(
                    width: 60, height: 60,
                    margin: const EdgeInsets.all(8),
                    color: Colors.blue,
                    child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
                  ),
                  Container(
                    width: 70, height: 70,
                    margin: const EdgeInsets.all(8),
                    color: Colors.blue,
                    child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
                  ),
                ],
              ),
              Row(
                children: [
                  Container(
                    width: 25, height: 25,
                    margin: const EdgeInsets.all(8),
                    color: Colors.blue,
                    child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
                  ),
                  Container(
                    width: 35, height: 35,
                    margin: const EdgeInsets.all(8),
                    color: Colors.blue,
                    child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
                  ),
                  Container(
                    width: 65, height: 65,
                      margin: const EdgeInsets.all(8),
                      color: Colors.blue,
                      child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
                  ),
                  Container(
                    width: 75, height: 75,
                    margin: const EdgeInsets.all(8),
                    color: Colors.blue,
                    child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
                  ),
                  Container(
                    width: 80, height: 80,
                    margin: const EdgeInsets.all(8),
                    color: Colors.blue,
                    child: GameWidget<TextCenterGame>(game: TextCenterGame(),),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    ),
  );
}


class TextCenterGame extends Forge2DGame{
  TextCenterGame() : super(world: TextCenterWord(),);

  @override
  Color backgroundColor() {
    return Colors.transparent;
  }

  @override
  FutureOr<void> onLoad() {
    super.onLoad();
  }

}


class TextCenterWord extends Forge2DWorld with HasGameReference<Forge2DGame> {
  @override
  Future<void> onLoad() async {
    super.onLoad();
    print('game.size: ${game.size}, ${game.camera.visibleWorldRect}');
    // add(CenterTextBody(Size(game.size.x, game.size.y)));
    add(CenterTextBody(Size(game.camera.visibleWorldRect.width, game.camera.visibleWorldRect.height)));
  }

}


class CenterTextBody extends BodyComponent {// with TapCallbacks
  final bgPaint = Paint();
  final Size size;
  CenterTextBody(this.size);

  @override
  Future<void> onLoad() async {
    await super.onLoad();
    bgPaint.style = PaintingStyle.stroke;
    bgPaint.strokeWidth = 0.1;
    bgPaint.color = Colors.red;
    final fontSize = size.width*0.6;
    print('game.size: $fontSize, ${game.size}, ${game.camera.visibleWorldRect}');
    TextComponent textComponent = TextComponent(
      text: '0',//🌟⭐
      textRenderer: TextPaint(
        style: TextStyle(
          fontSize: fontSize,
          // height: 1,
        ),
      ),
      anchor: Anchor.center,
    );
    add(textComponent);
  }

  @override
  void renderCircle(Canvas canvas, Offset center, double radius) {
    canvas.drawCircle(center, radius, bgPaint);
    canvas.drawLine(Offset(-radius, center.dy), Offset(radius, center.dy), bgPaint);
    canvas.drawLine(Offset(center.dx, -radius), Offset(center.dx, radius), bgPaint);
  }

  @override
  Body createBody() {
    print('createBody: $size');
    final fixtureDef = FixtureDef(
      CircleShape()..radius=size.width/2,
    );
    final bodyDef = BodyDef(
      // position: Vector2(size.width/2, size.height/2),
      // position: Vector2(),
      type: BodyType.static,

    );
    return world.createBody(bodyDef)..createFixture(fixtureDef);
  }
}

What steps should take to fix this?

No response

Do have an example of where the bug occurs?

No response

Relevant log output

No response

Execute in a terminal and put output into the code block below

[✓] Flutter (Channel stable, 3.24.1, on macOS 14.6.1 23G93 darwin-arm64 (Rosetta), locale en-US)
• Flutter version 3.24.1 on channel stable at /Users/taotao/Documents/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 5874a72aa4 (5 weeks ago), 2024-08-20 16:46:00 -0500
• Engine revision c9b9d5780d
• Dart version 3.5.1
• DevTools version 2.37.2
• Pub download mirror https://pub.flutter-io.com
• Flutter download mirror https://storage.flutter-io.com

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/taotao/Library/Android/sdk
• Platform android-34, build-tools 34.0.0
• ANDROID_HOME = /Users/taotao/Library/Android/sdk
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.10+0-17.0.10b1087.21-11572160)
• All Android licenses accepted.

Affected platforms

Android

Other information

flame: ^1.19.0
flame_forge2d: ^0.18.2
flame_svg: ^1.11.0

Are you interested in working on a PR for this?

• I want to work on this