How to Build a Marketplace with FlutterFlow

Create a sellers collection with fields: userId (String), storeName (String), storeDescription (String), logoUrl (String), rating (Double, default 0), reviewCount (Integer, default 0), isVerified (Boolean, default false), and stripeAccountId (String — their Stripe Connect account). Create a products collection: sellerId (String), name (String), description (String), price (Double), images (List of Strings), category (String), status (String — active, sold, paused), and createdAt (Timestamp). Create an orders collection: buyerId (String), sellerId (String), productId (String), productName (String), total (Double), commission (Double — platform fee), sellerPayout (Double), status (String — placed, shipped, delivered, cancelled), and timestamp (Timestamp). Set Firestore rules: sellers can CRUD their own products; buyers can read all products and create orders; only Cloud Functions update order financials.

Create a BrowsePage with a GridView (crossAxisCount: 2) bound to a Backend Query on products where status == active. Add a DropDown for category filter and a Slider for price range at the top. Each product card shows: Image (first from images array), Text (name), Text (price formatted as currency), and a small Row with the seller's storeName (query sellers where userId == product.sellerId). On Tap, navigate to ProductDetailPage showing full images in a PageView, description, price, seller info card (storeName + rating stars + reviewCount), and a Buy Now button. Add a Seller Profile link that navigates to SellerStorePage filtered to that seller's products with their store banner, description, and all active listings.

Create a SellerDashboardPage gated behind a role check (only users with a sellers document). Use a TabBar with three tabs: Products, Orders, and Earnings. Products tab: ListView of the seller's products (where sellerId == currentUser.uid) with each row showing thumbnail, name, price, status badge, and Edit/Delete IconButtons. Add a FAB to navigate to AddProductPage — a form with TextFields for name, description, price, DropDown for category, and FlutterFlowUploadButton for images (up to 5). Edit updates the existing document; delete sets status to paused (soft delete). Orders tab: ListView of orders where sellerId == currentUser.uid showing buyer name, product, status DropDown for updating fulfillment. Earnings tab: Container cards showing total revenue, platform commission, and net payout calculated from orders query.

Each seller needs a Stripe Connect Express account. Deploy a Cloud Function onboardSeller that calls stripe.accounts.create({type: 'express'}) and returns the onboarding URL. On the seller dashboard, add a Connect Stripe button that calls this function, saves the returned stripeAccountId to the seller document, and opens the Stripe onboarding URL via Launch URL. For purchases, deploy a Cloud Function createMarketplaceCheckout that creates a Stripe Checkout Session with payment_intent_data.application_fee_amount set to your platform commission (e.g., 10% of product price) and transfer_data.destination set to the seller's stripeAccountId. The buyer clicks Buy Now, the Cloud Function returns the checkout URL, and Launch URL opens Stripe's payment page. On checkout.session.completed webhook, create the order document with total, commission, and sellerPayout calculated.

1// Cloud Function: createMarketplaceCheckout
2const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
3
4exports.createMarketplaceCheckout = async (req, res) => {
5  const { productName, price, sellerStripeAccountId, buyerId, sellerId, productId } = req.body;
6  const commission = Math.round(price * 10); // 10% in cents
7  const session = await stripe.checkout.sessions.create({
8    payment_method_types: ['card'],
9    line_items: [{
10      price_data: {
11        currency: 'usd',
12        product_data: { name: productName },
13        unit_amount: Math.round(price * 100),
14      },
15      quantity: 1,
16    }],
17    mode: 'payment',
18    payment_intent_data: {
19      application_fee_amount: commission,
20      transfer_data: { destination: sellerStripeAccountId },
21    },
22    metadata: { buyerId, sellerId, productId },
23    success_url: 'https://yourapp.com/order-success',
24    cancel_url: 'https://yourapp.com/product/' + productId,
25  });
26  res.json({ url: session.url });
27};

Create a messages subcollection under each order document: orders/{orderId}/messages with fields senderId (String), text (String), and timestamp (Timestamp). On the order detail page (accessible to both buyer and seller), add a ListView bound to the messages subcollection ordered by timestamp ascending with Single Time Query OFF for real-time updates. Style messages as chat bubbles: right-aligned blue for the current user, left-aligned grey for the other party. Pin a TextField + Send button at the bottom. The Send action creates a message document and updates a lastMessageTime field on the order for sorting. Restrict Firestore rules: only the buyer (buyerId) and seller (sellerId) of that order can read/write messages.