How to Create a Virtual Currency System in FlutterFlow

Add a coinBalance (int, default 0) field to your users collection documents. Create a coin_transactions collection with fields: userId (String), type (String: earn, spend, purchase), amount (int, positive for earn/purchase, negative for spend), description (String, e.g., 'Completed profile', 'Bought Galaxy Avatar'), timestamp (Timestamp). Create a store_items collection with fields: name (String), imageUrl (String), coinCost (int), type (String: avatar, theme, powerup), description (String), isActive (bool). Create a coin_packs collection with fields: name (String, e.g., 'Starter Pack'), coinAmount (int, e.g., 100), priceUsd (double, e.g., 0.99), stripePriceId (String). Add sample store items and coin packs.

In your app's main layout or navigation scaffold, add a Row to the AppBar containing a coin Icon (a gold circle or custom coin image) and a Text widget bound to the current user's coinBalance field via a real-time Backend Query (Single Time Query OFF so it updates live). This Row appears on every page so users always see their balance. Style the Text in bold with the coin icon to the left. When the balance changes from any action, the real-time listener updates the display automatically without page refresh.

Create Cloud Functions that award coins for specific actions. For daily login: a callable function checks if the user has already earned today's bonus (query coin_transactions for type earn, description 'Daily Login', timestamp today). If not, atomically increment coinBalance by 10 and create a transaction document. For profile completion: trigger on user document update, check if all required fields are filled, and award 50 coins if so. For ad views: a callable function validates the ad completion token, then awards 5 coins. Each function uses a Firestore transaction to atomically read the balance, add the reward, and write both the updated balance and the transaction document.

1// Cloud Function: awardDailyLogin
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4admin.initializeApp();
5
6exports.awardDailyLogin = functions.https.onCall(async (data, context) => {
7  const userId = context.auth.uid;
8  if (!userId) throw new functions.https.HttpsError('unauthenticated', 'Login required');
9
10  const today = new Date().toISOString().split('T')[0];
11  const existing = await admin.firestore().collection('coin_transactions')
12    .where('userId', '==', userId)
13    .where('description', '==', 'Daily Login')
14    .where('timestamp', '>=', admin.firestore.Timestamp.fromDate(new Date(today)))
15    .limit(1).get();
16
17  if (!existing.empty) return { success: false, message: 'Already claimed today' };
18
19  const userRef = admin.firestore().collection('users').doc(userId);
20  await admin.firestore().runTransaction(async (t) => {
21    const userDoc = await t.get(userRef);
22    const currentBalance = userDoc.data().coinBalance || 0;
23    t.update(userRef, { coinBalance: currentBalance + 10 });
24    t.create(admin.firestore().collection('coin_transactions').doc(), {
25      userId, type: 'earn', amount: 10, description: 'Daily Login',
26      timestamp: admin.firestore.FieldValue.serverTimestamp(),
27    });
28  });
29  return { success: true, awarded: 10 };
30});

Create a StorePage. Query the store_items collection where isActive equals true. Display items in a GridView: each card shows the imageUrl, name, coin cost with a coin icon, and a Buy button. On Buy tap, call a Cloud Function that validates the purchase: check if the user's coinBalance >= coinCost, deduct the cost atomically, create a coin_transactions document with type spend, and add the item to a users/{uid}/purchased_items subcollection. If balance is insufficient, return an error. In FlutterFlow, show a SnackBar with success or insufficient balance messages. Purchased items should be visually marked with a checkmark and the Buy button replaced with Owned.

Create a CoinShopPage or section on the StorePage showing coin packs. Display each pack as a Container card: pack name, coin amount with a coin icon, and real price (e.g., $0.99). On tap, call a Cloud Function that creates a Stripe Checkout Session using the pack's stripePriceId, sets the mode to payment, and returns the checkout URL. Navigate to the URL. On successful payment, a Stripe webhook calls another Cloud Function that reads the checkout session metadata (userId and coinAmount), atomically increments coinBalance, and creates a coin_transactions document with type purchase. Display a Transaction History page querying coin_transactions ordered by timestamp descending.