Game class and components in Flutter Flame

- Andrés Cruz

En español
Game class and components in Flutter Flame

In this entry we will know the key elements of Flame, its organization, components and key structures; this is a purely reference chapter, do not worry if you did not understand all the terms explained in this section, the following chapters offer a more practical scheme in which we build an application step by step; When one of these classes and functions is introduced, you can return to this chapter to review what was explained in it.

You can create a project called "testflame" as shown in the previous chapter.

A project in Flame can be divided into two parts:

  1. The main class, which is the one that allows all the modules of the application to communicate as well as using Flame's own processes such as the collision and input system (keyboard, gestures...).
  2. The components, which are the elements of our game, a background, player, enemy, etc.

To make the idea easier to understand, you can see Flame's Game class as Flutter's MaterialApp and the Flame components, as each of the pages that make up the Flutter application:

Let's get to know each of these Flame elements in more detail.

Type classes Game/FlameGame

The Game class in Flame is an essential component for creating 2D games with Flutter. This class is the main one for the whole game and is in charge of configuring, rendering and updating the elements of the game; in short, it is the central class and the one that governs the entire application; this class has been the equivalent of MaterialApp in Flutter; from this class we can use all kinds of features that are part of the Flame API such as taps, drag and drop, collisions and much more.

In Flame, we have two main types of classes, the Game classes that offer us a more simplified schema than the FlameGame class; for example, the Game class only allows defining components local to its own class, which is unthinkable when we have a large application.

In the Game class, the screen size is defined, sprites are created, game logic is set, and necessary resources such as images and sounds are loaded. in addition, the Game class also handles the update and rendering cycle of the game.

By inheriting from the Game class, you can customize the logic and appearance of the game. With the help of the Game class in Flame, all kinds of 2D games can be created. It is important to mention that Flame also offers other components, such as Sprite and Animation, which help build more complex and dynamic games.

We will talk about the components below.


One of the great features that Flame has is that we can use the different features of Flame in components in which a component can be various things like a player, an enemy, a background, particle effects, texts, etc. joystick, among others; which, we can incorporate more features such as the use of collisions, updates, interaction with keys, drag and drop, tap, etc; as you can see, it has a very similar approach to Flutter widgets, but in this case with components and based on games.

In essence, a game entity, such as the player, is represented by a component, which is a class, and thanks to the Game class of our application, which is the global entity, we can communicate the components with each other; for example, with entries or collisions, which gives us a very modular and scalable environment for the application.

We have many types of components, in this book, we will see some like:

  • SpriteComponent
  • SpriteAnimationComponent
  • PositionComponent
  • TextComponent

You can see the complete list at:


In Flame, components are interactive objects that are part of a 2D game and can be of different types, such as sprites, animations, visual effects, sounds, among others; these interactive components can have different purposes such as a player, an enemy, a consumable, some object that can do damage to some player and in essence, anything in the game including the background of the game; components are the centerpiece of Flame and are governed by other components or by the Game classes we introduced earlier.

Components in Flame are used to represent visual and functional elements in the game, such as characters, obstacles, objects, and environment elements.

The great thing about components is that each component has its own structure and behavior, and can be combined and customized to create unique games. By adding components to a scene in Flame, you can define how they interact with each other and how they behave in-game. For example, you can define a sprite's properties, such as its speed and direction, and how it should react when colliding with another object.

Components in Flame provide clear code organization and efficient resource management, making it easy to build and maintain complex games; components, being classes, can inherit from other classes, or implement and be able to easily reuse them. In short, components in Flame are essential elements in creating 2D games in Flutter, as they allow for the creation of interactive and custom objects that make up the game itself.

Remember that this material is part of my complete book and course on Flutter Flame.

Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.