DEV Community

krlz
krlz

Posted on

Make Games with Flutter in 2025: Flame Engine, Tools, and Free Assets

#flutter #gamedev #dart #tutorial

Want to make games with Flutter? Here's everything you need to get started.

Why Flutter for Games?

Flutter runs on mobile, desktop, and web from one codebase. If you already know Flutter, you don't need to learn a new language. The Flame engine handles the game-specific stuff.

The Flame Engine

Flame is the go-to game engine for Flutter. It's lightweight, well-documented, and actively maintained.

What Flame Gives You

  • Game loop
  • Sprites and animations
  • Collision detection
  • Input handling (touch, keyboard, mouse)
  • Audio
  • Particle effects
  • Component system (similar to Flutter widgets)

Install Flame 

flutter pub add flame
Enter fullscreen mode Exit fullscreen mode

Current version: 1.29.0

Basic Flame Game Structure

Here's the simplest Flame game:

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

void main() {
  runApp(GameWidget(game: MyGame()));
}

class MyGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    // Load assets, add components
  }

  @override
  void update(double dt) {
    super.update(dt);
    // Game logic runs here every frame
  }

  @override
  void render(Canvas canvas) {
    super.render(canvas);
    // Draw stuff here
  }
}
Enter fullscreen mode Exit fullscreen mode

Adding a Sprite 

import 'package:flame/components.dart';

class Player extends SpriteComponent with HasGameRef {
  @override
  Future<void> onLoad() async {
    sprite = await gameRef.loadSprite('player.png');
    size = Vector2(64, 64);
    position = Vector2(100, 100);
  }

  @override
  void update(double dt) {
    // Move player
    position.x += 100 * dt;
  }
}
Enter fullscreen mode Exit fullscreen mode

Add it to your game:

@override
Future<void> onLoad() async {
  add(Player());
}
Enter fullscreen mode Exit fullscreen mode

Handling Input

Tap Detection 

class Player extends SpriteComponent with TapCallbacks {
  @override
  void onTapDown(TapDownEvent event) {
    // Player was tapped
  }
}
Enter fullscreen mode Exit fullscreen mode

Keyboard Input 

class MyGame extends FlameGame with KeyboardEvents {
  @override
  KeyEventResult onKeyEvent(
    KeyEvent event,
    Set<LogicalKeyboardKey> keysPressed,
  ) {
    if (keysPressed.contains(LogicalKeyboardKey.arrowLeft)) {
      // Move left
    }
    return KeyEventResult.handled;
  }
}
Enter fullscreen mode Exit fullscreen mode

Collision Detection 

class Player extends SpriteComponent 
    with CollisionCallbacks, HasGameRef {

  @override
  Future<void> onLoad() async {
    add(RectangleHitbox());
  }

  @override
  void onCollision(Set<Vector2> points, PositionComponent other) {
    if (other is Enemy) {
      // Hit an enemy
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

Enable collisions in your game:

class MyGame extends FlameGame with HasCollisionDetection {
  // ...
}
Enter fullscreen mode Exit fullscreen mode

Essential Flame Packages

Package What It Does Install
flame Core engine flutter pub add flame
flame_audio Sound and music flutter pub add flame_audio
flame_forge2d Physics (Box2D) flutter pub add flame_forge2d
flame_tiled Load Tiled maps flutter pub add flame_tiled
flame_bloc State management flutter pub add flame_bloc
flame_rive Rive animations flutter pub add flame_rive
flame_lottie Lottie animations flutter pub add flame_lottie
flame_svg SVG support flutter pub add flame_svg

Bonfire: For RPG Games

Building an RPG? Use Bonfire. It's built on Flame and gives you:

  • Tile map support
  • Player movement
  • Enemies with AI
  • Lighting system
  • Joystick controls
  • Camera follow 
flutter pub add bonfire
Enter fullscreen mode Exit fullscreen mode

Basic Bonfire Setup 

import 'package:bonfire/bonfire.dart';

class MyRPGGame extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return BonfireWidget(
      map: WorldMapByTiled(
        TiledReader.asset('maps/my_map.tmj'),
      ),
      player: MyPlayer(Vector2(100, 100)),
      joystick: Joystick(
        directional: JoystickDirectional(),
      ),
    );
  }
}
Enter fullscreen mode Exit fullscreen mode

Forge2D: Physics Engine

Need physics? Forge2D is Box2D for Dart.

flutter pub add flame_forge2d
Enter fullscreen mode Exit fullscreen mode

Basic Physics Body 

import 'package:flame_forge2d/flame_forge2d.dart';

class Ball extends BodyComponent {
  final Vector2 initialPosition;

  Ball(this.initialPosition);

  @override
  Body createBody() {
    final shape = CircleShape()..radius = 2;
    final fixtureDef = FixtureDef(shape)
      ..restitution = 0.8
      ..density = 1.0;
    final bodyDef = BodyDef()
      ..type = BodyType.dynamic
      ..position = initialPosition;
    return world.createBody(bodyDef)..createFixture(fixtureDef);
  }
}
Enter fullscreen mode Exit fullscreen mode

Flutter Casual Games Toolkit

Google provides an official Casual Games Toolkit with:

  • Starter template
  • Ads integration
  • In-app purchases
  • Games services (leaderboards)
  • Crashlytics
  • Audio management

Good for shipping real games to app stores.

Free Game Assets

You need sprites, sounds, and music. Here's where to get them for free.

Sprites & Tilesets

Source What You Get License
itch.io Huge variety, indie creators Varies (check each)
OpenGameArt Classic game art, sounds CC0, CC-BY, GPL
Kenney Clean, consistent packs CC0 (free for anything)
CraftPix Mobile-style 2D assets Free with attribution

Popular Free Asset Packs

On itch.io:

  • Ninja Adventure Asset Pack (topdown RPG)
  • Tiny Swords (fantasy RTS style)
  • Sprout Lands (farming game)
  • Pixel Dungeon (16x16 roguelike)
  • Free Pixel Art Asset Pack (500+ sprites)

On Kenney:

  • Platformer Pack
  • RPG Urban Pack
  • Space Shooter
  • Puzzle Pack
  • UI Packs

Sound Effects & Music

Source What You Get
Freesound Sound effects (CC licensed)
OpenGameArt Game music and SFX
Pixabay Royalty-free music
Incompetech Kevin MacLeod's music (CC-BY)

Project Structure

Organize your Flame project like this:

lib/
├── main.dart
├── game/
│   ├── my_game.dart
│   ├── components/
│   │   ├── player.dart
│   │   ├── enemy.dart
│   │   └── bullet.dart
│   ├── screens/
│   │   ├── menu.dart
│   │   └── game_over.dart
│   └── utils/
│       └── constants.dart
assets/
├── images/
│   ├── player.png
│   └── enemy.png
└── audio/
    ├── jump.wav
    └── music.mp3
Enter fullscreen mode Exit fullscreen mode

Don't forget to add assets to pubspec.yaml:

flutter:
  assets:
    - assets/images/
    - assets/audio/
Enter fullscreen mode Exit fullscreen mode

Quick Tips

  1. Use sprite sheets - Load one image with multiple frames instead of separate files

  2. Cache assets - Load images once in onLoad(), reuse them

  3. Use dt - Always multiply movement by delta time for consistent speed

  4. Component system - Break everything into components, just like Flutter widgets

  5. Debug mode - Set debugMode = true on components to see hitboxes

class Player extends SpriteComponent {
  @override
  bool debugMode = true; // Shows collision boxes
}
Enter fullscreen mode Exit fullscreen mode

Learning Resources

Official

Community

Example Games

What to Build First

Start simple:

  1. Pong - Two paddles, one ball
  2. Breakout - Follow Google's codelab
  3. Space Shooter - Scrolling background, enemies
  4. Platformer - Jumping, gravity, tiles
  5. Top-down RPG - Use Bonfire

Summary

Need Use
2D games Flame
Physics Forge2D
RPG games Bonfire
Tile maps Tiled + flame_tiled
Sprites Kenney, itch.io, OpenGameArt
Sounds Freesound, OpenGameArt
Shipping to stores Flutter Casual Games Toolkit

That's it. Pick an asset pack, follow a tutorial, and start building.

Links:

Top comments (0)