How to Build an Auction or Bidding System in FlutterFlow

Create an auctions collection with fields: title (String), description (String), imageUrl (String), startingPrice (Double), currentBid (Double, initially same as startingPrice), currentBidderId (String, initially empty), minIncrement (Double: minimum amount above current bid, e.g., 5.00), endTime (Timestamp), status (String: 'active', 'ended'), bidCount (Integer, default 0), and sellerId (String). Under each auction, create a bids subcollection with fields: userId (String), displayName (String), amount (Double), and timestamp (Timestamp). Set Firestore rules: any authenticated user can read auctions and bids, but only Cloud Functions can write to the currentBid, currentBidderId, and status fields (to prevent client manipulation). Users can read but not directly write auction documents.

Create an AuctionsPage with a ListView bound to a Backend Query on auctions where status equals 'active', ordered by endTime ascending (ending soonest first). Set Single Time Query to OFF for real-time updates so new bids update the currentBid display live. Each auction card Component shows: Image (imageUrl), title Text, current bid Text (bold, large, prefixed with currency symbol), bidCount Text ('12 bids'), and a countdown timer. For the countdown, create a Custom Function named getTimeRemaining that takes endTime Timestamp and returns a formatted string like '2h 15m 30s' or 'Ending soon!' when under 5 minutes. To update every second, use a Timer Custom Action that re-calculates the countdown every 1000ms and updates a Component State variable. Style items ending within 5 minutes with a red border for urgency. Tap navigates to AuctionDetailPage.

Create an AuctionDetailPage receiving the auction document reference. Display the item image as a large hero, title, description, seller info, and prominent current bid display. Set the auction doc Backend Query to real-time (Single Time Query OFF) so the current bid updates live when other users bid. Below, add a bid history section: ListView bound to auctions/{auctionId}/bids ordered by timestamp descending, limit 10. Each row shows the bidder's displayName, bid amount, and relative timestamp. At the bottom, add a sticky Container with: a TextField for the bid amount (number keyboard, hint showing minimum bid: currentBid + minIncrement), and a Place Bid button. The button is disabled (Conditional Enabling) when: the auction has ended (status != 'active'), the user is the seller, or the entered amount is less than currentBid + minIncrement.

Create a callable Cloud Function named placeBid that receives auctionId and bidAmount. The function uses a Firestore transaction to: (1) read the current auction document; (2) verify status is 'active'; (3) verify endTime is in the future; (4) verify bidAmount > currentBid + minIncrement; (5) verify the bidder is not the seller; (6) atomically update currentBid, currentBidderId, and increment bidCount; (7) create a bid document in the bids subcollection. The transaction ensures that if two users bid simultaneously, only the valid higher bid succeeds and the other gets an error. In FlutterFlow, wire the Place Bid button to call this Cloud Function via Backend Call. On success, show a SnackBar confirming the bid. On error, show the error message (e.g., 'Someone outbid you' or 'Auction has ended').

1// Cloud Function: placeBid
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4
5exports.placeBid = functions.https.onCall(async (data, context) => {
6  if (!context.auth) throw new functions.https.HttpsError('unauthenticated', 'Login required');
7  const { auctionId, bidAmount } = data;
8  const uid = context.auth.uid;
9
10  const auctionRef = admin.firestore().collection('auctions').doc(auctionId);
11  const userDoc = await admin.firestore().collection('users').doc(uid).get();
12  const displayName = userDoc.data()?.displayName || 'Anonymous';
13
14  await admin.firestore().runTransaction(async (txn) => {
15    const auction = await txn.get(auctionRef);
16    if (!auction.exists) throw new functions.https.HttpsError('not-found', 'Auction not found');
17    const d = auction.data();
18    if (d.status !== 'active') throw new functions.https.HttpsError('failed-precondition', 'Auction has ended');
19    if (d.endTime.toDate() < new Date()) throw new functions.https.HttpsError('failed-precondition', 'Auction has ended');
20    if (uid === d.sellerId) throw new functions.https.HttpsError('failed-precondition', 'Sellers cannot bid on own items');
21    if (bidAmount <= d.currentBid + d.minIncrement) {
22      throw new functions.https.HttpsError('failed-precondition',
23        `Bid must be at least $${(d.currentBid + d.minIncrement).toFixed(2)}`);
24    }
25    txn.update(auctionRef, {
26      currentBid: bidAmount,
27      currentBidderId: uid,
28      bidCount: admin.firestore.FieldValue.increment(1),
29    });
30    txn.create(auctionRef.collection('bids').doc(), {
31      userId: uid, displayName, amount: bidAmount,
32      timestamp: admin.firestore.FieldValue.serverTimestamp(),
33    });
34  });
35  return { success: true };
36});

Create a scheduled Cloud Function named endAuctions that runs every minute (or every 5 minutes). It queries auctions where status equals 'active' and endTime is less than or equal to now. For each expired auction, update status to 'ended'. If currentBidderId is not empty (someone bid), create a notification document for the winner at users/{currentBidderId}/notifications with title 'You won!', body including the item title and winning bid amount. Also notify the seller that their item sold. If no one bid (currentBidderId is empty), notify the seller that the auction ended without bids. In the FlutterFlow UI, add Conditional Visibility on the Place Bid section: hide when status equals 'ended'. Show a 'Winner' banner Container when status is 'ended' and currentBidderId is not empty, displaying the winner's name and winning bid.