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’re accessing parts of this content for free, with some sections shown as text.
Heads up... You’re accessing parts of this content for free, with some sections shown as text.
Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.
Unlock now
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),