How to Create a Gaming Leaderboard or Community Platform Using FlutterFlow

Create a leaderboard_entries collection with fields: userId (String), displayName (String), avatarUrl (String), score (Integer), rank (Integer), lastUpdated (Timestamp), and gameId (String, for apps with multiple games or levels). Set Firestore rules: any authenticated user can read leaderboard entries, but only Cloud Functions (admin SDK) can write scores. This prevents users from directly manipulating their scores via the Firestore API. Create a composite index on gameId + score (descending) for efficient sorted queries. For time-based filtering, the lastUpdated timestamp is used to filter entries within date ranges.

Create a LeaderboardPage. At the top, add a Container for the podium section. Query leaderboard_entries ordered by score descending, limit 3, filtered by the selected time period. Display the top 3 in a Row with specific styling: the center position (1st place) is elevated higher using padding or a taller Container, 2nd place is on the left, 3rd on the right. Each podium position shows: CircleImage (avatar) with a colored border (gold #FFD700 for 1st, silver #C0C0C0 for 2nd, bronze #CD7F32 for 3rd), Text (displayName), Text (score, bold), and a rank badge Container with the number. Use Conditional Styling to apply the correct medal color based on the index. Add a crown or trophy Icon above the 1st place avatar for extra visual emphasis.

Below the podium, add a ListView bound to a Backend Query on leaderboard_entries ordered by score descending, limit 50, with infinite scroll ON. Set Single Time Query to OFF for real-time updates. Each item is a Row containing: a rank number Text (use the item index + 1 since the query is sorted), CircleImage (avatar, small), Column with displayName and score, and a trailing Text showing the score. Highlight the current user's row: use Conditional Styling to add a distinct background color (light blue or your theme accent) when the entry's userId matches the current user UID. Add a 'You' badge Text next to the current user's name. For the top 3 items in this list, you can either hide them (since they are in the podium) or show them with their medal colors for consistency.

Above the podium, add a Row of ChoiceChips with options: Today, This Week, All Time. Bind the selected value to a Page State variable timePeriod (String). Modify both the podium and list Backend Queries to filter by lastUpdated based on the selected period: for Today, filter where lastUpdated >= start of today; for This Week, filter where lastUpdated >= start of current week (Monday); for All Time, no date filter. Create a Custom Function that returns the start timestamp for each period. When the user taps a different chip, the queries re-execute with the new filter and both the podium and list update. Default to 'All Time' on page load for the broadest view.

Create a callable Cloud Function named submitScore that receives the score and gameId. The function validates: (1) the caller is authenticated; (2) the score is a positive integer within a reasonable range for the game (e.g., 0-1,000,000); (3) optionally, verify game-specific rules (time played, level completed, etc.). If valid, use a Firestore transaction to read the user's current leaderboard entry: if no entry exists, create one; if the new score is higher than the current score, update it; otherwise, ignore (keep the high score). Set lastUpdated to the server timestamp and recalculate ranks by querying all entries sorted by score and updating rank fields. In FlutterFlow, call this Cloud Function via a Backend Call action at the end of a game or achievement, passing the score.

1// Cloud Function: submitScore
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4
5exports.submitScore = functions.https.onCall(async (data, context) => {
6  if (!context.auth) throw new functions.https.HttpsError('unauthenticated', 'Login required');
7  const { score, gameId } = data;
8  if (!Number.isInteger(score) || score < 0 || score > 1000000) {
9    throw new functions.https.HttpsError('invalid-argument', 'Invalid score');
10  }
11
12  const uid = context.auth.uid;
13  const userDoc = await admin.firestore().collection('users').doc(uid).get();
14  const entryRef = admin.firestore().collection('leaderboard_entries').doc(`${gameId}_${uid}`);
15
16  await admin.firestore().runTransaction(async (txn) => {
17    const entry = await txn.get(entryRef);
18    if (!entry.exists || score > entry.data().score) {
19      txn.set(entryRef, {
20        userId: uid,
21        displayName: userDoc.data().displayName || 'Anonymous',
22        avatarUrl: userDoc.data().avatarUrl || '',
23        score: score,
24        gameId: gameId,
25        lastUpdated: admin.firestore.FieldValue.serverTimestamp(),
26      }, { merge: true });
27    }
28  });
29  return { success: true };
30});