テキストボックス

TextBoxComponent

TextBoxComponentを使うと指定の領域に合わせてテキストを表示することができます。

また timePerChar というテキストを徐々に表示するオプションもあります。

描画する

onLoadでテキストボックスを追加し、renderではテキストボックスの領域に合わせてボーダーを描画しています。

import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flutter/material.dart';

class TextBoxGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    super.onLoad();

    await add(
      TextBoxComponent(
        position: Vector2(size.x * 0.5 - 100, size.y * 0.5 - 50),
        text: "Hello, World! This is a Flame's TextBox.",
        size: Vector2(200, 100),
        boxConfig: TextBoxConfig(
          timePerChar: 0.08,
        ),
      ),
    );
  }

  @override
  void render(Canvas canvas) {
    super.render(canvas);

    canvas.drawRect(
      Rect.fromLTWH(
        size.x * 0.5 - 100,
        size.y * 0.5 - 50,
        200,
        100,
      ),
      Paint()
        ..color = Colors.white
        ..style = PaintingStyle.stroke
        ..strokeWidth = 2,
    );
  }
}

これで枠内に 0.08 秒ごとにテキストが表示されます。