[Flame] 폰트색상이 빨간색에 노랑 밑줄이 발생하는 경우

Flame으로 게임 개발하는중에 Overlay로 뷰를 띄우니 아래처럼 빨간 색에 노란 밑줄이 보인다.

 

class GameOverPopup extends StatelessWidget {
  final RogueShooterGame game;

  const GameOverPopup({super.key, required this.game});

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        width: 300,
        padding: const EdgeInsets.all(24),
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(16),
          boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.5), blurRadius: 10)],
        ),
        child: const Text('Game Over', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
      ),
    );
  }
}

 

 

이는 Flame은 main의 runapp에서 MaterialApp으로 감싸지 않고 바로 GameWidget을 사용하기 때문이다.

void main() {
  final MyGame game = MyGame();

  runApp(GameWidget(
    game: game,
    overlayBuilderMap: {
      'GameOver': (context, MyGame game) => GameOverOverlay(game: game),
    },
    initialActiveOverlays: const ['Title'],
  ));
}

이런 경우 Material로 감싸주면 된다.

 

 

class GameOverPopup extends StatelessWidget {
  final RogueShooterGame game;

  const GameOverPopup({super.key, required this.game});

  @override
  Widget build(BuildContext context) {
    return Material(
      color: Colors.black.withOpacity(0.5), // 반투명 배경
      child: Center(
        child: Container(
          width: 300,
          padding: const EdgeInsets.all(24),
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.circular(16),
            boxShadow: [BoxShadow(color: Colors.black.withOpacity(0.5), blurRadius: 10)],
          ),
          child: const Text('Game Over', style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold)),
        ),
      ),
    );
  }
}