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

- Tool: FlutterFlow
- Difficulty: Beginner
- Time required: 35-45 min
- Compatibility: FlutterFlow Free+
- Last updated: March 2026

## TL;DR

Create an art gallery app using a masonry grid Custom Widget with flutter_staggered_grid_view to display artworks at their original aspect ratios. Add artist profile pages, a fullscreen InteractiveViewer for zooming into artwork details, and live auction bidding powered by Firestore transactions and real-time listeners. Countdown timers on each auction show remaining time and Cloud Functions handle bid validation and auction settlement.

## Building an Online Art Gallery with Live Auctions in FlutterFlow

An online art gallery needs to showcase artwork beautifully while supporting commercial features like auctions. This tutorial covers building a masonry grid that respects each artwork's unique proportions, artist profiles with portfolios, fullscreen zoom viewing, and a live bidding system with real-time updates and countdown timers.

## Before you start

- A FlutterFlow project with Firestore and authentication configured
- Firebase Cloud Functions enabled for bid validation
- Sample artwork images uploaded to Firebase Storage
- Basic familiarity with Custom Widgets in FlutterFlow

## Step-by-step guide

### 1. Create the Firestore data model for artworks and artists

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).

**Expected result:** Firestore has artworks and artists collections with a bids subcollection under each artwork.

### 2. Build the masonry grid gallery with staggered layout

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.

```
// Custom Widget: MasonryArtGrid
import 'package:flutter_staggered_grid_view/flutter_staggered_grid_view.dart';

class MasonryArtGrid extends StatelessWidget {
  final List<Map<String, dynamic>> artworks;
  final Function(String) onTap;

  const MasonryArtGrid({required this.artworks, required this.onTap});

  @override
  Widget build(BuildContext context) {
    return MasonryGridView.count(
      crossAxisCount: 2,
      mainAxisSpacing: 8,
      crossAxisSpacing: 8,
      itemCount: artworks.length,
      itemBuilder: (context, index) {
        final art = artworks[index];
        return GestureDetector(
          onTap: () => onTap(art['id']),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(8),
            child: Image.network(art['imageUrls'][0], fit: BoxFit.cover),
          ),
        );
      },
    );
  }
}
```

**Expected result:** Artworks display in a Pinterest-style masonry grid where each piece retains its original aspect ratio.

### 3. Build the artwork detail page with fullscreen zoom

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.

**Expected result:** A detail page with swipeable images, pinch-to-zoom, artwork metadata, and context-appropriate purchase or bid options.

### 4. Implement live auction bidding with real-time updates

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.

**Expected result:** Users can place bids that are validated server-side, and all viewers see bid updates in real-time with a live countdown timer.

### 5. Create artist profile pages with portfolio gallery

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.

**Expected result:** Artist profiles showcase their bio, avatar, and complete portfolio with the ability to filter by available works.

### 6. Handle auction settlement and notifications

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.

**Expected result:** Auctions automatically settle when they end, winners are notified, and outbid users receive alerts to place higher bids.

## Complete code example

File: `FlutterFlow Art Gallery Setup`

```text
FIRESTORE DATA MODEL:
  artworks/{artworkId}
    title: String
    artistName: String
    artistId: String
    medium: String
    dimensions: String
    imageUrls: [String]
    description: String
    startingPrice: Double
    currentBid: Double
    currentBidderId: String
    auctionEndTime: Timestamp
    status: "forSale" | "auction" | "sold"
    tags: [String]
    └── bids/{bidId}
          userId: String
          amount: Double
          timestamp: Timestamp

  artists/{artistId}
    userId: String
    displayName: String
    bio: String
    avatarUrl: String
    portfolioImageUrls: [String]
    totalSales: Integer

PAGE: GalleryPage
WIDGET TREE:
  Column
    ├── ChoiceChips (Painting, Sculpture, Photography, Digital)
    └── Custom Widget: MasonryArtGrid
          Data: artworks query filtered by tag
          On Tap: Navigate to ArtworkDetailPage

PAGE: ArtworkDetailPage
WIDGET TREE:
  Column
    ├── PageView (artwork images)
    │     └── InteractiveViewer (pinch-to-zoom per image)
    ├── Text (title, large)
    ├── GestureDetector → Text (artistName, tappable)
    ├── Row (medium + dimensions)
    ├── Text (description)
    ├── Container (provenance + certificate)
    └── Conditional Builder
          ├── Auction: currentBid + countdown + TextField + Place Bid
          └── ForSale: price + Buy Now button

PAGE: ArtistProfilePage
WIDGET TREE:
  Column
    ├── CircleImage (avatar)
    ├── Text (displayName + bio)
    ├── Button (Follow Artist)
    └── TabBar
          ├── Portfolio: GridView of all artworks
          └── For Sale: filtered artworks (forSale + auction)
```

## Common mistakes

- **Using a uniform GridView for artworks that crops all images to the same aspect ratio** — Artworks have intentional proportions. Cropping a tall portrait to a square destroys the composition and misrepresents the piece. Fix: Use a staggered or masonry grid with flutter_staggered_grid_view that preserves each artwork's original aspect ratio.
- **Updating currentBid without a Firestore transaction** — Two users bidding simultaneously can overwrite each other. The lower bid might win because it was written last, even though a higher bid was placed first. Fix: Always use a Firestore transaction in the Cloud Function: read currentBid, verify the new bid is higher, then write atomically.
- **Not validating bids server-side in a Cloud Function** — Client-side validation can be bypassed. A user could submit a bid lower than the current bid or bid on an ended auction by manipulating the request. Fix: Run all bid validation logic in a Cloud Function that checks bid amount, auction end time, and minimum increment before writing to Firestore.
- **Loading all artwork images at full resolution in the gallery grid** — Full-resolution images in a grid consume excessive bandwidth and memory, causing slow loading and potential crashes. Fix: Use thumbnail-sized images for the gallery grid and load full-resolution images only on the detail page. Firebase Storage image resize extension can generate thumbnails automatically.

## Best practices

- Use masonry grid layout to respect each artwork's unique proportions
- Enable InteractiveViewer for pinch-to-zoom on artwork detail images
- Validate all bids in Cloud Functions with Firestore transactions for atomicity
- Use real-time listeners on auction documents so all viewers see live bid updates
- Display countdown timers on active auctions to create urgency
- Generate thumbnail images for gallery views and full-resolution for detail pages
- Add a provenance section for art authenticity and collector confidence
- Send push notifications for outbid alerts and auction settlement

## Frequently asked questions

### Can I add a favorites or wishlist feature for artworks?

Yes. Create a favorites subcollection under each user document. Add a heart IconButton on artwork cards that creates or deletes a favorite document. Display a Favorites page with a Backend Query filtered to the user's favorited artwork IDs.

### How do I handle auction sniping where users bid at the last second?

Implement an anti-sniping rule in the bid Cloud Function: if a bid is placed within the last 2 minutes, extend auctionEndTime by 2 minutes. This gives other bidders a chance to respond.

### Can I add a reserve price that must be met for an auction to close?

Yes. Add a reservePrice field to artworks. In the settlement Cloud Function, check if the winning bid meets the reserve. If not, set status to 'unsold' instead of 'sold' and notify the artist.

### How do I display art with very different aspect ratios effectively?

The masonry grid from flutter_staggered_grid_view automatically handles varying aspect ratios. Store image width and height metadata in Firestore and pass it to the grid widget for accurate sizing before the image loads.

### Can I add AR preview to see artwork on a wall?

Yes. Add a Custom Widget using the ar_flutter_plugin package. Store the artwork's real dimensions in Firestore. The AR view places the artwork image on a detected wall surface at real-world scale for a try-before-you-buy experience.

### Can RapidDev help build a complete art marketplace?

Yes. RapidDev can implement a full art platform with artist onboarding, auction management, payment processing with escrow, shipping integration, certificate of authenticity generation, and AR preview features.

---

Source: https://www.rapidevelopers.com/flutterflow-tutorials/how-to-set-up-an-online-art-gallery-with-auctions-in-flutterflow
© RapidDev — https://www.rapidevelopers.com/flutterflow-tutorials/how-to-set-up-an-online-art-gallery-with-auctions-in-flutterflow