why my text is too big meanwhile not clear enough

Question

class GemTabCabinet extends TextBoxComponent with HasGameRef<MyGame> {
  String tabText;
  Vector2 tabPosition;

  GemTabCabinet({
    required this.tabText,
    required this.tabPosition,
  }) : super(
            text: tabText,
            position: tabPosition,
            boxConfig: TextBoxConfig(
              growingBox: true,
              margins: EdgeInsets.symmetric(horizontal: 2, vertical: 0),
            ),
            textRenderer: TextPaint(
                style: const TextStyle(
                    // backgroundColor: Color.fromARGB(180, 85, 84, 84),
                    fontSize: 14)));

  final bgPaint = Paint()..color = Color(0xFFFF00FF);
  final borderPaint = Paint()
    ..color = Color(0xFF000000)
    ..style = PaintingStyle.stroke;

  @override
  void render(Canvas canvas) {
    Rect rect = Rect.fromLTWH(0, 0, width, height);
    canvas.drawRect(rect, bgPaint);
    super.render(canvas);
  }
}

here is screenshot:

As you see the fontSize is 14 but it is too big, but still not clear enough, I tried to update the size but it will just effect the background box, thanks for any clue!

======== UPDATE ========

I asked chatgpt4 about this issue, I understand it may be wrong, and have watched spydon's video about the difficulty of coupling between flame's component and flutter's widget. But still I feel it will be really awesome to use some flutter widget one day in the flame to avoid recreating such tabView widget and waste of flutter's resource. Here is what I got from chatgpt4:

@override
  Future<void> onLoad() async {
    // Create the tab bar background
    tabBarBackground = PositionComponent(
      size: Vector2(
        size.width,
        60,
      ),
      position: Vector2(
        0,
        0,
      ),
      child: Container(
        color: Colors.blue,
      ),
    );
    add(tabBarBackground);

    // Create the tabs
    final tabs = [
      Tab(text: 'Tab 1'),
      Tab(text: 'Tab 2'),
      Tab(text: 'Tab 3'),
    ];

    // Create the tab bar controller
    tabController = TabController(
      length: tabs.length,
      vsync: gameRef.currentContext!,
    );

    // Create the tab bar view
    final tabView = TabBarView(
      controller: tabController,
      children: [
        Container(
          color: Colors.red,
        ),
        Container(
          color: Colors.green,
        ),
        Container(
          color: Colors.yellow,
        ),
      ],
    );

    // Add the tab bar and tab bar view to the game
    addWidget(
      TabBar(
        tabs: tabs,
        controller: tabController,
      ),
    );
    addWidget(tabView);

    super.onLoad();
  }

Answer 1

spydon has already provided the answer, I will close this question.