Your First Flutter Flame Game
Notes: 19. Challenge: Create a Game Over Overlay
Hint: Use isGameOver from GameManager to check for when the game has ended.
Heads up... You've reached locked video content where the transcript will be shown as text.
Use what you’ve learned to create a GameOver overlay.
Solution
GameOver
Let’s start with a basic stateless widget.
class GameOver extends StatelessWidget {
}
static const String overlayName = 'GameOver';
// Reference to parent game.
final MeteormaniaGame game;
const GameOver({super.key, required this.game});
@override
Widget build(BuildContext context) {
return Material(
color: Colors.transparent,
child: Center(
child: Container(
padding: const EdgeInsets.all(16.0),
height: 250,
decoration: BoxDecoration(
color: const Color.fromRGBO(255, 255, 255, 0.15),
border: Border.all(
color: Colors.white,
width: 4,
),
borderRadius: const BorderRadius.all(
Radius.circular(20),
),
),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [],
),
),
),
);
}
const Text(
'Game Over',
style: TextStyle(
fontFamily: 'PressStart2P',
color: Colors.white,
fontSize: 24,
),
),
const SizedBox(height: 24),
Text(
'Score: ${game.manager.points} pts',
style: const TextStyle(
fontFamily: 'PressStart2P',
color: Colors.white,
fontSize: 16,
),
),
const SizedBox(height: 32),
SizedBox(
width: 200,
height: 52,
child: OutlinedButton(
onPressed: () {
},
style: OutlinedButton.styleFrom(
foregroundColor: Colors.white,
side: const BorderSide(width: 3.0, color: Colors.white),
),
child: const Text(
'Play again',
style: TextStyle(
fontSize: 16,
fontFamily: 'PressStart2P',
),
),
),
),
game.overlays.remove(overlayName);
game.reset();
MeteormaniaGame
Since reset does not currently exist, let’s go ahead and add it to MeteormaniaGame.
void reset() {
}
manager.reset();
initializeGame();
overlays.add(GameOver.overlayName);
Main
As the last step, add the new overlay to GameWidget in main.dart
GameOver.overlayName: (_, game) => GameOver(game: game),