How to Set Up an Online Art Gallery with Auctions in FlutterFlow

Create an artworks collection with fields: title (String), artistName (String), artistId (String), medium (String), dimensions (String), imageUrls (String Array), description (String), startingPrice (Double), currentBid (Double), currentBidderId (String), auctionEndTime (Timestamp), status (String: forSale, auction, or sold), tags (String Array). Create an artists collection with fields: userId (String), displayName (String), bio (String), avatarUrl (String), portfolioImageUrls (String Array), totalSales (Integer). Under artworks, create a bids subcollection with fields: userId (String), amount (Double), timestamp (Timestamp).

Create a GalleryPage. Add a Custom Widget using the flutter_staggered_grid_view package. The widget takes a list of artwork documents as a parameter and renders them in a StaggeredGrid with 2 columns. Each artwork card is a Container with the artwork image set to BoxFit.cover, preserving the original aspect ratio by calculating the crossAxisCellCount based on the image dimensions. Below the image, add a small overlay with the title and artist name in white text on a dark gradient. Tap action on each card navigates to an ArtworkDetailPage passing the artwork document reference. Add ChoiceChips above the grid for filtering by tags such as Painting, Sculpture, Photography, and Digital.

1// Custom Widget: MasonryArtGrid
2import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';
3
4class MasonryArtGrid extends StatelessWidget {
5  final List<Map<String, dynamic>> artworks;
6  final Function(String) onTap;
7
8  const MasonryArtGrid({required this.artworks, required this.onTap});
9
10  @override
11  Widget build(BuildContext context) {
12    return MasonryGridView.count(
13      crossAxisCount: 2,
14      mainAxisSpacing: 8,
15      crossAxisSpacing: 8,
16      itemCount: artworks.length,
17      itemBuilder: (context, index) {
18        final art = artworks[index];
19        return GestureDetector(
20          onTap: () => onTap(art['id']),
21          child: ClipRRect(
22            borderRadius: BorderRadius.circular(8),
23            child: Image.network(art['imageUrls'][0], fit: BoxFit.cover),
24          ),
25        );
26      },
27    );
28  }
29}

Create an ArtworkDetailPage with Route Parameter artworkRef. Display the artwork images in a PageView at the top half of the screen for swiping through multiple images. Wrap each image in an InteractiveViewer widget (Custom Widget) to enable pinch-to-zoom. Below the images, add the artwork title, artist name (tappable to navigate to artist profile), medium, dimensions, and description. If the artwork status is 'auction', show the current bid, a countdown timer, and a Place Bid button. If status is 'forSale', show the price and a Buy Now button. Add a provenance section Container with the artwork's history and a certificate of authenticity indicator.

On the artwork detail page for auction items, add a TextField for the bid amount and a Place Bid button. The bid action calls a Cloud Function that validates the bid: check that the bid amount is greater than currentBid plus a minimum increment, the auction has not ended (auctionEndTime is in the future), and the bidder is not the current highest bidder. The Cloud Function uses a Firestore transaction to atomically read the current bid, verify the new bid is still higher, update currentBid and currentBidderId on the artwork document, and create a bid document in the bids subcollection. Enable real-time listening on the artwork document by disabling Single Time Query so the current bid and bidder update live for all viewers. Add a countdown timer using a Custom Function that calculates the remaining time from auctionEndTime.

Create an ArtistProfilePage with Route Parameter artistId. Query the artists collection for the matching document. Display the artist avatar as a CircleImage, display name, and bio at the top. Below, add a TabBar with two tabs: Portfolio and For Sale. The Portfolio tab shows a GridView of all artworks by this artist. The For Sale tab filters to artworks where status is forSale or auction. Each artwork card shows the image, title, and price or current bid. Add a Follow Artist button that creates a following document under the current user for receiving notifications about new artworks from this artist.

Create a scheduled Cloud Function that runs every minute, querying artworks where status is 'auction' and auctionEndTime is in the past. For each ended auction, the function sets status to 'sold', records the winning bid details, and sends a push notification to the winning bidder and the artist. Create a notification for outbid events too: when a new bid is placed, the Cloud Function sends a notification to the previously highest bidder saying they have been outbid. On the GalleryPage, add a 'Won Auctions' section for the current user showing artworks they have won.