Flutter Intermediate Lesson 103 of 135 3 min read

What Is Flame? Flutter Game Engine for Beginners

An easy introduction to Flame, the 2D game engine for Flutter: what it is, what games you can make, how it differs from apps, and how to install it.

On this page

Flame is a free, open source 2D game engine built on top of Flutter. It gives you what a normal app does not have: a game loop that runs 60 times a second, components that move and draw themselves, collision detection, sprites and animations, a camera, effects, particles, sound and physics.

Because it is Flutter underneath, one Flame game runs on Android, iOS, the web, Windows, macOS and Linux, and you can mix normal Flutter widgets (menus, buttons, scores) with your game.

What can you make?

Arcade games: Snake, Flappy Bird style, Breakout, Space shooters
Platformers and endless runners
Puzzle, card and board games
Top-down RPGs with tile maps
Physics games with Forge2D (Angry Birds style)

Every project in Flutter game projects is built with Flame.

Apps vs games: the big difference

Normal Flutter app	Flame game
Rebuilds only when state changes	Updates and redraws every frame (about 60 times a second)
Widgets laid out by Flutter	Components placed at exact `x, y` positions
`setState`, Provider, Riverpod…	Each component changes its own position in `update(dt)`
Input via buttons and gestures	Taps, drags and keys sent to components

The building blocks

GameWidget          a Flutter widget that shows the game
└── FlameGame       the game: runs the loop, holds everything
    ├── World       where your game objects live
    │   ├── Player  (a component)
    │   ├── Enemy   (a component)
    │   └── ...
    └── Camera      decides which part of the world you see

FlameGame: your game class.
Component: anything in the game: a player, an enemy, a bullet, a score label.
update(dt): called every frame; dt is the time since the last frame, in seconds.
render(canvas): draws the component.

Install

In a Flutter project:

flutter pub add flame

Optional packages you will meet later:

Package	For
`flame_audio`	Sound effects and music
`flame_forge2d`	Real physics (gravity, bouncing, joints)
`flame_tiled`	Maps made in the Tiled editor

You can also run Flame right here: the examples in this chapter with a Run button work in your browser, nothing to install.

Your first look

import 'package:flame/components.dart';
import 'package:flame/game.dart';
import 'package:flame/text.dart';
import 'package:flutter/material.dart';

void main() => runApp(GameWidget(game: HelloGame()));

class HelloGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    camera.viewfinder.anchor = Anchor.topLeft; // (0, 0) is the top-left corner
    world.add(
      TextComponent(
        text: 'Hello, Flame!',
        position: Vector2(40, 60),
        textRenderer: TextPaint(
          style: const TextStyle(color: Colors.white, fontSize: 36),
        ),
      ),
    );
  }
}

Press Run. You have a game: a black screen with text drawn by Flame. In the next lesson we make something move.

What you should know first

The Dart basics: classes, extends, @override, async.
What a StatelessWidget is and how runApp works.

You do not need to know state management or advanced Flutter to make games.

Try it yourself

Change the text, its colour and its position. Then add a second TextComponent below the first one.