Building Your First 2D Game with Flutter and Flame

Create and integrate background and player as sprite components in a Flame game, using the onload lifecycle, a game ref, and the add method to center and size the objects.

add a draggable virtual joystick to the player, built from a knob, background and margin, to control movement with delta time for smooth, consistent pacing.

Define four boundary variables for left, right, top, and bottom, initialize them on load, and clamp the player's x and y in update to keep the player within the screen.

Create a new dumbbell sprite component in Flutter Flame, size 60 by 60 at (200, 200) with center anchor, and add it beneath the player component for collision detection.

Enable collision detection by mixing in the HasCollisionDetection mixin, add rectangle hitboxes to components, and visualize collisions in debug mode to verify interactions such as grabbing the dumbbell.

Override the on collision callback to detect intersecting hit boxes and remove the dumbbell when the player collides, while preloading and playing a rumble sound to confirm the interaction.

Place dumbbells at random screen positions by generating random x and y coordinates, remove the current dumbbell on collision, and spawn a new one until the game ends.

Introduce two virus components as obstacles by creating a virus component that extends sprite component, loads its sprite, accepts a start position, and adds to the game with adjusted size.

Generate a random angle and compute a velocity vector using cosine and sine at speed 300. Apply updates with velocity times dt to ensure consistent, frame-rate independent virus movement.

Add circle hit boxes to the virus and a screen hit box to the game, enabling bounds collision detection. Invert the velocity on the collided axis.

Implement collision handling that freezes the player for three seconds after virus contact, switching fever sprites, playing virus sounds, and managing state with a timer in Flutter and Flame.

Set up a 30-second timer and score display using flame's text component, starting from zero and rendering at the top-left in black with a 25px font.

Implement an update function to refresh the timer and score text, show time remaining, and increment the score when the dumbbell collides with the player in a Flutter Flame game.

Display a game over overlay using Flutter overlays to show the final score with a background image and options to play again or return to the main menu.

Create the main menu screen for a Flutter and Flame game using a stateless main menu widget, a scaffold, a background image, and a centered play button.

Create a gameplay screen that initializes a fighter game once and uses a 30-second timer with a game over overlay; navigate between main menu and gameplay via play.

Change the player sprite conditionally based on score and virus events, switching between skinny, fit, and muscular sprites as the game updates, freezes or resets.

Add a vaccine component that appears at random intervals and grants temporary immunity to the virus by colliding with the vaccine, updating collision logic and vaccine injection and sound effects.

Add a vaccine component that appears at random vaccine appearance times during the game, granting four seconds of immunity. Track the vaccine timer and trigger new appearances.

introduce a protein component that appears once per game, awards a random 0-8 bonus on collection, and shows the protein bonus in the game over menu with timers.

Add an animated splash screen with the Flutter animated splash screen package, set duration to two seconds, display the game logo, and transition to the main menu.

Change the app name and launcher icon by updating the android manifest file and configuring flutter launcher icons in pubspec.yaml, with assets images the game logo.png, across android and iOS.

Download the complete code for your first 2D game built with Flutter and Flame today.