Flutter Templates
Building a Multiplatform Game Using Flutter and Back4app

11min
Introduction
Flutter is a versatile open-source framework by Google that allows developers to build natively compiled applications for mobile, web, desktop, and embedded devices from a single codebase. Although Flutter is primarily known for traditional app development, it is increasingly being used for game development due to its performance, extensive package ecosystem, and hot reload functionality.

In this guide, we will walk through how to develop a multiplatform Flappy Bird-style game using Flutter and Flame, a game engine designed for 2D games in Flutter. Additionally, we will connect the game to Back4App, a backend-as-a-service (BaaS) platform, to store user scores and display a leaderboard.

By the end of this guide, you will have a working version of the game that runs on mobile and web platforms, and it will store and retrieve high scores from Back4App.
Prerequisites
To complete this tutorial, you will need:
A Back4app account. Sign up for a free account at Back4app.com.
A Flutter development environment is set up on your local machine. Follow the Flutter installation guide if you haven't set it up yet.
Basic knowledge of Dart, Flutter widgets, and game development concepts.
Step 1 – Setting Up Your Back4app Backend
Create a Back4app Project: Log in to your Back4app account and create a new project.
Create Parse Classes: For this tutorial, we’ll set up a simple backend for managing game-related data. In your Back4app project, create two Parse Classes named Player and GameScore:
Player: Stores player information such as username, level, and achievements.
GameScore: Stores scores and rankings for the game.
Get Your Back4app Credentials: Navigate to your project settings to retrieve your Application ID and Client Key, which you’ll need to connect your Flutter game to Back4app.
Step 2 – Setting Up Your Flutter Project
Create a New Flutter Project: Open your terminal or command prompt and run:
Add Dependencies: Open pubspec.yaml and add the following dependencies:
Initialize Parse in Your App: In lib/main.dart, import the Parse SDK and initialize it in the main function:
Dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'package:flame/flame.dart';
import 'package:flame/game.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyGameApp());
}

class MyGameApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GameScreen(),
    );
  }
}
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk_flutter.dart';
import 'package:flame/flame.dart';
import 'package:flame/game.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  const keyApplicationId = 'YOUR_BACK4APP_APP_ID';
  const keyClientKey = 'YOUR_BACK4APP_CLIENT_KEY';
  const keyParseServerUrl = 'https://parseapi.back4app.com';

  await Parse().initialize(keyApplicationId, keyParseServerUrl,
      clientKey: keyClientKey, autoSendSessionId: true);

  runApp(MyGameApp());
}

class MyGameApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: GameScreen(),
    );
  }
}
﻿
Replace 'YOUR_BACK4APP_APP_ID' and 'YOUR_BACK4APP_CLIENT_KEY' with your actual Back4app credentials.
Step 3 – Setting Up the Game Using Flame
Create the Game Class: Flame is an open-source game engine built on top of Flutter. It provides tools and APIs for building 2D games. Create a simple game class using Flame:
Dart
import 'package:flame/game.dart';
import 'package:flame/components.dart';

class MySimpleGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    super.onLoad();
    add(PlayerComponent());
  }
}

class PlayerComponent extends PositionComponent {
  @override
  Future<void> onLoad() async {
    // Load player sprite or set up player visuals here
    size = Vector2(50, 50); // Set size of the player
    position = Vector2(100, 100); // Set initial position
    // Optionally, add sprite or animations
  }

  @override
  void update(double dt) {
    // Update player state here
  }

  @override
  void render(Canvas canvas) {
    super.render(canvas);
    // Draw player visuals
    final paint = Paint()..color = Colors.blue;
    canvas.drawRect(size.toRect(), paint);
  }
}
import 'package:flame/game.dart';
import 'package:flame/components.dart';

class MySimpleGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    super.onLoad();
    add(PlayerComponent());
  }
}

class PlayerComponent extends PositionComponent {
  @override
  Future<void> onLoad() async {
    // Load player sprite or set up player visuals here
    size = Vector2(50, 50); // Set size of the player
    position = Vector2(100, 100); // Set initial position
    // Optionally, add sprite or animations
  }

  @override
  void update(double dt) {
    // Update player state here
  }

  @override
  void render(Canvas canvas) {
    super.render(canvas);
    // Draw player visuals
    final paint = Paint()..color = Colors.blue;
    canvas.drawRect(size.toRect(), paint);
  }
}
﻿
  2. Create the Game Screen: Update the GameScreen widget to display the game:
Dart
class GameScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MySimpleGame().widget,
    );
  }
}
class GameScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MySimpleGame().widget,
    );
  }
}
﻿
  3. Run the Game: You can now run your app using flutter run to see your simple game in action. You should see a blue square representing the player.
Step 4 – Managing Game Data with Back4app
Saving Player Data: Next, let's create a function to save player data to Back4app when the player levels up or achieves something:
Dart
Future<void> savePlayerData(String username, int level, List<String> achievements) async {
  final player = ParseObject('Player')
    ..set('username', username)
    ..set('level', level)
    ..set('achievements', achievements);

  final response = await player.save();
  if (response.success) {
    print('Player data saved successfully');
  } else {
    print('Failed to save player data');
  }
}
Future<void> savePlayerData(String username, int level, List<String> achievements) async {
  final player = ParseObject('Player')
    ..set('username', username)
    ..set('level', level)
    ..set('achievements', achievements);

  final response = await player.save();
  if (response.success) {
    print('Player data saved successfully');
  } else {
    print('Failed to save player data');
  }
}
﻿
   2. Retrieving High Scores: You can also fetch the high scores for your game from       Back4app to display on a leaderboard:
Dart
Future<List<ParseObject>> fetchHighScores() async {
  final query = QueryBuilder<ParseObject>(ParseObject('GameScore'))
    ..orderByDescending('score')
    ..setLimit(10);

  final response = await query.query();
  if (response.success && response.results != null) {
    return response.results as List<ParseObject>;
  } else {
    print('Failed to fetch high scores');
    return [];
  }
}
Future<List<ParseObject>> fetchHighScores() async {
  final query = QueryBuilder<ParseObject>(ParseObject('GameScore'))
    ..orderByDescending('score')
    ..setLimit(10);

  final response = await query.query();
  if (response.success && response.results != null) {
    return response.results as List<ParseObject>;
  } else {
    print('Failed to fetch high scores');
    return [];
  }
}
﻿
 3. Display the Leaderboard: Use ListView.builder in a Flutter widget to display the top 10 scores:
Dart
class LeaderboardScreen extends StatefulWidget {
  @override
  _LeaderboardScreenState createState() => _LeaderboardScreenState();
}

class _LeaderboardScreenState extends State<LeaderboardScreen> {
  List<ParseObject> highScores = [];

  @override
  void initState() {
    super.initState();
    fetchHighScores().then((scores) {
      setState(() {
        highScores = scores;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Leaderboard')),
      body: ListView.builder(
        itemCount: highScores.length,
        itemBuilder: (context, index) {
          final score = highScores[index];
          return ListTile(
            title: Text(score.get<String>('playerId') ?? 'Unknown Player'),
            subtitle: Text('Score: ${score.get<int>('score')}'),
          );
        },
      ),
    );
  }
}
class LeaderboardScreen extends StatefulWidget {
  @override
  _LeaderboardScreenState createState() => _LeaderboardScreenState();
}

class _LeaderboardScreenState extends State<LeaderboardScreen> {
  List<ParseObject> highScores = [];

  @override
  void initState() {
    super.initState();
    fetchHighScores().then((scores) {
      setState(() {
        highScores = scores;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Leaderboard')),
      body: ListView.builder(
        itemCount: highScores.length,
        itemBuilder: (context, index) {
          final score = highScores[index];
          return ListTile(
            title: Text(score.get<String>('playerId') ?? 'Unknown Player'),
            subtitle: Text('Score: ${score.get<int>('score')}'),
          );
        },
      ),
    );
  }
}
﻿
Step 5 – Adding Advanced Features with Flame
If you want to add more complex game mechanics, animations, or interactions, you can expand your use of Flame by introducing additional components such as sprites, physics, and collision detection. Flame also supports integrating with Firebase, enabling multiplayer features, in-app purchases, and more.
Conclusion
In this tutorial, you learned how to use Flutter and Flame to build a simple multiplatform game and how to integrate Back4app for managing game data such as player profiles and high scores. Flutter's ability to deploy to multiple platforms from a single codebase, combined with Back4app's robust backend services, makes this a powerful stack for developing and scaling games.
Whether creating a simple casual game or a more complex interactive experience, Flutter and Back4app provide the tools to build, deploy, and manage your game efficiently.
For more information, check out the Flutter documentation and the Back4app documentation. Happy coding!
Updated 08 Oct 2024
Did this page help you?
Meeting Room Booking App Tutorial with Back4App, Next.js and Vercel
How to Build an AI Email Responder App with Flutter and Back4App