Your First Flutter Flame Game

Mar 6 2024 · Dart 3, Flutter 3.10.1, Android Studio 2021.3.1 or higher, Visual Studo Code 1.7.4 or higher

Part 1: Getting Started With Flame

04. Add Components to Meteormania

Episode complete

Play next episode

About this episode
Leave a rating/review
See forum comments
Cinema mode Mark complete Download course materials
Previous episode: 03. Learn Flame's Core Concepts Next episode: 05. Enable Debug Mode in Components

Get immediate access to this and 4,000+ other videos and books.

Take your career further with a Kodeco Personal Plan. With unlimited access to over 40+ books and 4,000+ professional videos in a single subscription, it's simply the best investment you can make in your development career.

Learn more Already a subscriber? Sign in.

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Heads up... You’re accessing parts of this content for free, with some sections shown as obfuscated text.

Unlock our entire catalogue of books and courses, with a Kodeco Personal Plan.

Unlock now

In this episode, you’ll add more components to your game. Let’s start by looking at all the Components that Meteormania will have:


Start by refactoring the background. Open lib/components/brackground.dart and create a class that extends SpriteComponent.

import 'package:flame/components.dart';

class Background extends SpriteComponent {

    : super(
        sprite: Sprite(
        size: Vector2(
final background = Background();


Spaceship‘s sprite is located in a different image you’ll need to load it first. In onLoad function, load the spritesheet to Flame like so:

await Flame.images.load('meteormania_spritesheet.png');
Sprite loadMeteormaniaSprite(
  double x,
  double y,
  double width,
  double height,
) {
  return Sprite(
    srcPosition: Vector2(x, y),
    srcSize: Vector2(width, height),
import 'package:flame/components.dart';

class Spaceship extends SpriteComponent {

static const double spaceshipWidth = 96.0;
static const double spaceshipHeight = 96.0;
static final Vector2 spaceshipSize = Vector2(spaceshipWidth, spaceshipHeight);
static final Sprite shipSprite = loadMeteormaniaSprite(304, 384, 96, 96);

Spaceship() : super(sprite: shipSprite, size: spaceshipSize);
void initializeGame() {
final spaceship = Spaceship()
  ..anchor =
  ..position = Vector2(
    GameConstants.cameraWidth / 2,
    GameConstants.cameraHeight / 2,



Adding a Meteorite is a bit trickier since it needs to be positioned randomly in the screen.

import 'package:flame/components.dart';

class Meteorite extends SpriteComponent {
  static final Sprite smallSprite = loadMeteormaniaSprite(688, 287, 64, 64);
  static final Vector2 smallSize = Vector2(64, 64);
  static final Sprite bigSprite = loadMeteormaniaSprite(592, 288, 96, 96);
  static final Vector2 bigSize = Vector2(96, 96);
enum MeteoriteSize { small, big }
final MeteoriteSize meteoriteSize;

    : meteoriteSize = MeteoriteSize.small,
        sprite: smallSprite,
        size: smallSize,

    : meteoriteSize = MeteoriteSize.big,
        sprite: bigSprite,
        size: bigSize,
final smallMeteorite = Meteorite.small();