Flutter Tutorial
/

Flutter Intermediate Chapter 17 of 20

Flutter Game Development with Flame

Make 2D games with Flutter and Flame: game loop, components, input, collisions, sprites, camera, effects, sound, physics, tile maps and publishing.

Flutter is not only for apps. With Flame, a free and open source game engine built on Flutter, you can make 2D games that run on Android, iOS, the web and desktop from one codebase.

This chapter takes you from an empty screen to a complete game. Most examples have a Run button and play right in your browser: use the mouse, the keyboard or your finger. After this chapter, build the five complete games.

Lessons in this chapter

  1. What Is Flame? Flutter Game Engine for BeginnersAn 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.
  2. Your First Flame Game: FlameGame, GameWidget and a Moving PlayerBuild your first Flutter game with Flame: create a FlameGame, show it with GameWidget, and move a player every frame. Runs in your browser.
  3. Flame Components: Position, Size, Anchor, Lifecycle and ChildrenUnderstand Flame components: Rectangle, Circle and Text components, position, size, anchor, angle and scale, lifecycle methods and child components.
  4. The Flame Game Loop: update, dt, Velocity and BouncingLearn the game loop in Flame: update and render every frame, delta time, velocity and gravity, and bouncing balls off the screen edges, with a runnable example.
  5. Input in Flame: Tap, Drag and Keyboard ControlsHandle input in Flutter Flame games: tap with TapCallbacks, drag with DragCallbacks, and arrow keys with KeyboardHandler. Runnable examples.
  6. Collision Detection in Flame: Hitboxes and CollisionCallbacksDetect collisions in Flutter Flame games with hitboxes, CollisionCallbacks and onCollisionStart, in a runnable catch-the-coins game.
  7. Sprites and Sprite Animations in Flame: Images, Sprite Sheets and AssetsUse images in Flutter Flame games: assets in pubspec.yaml, SpriteComponent, sprite sheet animations, flipping, and idle, run and jump states.
  8. Camera and World in Flame: Follow the Player, Fixed Resolution and HUDLearn the Flame camera and world: follow the player, set bounds, use a fixed resolution for every screen, and keep a HUD on screen. Runnable example.
  9. Effects and Particles in Flame: Move, Scale, Fade and ExplosionsMake Flutter games feel alive with Flame effects (move, scale, rotate, colour, fade, sequence) and particle explosions, in a runnable example.
  10. Score, Lives, Timers and Spawning Enemies in FlameAdd game rules in Flame: a score and lives HUD, TimerComponent, SpawnComponent for enemies, and difficulty that grows over time. Runnable game.
  11. Overlays in Flame: Main Menu, Pause and Game Over with Flutter WidgetsPut Flutter widgets on top of a Flame game with overlays: main menu, pause button, game over screen and restart, in a complete runnable game.
  12. Sound Effects and Music in Flame with flame_audioAdd sound effects and background music to a Flutter Flame game with flame_audio: assets, FlameAudio.play, looping music, preloading and mute.
  13. Physics in Flutter Games with Forge2D: Gravity, Bodies and BouncingAdd real physics to a Flame game with flame_forge2d: Forge2DGame, bodies, shapes, fixtures, bounciness and tap to drop balls. Runs in your browser.
  14. Tile Maps in Flame with Tiled and flame_tiledBuild levels in the free Tiled editor and load them into a Flutter Flame game with flame_tiled: tilesets, layers, spawn points and walls.
  15. Save the High Score and Game Settings in Flame with shared_preferencesSave a high score, settings and progress in a Flutter Flame game with shared_preferences, with a runnable game that remembers your best score.
  16. Publish Your Flutter Game: Performance, Testing and App StoresGet a Flutter Flame game ready to publish: performance tips, device testing, orientation and releasing to Google Play, the App Store, web and itch.io.