How to Set Up a Real-Time Auction System in FlutterFlow

Create an `auctions` collection with fields: title (String), description (String), imageUrl (String), startingPrice (Double), currentBid (Double), currentBidderId (String), endTime (Timestamp), status (String: active/ended), bidCount (Integer). Add a `bids` subcollection under each auction with fields: bidderId (String), bidderName (String), amount (Double), timestamp (Timestamp). In FlutterFlow, register both collections in the Data section. The currentBid and currentBidderId on the auction document enable a single real-time listener to show the latest bid without querying the bids subcollection.

Create an AuctionDetail page that receives an auctionId parameter. Add a Backend Query on the auctions collection for this document with Single Time Query set to OFF — this creates a real-time listener that fires whenever the document changes. Display the auction image in an Image widget, the title as a heading Text, and the current bid amount in a large bold Text widget. To animate bid changes, wrap the bid Text in a Container and use a Conditional Style: when the bid value changes, briefly flash the background color to green for 500ms using an Animated Container or Custom Widget with AnimatedSwitcher. Below the bid, show the current bidder name and total bid count.

Add a Container below the bid display for the countdown timer. Use a Custom Widget that takes the endTime Timestamp as a parameter and runs a Timer.periodic every second. Calculate the remaining time: endTime - DateTime.now(). Display as 'Xh Xm Xs' in a Text widget. Change the Container background color based on remaining time: green when more than 5 minutes remain, yellow when between 1 and 5 minutes, red when under 1 minute, and pulsing red (animated opacity) when under 10 seconds. When the timer reaches zero, update the UI to show 'Auction Ended' and disable the bid button.

1// Custom Widget: AuctionCountdown
2import 'dart:async';
3import 'package:flutter/material.dart';
4
5class AuctionCountdown extends StatefulWidget {
6  final double width;
7  final double height;
8  final DateTime endTime;
9
10  const AuctionCountdown({
11    Key? key,
12    required this.width,
13    required this.height,
14    required this.endTime,
15  }) : super(key: key);
16
17  @override
18  State<AuctionCountdown> createState() => _AuctionCountdownState();
19}
20
21class _AuctionCountdownState extends State<AuctionCountdown> {
22  Timer? _timer;
23  Duration _remaining = Duration.zero;
24
25  @override
26  void initState() {
27    super.initState();
28    _timer = Timer.periodic(
29      const Duration(seconds: 1), (_) => _tick());
30    _tick();
31  }
32
33  void _tick() {
34    final now = DateTime.now();
35    setState(() {
36      _remaining = widget.endTime.isAfter(now)
37        ? widget.endTime.difference(now)
38        : Duration.zero;
39    });
40  }
41
42  Color get _bgColor {
43    if (_remaining.inMinutes >= 5) return Colors.green;
44    if (_remaining.inMinutes >= 1) return Colors.orange;
45    return Colors.red;
46  }
47
48  @override
49  void dispose() {
50    _timer?.cancel();
51    super.dispose();
52  }
53
54  @override
55  Widget build(BuildContext context) {
56    final h = _remaining.inHours;
57    final m = _remaining.inMinutes % 60;
58    final s = _remaining.inSeconds % 60;
59    return Container(
60      width: widget.width,
61      padding: const EdgeInsets.all(12),
62      decoration: BoxDecoration(
63        color: _bgColor,
64        borderRadius: BorderRadius.circular(8),
65      ),
66      child: Text(
67        _remaining == Duration.zero
68          ? 'Auction Ended'
69          : '${h}h ${m}m ${s}s',
70        textAlign: TextAlign.center,
71        style: const TextStyle(
72          color: Colors.white,
73          fontSize: 24,
74          fontWeight: FontWeight.bold),
75      ),
76    );
77  }
78}

Below the countdown, add a Row with a TextField (number input, hint text 'Enter bid amount') and a Button labeled 'Place Bid'. On button tap, validate that the entered amount is greater than the current bid plus a minimum increment (e.g., currentBid + 1.00). If invalid, show a SnackBar error. If valid, call a Cloud Function via an API Call that receives auctionId and bidAmount. The Cloud Function uses a Firestore transaction to read the current auction, verify the bid is still higher than currentBid, create a bid document in the subcollection, update currentBid and currentBidderId on the auction document, and increment bidCount. The transaction prevents race conditions where two users bid simultaneously.

In the same Cloud Function that processes bids, after successfully recording the bid, check if the auction's endTime is within 30 seconds of the current server time. If so, extend endTime by 2 minutes using admin.firestore.Timestamp.fromDate(new Date(endTime.toDate().getTime() + 120000)). This anti-sniping rule gives all bidders a fair chance to respond to last-second bids. The real-time listener on the auction document will automatically update the countdown timer on all connected clients to reflect the new endTime.

At the bottom of the auction page, add a horizontal ListView bound to the bids subcollection ordered by timestamp descending, limited to the last 20 bids. Each item is a compact Container showing the bidder name and amount in a Chip-like style. Set Single Time Query to OFF so new bids appear in the ticker instantly. For sound effects, create a Custom Action using the audioplayers package: on each new bid detected (listen to the auction document's bidCount field changing), play a short notification sound from an asset file. This gives the auction a lively, engaging feel.