How to Create a Loyalty Card System in FlutterFlow

Create a loyalty_cards collection with fields: userId (String), storeId (String), currentStamps (Integer, default 0), maxStamps (Integer, default 10), rewardDescription (String, e.g., 'Free coffee'), isRedeemable (Boolean, default false), and createdAt (Timestamp). Create a stamp_events collection with fields: cardId (String), userId (String), stampedAt (Timestamp), and stampedBy (String, the staff userId). The stamp_events log provides an audit trail of every stamp for fraud detection.

Create a LoyaltyCard page. Add a Backend Query for the user's loyalty card document (query loyalty_cards where userId == currentUser AND storeId == selectedStore). Display a Container styled as a card with the store name and reward description at the top. Add a GridView with crossAxisCount: 5 and childCount: 10 (from maxStamps). Each cell is a Container with a Circle shape. Use Conditional Styling: if the cell index is less than currentStamps, fill the circle with a green background and a checkmark Icon. Otherwise, show an outlined empty circle. Below the grid, add a Text showing 'X of 10 stamps' with the current count.

Create a Custom Widget using the qr_flutter package. Add qr_flutter: ^4.1.0 to Pubspec Dependencies. The widget takes a data String parameter containing the customer's userId and cardId encoded as a JSON string. Render QrImageView(data: widget.data, size: 200). On the LoyaltyCard page, add this Custom Widget below the stamp grid with data set to a JSON string like '{"userId":"uid","cardId":"cardId"}'. Add a Text label: 'Show this to staff to collect your stamp'. The QR code is the verification mechanism that prevents customers from stamping their own cards.

Create a StaffStamp page accessible only to users with a staff role. Add a Custom Widget using mobile_scanner that scans QR codes. When a QR code is detected, parse the JSON to extract userId and cardId. Call a Cloud Function called addStamp that receives cardId and staffUserId. The Cloud Function validates that the card exists, currentStamps < maxStamps, and no stamp was added in the last 5 minutes (cooldown to prevent accidental double-stamps). If valid, it increments currentStamps, creates a stamp_event document, and if currentStamps now equals maxStamps, sets isRedeemable to true.

1// Cloud Function: addStamp
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4admin.initializeApp();
5
6exports.addStamp = functions.https.onCall(async (data, context) => {
7  const { cardId } = data;
8  const staffId = context.auth.uid;
9  const db = admin.firestore();
10  const cardRef = db.collection('loyalty_cards').doc(cardId);
11
12  return db.runTransaction(async (tx) => {
13    const card = await tx.get(cardRef);
14    if (!card.exists) throw new functions.https.HttpsError('not-found', 'Card not found');
15    const cardData = card.data();
16    if (cardData.currentStamps >= cardData.maxStamps) {
17      throw new functions.https.HttpsError('failed-precondition', 'Card is full');
18    }
19    const newStamps = cardData.currentStamps + 1;
20    const isRedeemable = newStamps >= cardData.maxStamps;
21    tx.update(cardRef, { currentStamps: newStamps, isRedeemable });
22    tx.create(db.collection('stamp_events').doc(), {
23      cardId, userId: cardData.userId, stampedAt: admin.firestore.FieldValue.serverTimestamp(), stampedBy: staffId,
24    });
25    return { newStamps, isRedeemable };
26  });
27});

On the LoyaltyCard page, add Conditional Visibility on a 'Redeem Reward' Button that shows only when isRedeemable is true. Style the full punch card with a celebratory gold border when redeemable. On the Redeem button tap, show a confirmation dialog explaining the reward. On confirm, call a Cloud Function called redeemReward that sets isRedeemable to false, resets currentStamps to 0, and creates a new blank loyalty card or resets the existing one. Log the redemption in a reward_redemptions collection for tracking. Show a success SnackBar confirming the reward was applied.