Mobile Game Development with Flame (Flutter)
Flame—game engine on Flutter. Not separate framework, but package adding game loop, component system, physics, input handling directly to Flutter project. Means: single codebase for game and UI around it (menu, settings, shop), native work on iOS, Android, Web, Desktop.
Choose Flame when: team already works Flutter and Dart, need 2D game without heavy engine, or game content embedded in existing Flutter app.
Flame Architecture
Flame uses Component/Entity system. FlameGame—root component with game loop. Component—base class for everything: sprites, text, collisions, UI elements.
class SpaceGame extends FlameGame {
@override
Future<void> onLoad() async {
add(Player());
add(StarBackground());
add(EnemySpawner());
}
}
HasCollisionDetection mixin adds collisions. ShapeHitbox (Rectangle, Circle, Polygon)—hitboxes. Callbacks onCollisionStart, onCollision, onCollisionEnd.
Ticks and physics. Flame provides update(double dt)—delta time in seconds. Physics via Forge2D (Box2D port for Dart)—separate package flame_forge2d. For simple games built-in collision sufficient without Box2D.
Practice: Typical Component
class Enemy extends SpriteComponent with HasGameRef<SpaceGame>, CollisionCallbacks {
Enemy() : super(size: Vector2(64, 64));
@override
Future<void> onLoad() async {
sprite = await gameRef.loadSprite('enemy.png');
add(RectangleHitbox());
}
@override
void update(double dt) {
super.update(dt);
position.y += 150 * dt; // move down
if (position.y > gameRef.size.y) removeFromParent();
}
@override
void onCollisionStart(Set<Vector2> points, PositionComponent other) {
if (other is Bullet) {
removeFromParent();
gameRef.score.increment();
}
}
}
removeFromParent()—correct removal. remove() directly adds delay per tick.
Performance in Flame
Flame renders via Flutter's Canvas API—not GPU instancing, direct canvas.drawImageRect calls. For many identical sprites (100+ particles, bullets) use SpriteParticle from flame_particles or custom CustomPainter with drawAtlas—batches drawing in single call.
Sprite Sheet. SpriteAnimation from atlas—SpriteSheet.fromColumnsAndRows. Loading separate PNG per frame—anti-pattern. gameRef.images.load() caches image, repeat calls return cache.
Flame sits on Flutter widget tree—gives access to FlameGame.overlays for embedding Flutter widgets (pause buttons, score, modals) directly over canvas without separate layer.
Limitations
No 3D in Flame. Complex physics (ragdoll, joints, physics-sensitive puzzles)—Forge2D handles, but Unity Box2D integration more mature. If project needs serious 3D—Flame not right choice.
Community smaller than Unity/Godot—fewer plugins, Stack Overflow answers fewer.
Timeline
Hyper-casual or casual prototype: 3–6 weeks. Full 2D game with progression, shop, AdMob and IAP integration: 2–5 months. Cost calculated after game concept analysis.