Your First Flutter Flame Game
About this episode
Leave a rating/review
See forum comments
Mark complete
Next episode: 19. Challenge: Create a Game Over Overlay
Notes: 18. Make a Game Menu
Check out Flame’s documentation about overlays.
Heads up... You've reached locked video content where the transcript will be shown as text.
The first thing a player sees in any game is a menu.
Demo
Time to create the game menu.
MainMenu
Let’s start with a basic stateless widget.
class MainMenu extends StatelessWidget {
}
static const String overlayName = 'MainMenu';
// Reference to parent game.
final MeteormaniaGame game;
const MainMenu({super.key, required this.game});
return Material()
color: Colors.transparent,
child: Center(
child: Container(
padding: const EdgeInsets.all(16.0),
height: 250,
),
),
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),
),
),
const Text(
'Meteormania',
style: TextStyle(
fontFamily: 'PressStart2P',
color: Colors.white,
fontSize: 24,
),
),
const SizedBox(height: 48),
onPressed: () {
game.overlays.remove(overlayName);
game.initializeGame();
},
Saucer, Spaceship, Meteorite, Bullet
Now, you’ll have to check on the different components to see if the game is over so that they only appear when a new game has started.
if (game.manager.isGameOver) {
removeFromParent();
}
if (game.manager.isGameOver) {
removeFromParent();
}
if (game.manager.isGameOver) {
removeFromParent();
}
if (game.manager.isGameOver) {
removeFromParent();
}
MeteormaniaGame
Now, in MeteormaniaGame you’ll also have to check if the game is over to re-add the overlay if the player’s spaceship was hit. Add an if check on spaceshipHit.
if (manager.isGameOver) {
overlays.add(MainMenu.overlayName);
}
Main
As the final step, change main to a controlled GameWidget. This allows you to handle the game and also overlays built as a widget.
GameWidget<MeteormaniaGame>.controlled(
gameFactory: MeteormaniaGame.new,
overlayBuilderMap: {
MainMenu.overlayName: (_, game) => MainMenu(game: game),
},
initialActiveOverlays: const [MainMenu.overlayName],
),