Can't center `TextComponent`

### 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(game: TextCenterGame(),),
),
Container(
width: 40, height: 40,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget(game: TextCenterGame(),),
),
Container(
width: 50, height: 50,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget(game: TextCenterGame(),),
),
Container(
width: 55, height: 55,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget(game: TextCenterGame(),),
),
Container(
width: 60, height: 60,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget(game: TextCenterGame(),),
),
Container(
width: 70, height: 70,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget(game: TextCenterGame(),),
),
],
),
Row(
children: [
Container(
width: 25, height: 25,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget(game: TextCenterGame(),),
),
Container(
width: 35, height: 35,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget(game: TextCenterGame(),),
),
Container(
width: 65, height: 65,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget(game: TextCenterGame(),),
),
Container(
width: 75, height: 75,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget(game: TextCenterGame(),),
),
Container(
width: 80, height: 80,
margin: const EdgeInsets.all(8),
color: Colors.blue,
child: GameWidget(game: TextCenterGame(),),
),
],
),
],
),
),
),
),
);
}

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

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

@override
FutureOr onLoad() {
super.onLoad();
}

}

class TextCenterWord extends Forge2DWorld with HasGameReference {
@override
Future 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 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

Start by reproducing the example with Flame 1.19.0 and inspect TextComponent, Anchor.center, TextPaint, and CenterTextBody.onLoad, including the camera.visibleWorldRect values shown in the report. Compare the rendered text position across the container sizes; done means centered text renders consistently on the affected Android setup and the behavior is covered by an appropriate regression test.

Written by the indexing model from the issue text.