How to Create an E-Commerce Store Using FlutterFlow

Create a products collection with fields: name (String), description (String), price (Double), images (List of Strings — image URLs), category (String), sizes (List of Strings), colors (List of Strings), and inStock (Boolean, default true). Create an orders collection with fields: userId (String), items (List of Maps — each with productId, productName, qty, price, size, color), total (Double), status (String — pending, confirmed, shipped, delivered), and timestamp (Timestamp). Add 5-10 test products in the Firebase Console with real image URLs and varied categories like Clothing, Accessories, Electronics.

Create a ShopPage with a Column layout. At the top, add a ChoiceChips widget with options All, Clothing, Accessories, Electronics — bind the selected value to a Page State variable categoryFilter (String, default All). Below it, add a RangeSlider (or two Slider widgets) for min/max price bound to Page State priceMin and priceMax. Add a GridView with crossAxisCount 2 (responsive: 3 on tablet) bound to a Backend Query on products. Apply query filters: if categoryFilter != All, where category == categoryFilter; where price >= priceMin AND price <= priceMax; where inStock == true. Each grid cell is a Container with a Column: Image (first item from images array), Text (name), and Text (price formatted as currency).

Create ProductDetailPage that receives a productRef parameter. Add a Backend Query for the product document. Build the layout: a PageView widget at the top bound to the product's images array showing each image in full width with dot indicators. Below, add a Text for the product name (headlineMedium), a Text for price (headlineSmall, primary color), a short description Text. Add ChoiceChips for size options bound to the product's sizes list, and another ChoiceChips for color options. At the bottom, place an Add to Cart ElevatedButton. On tap, the button triggers a Custom Function that serializes the selection (productId, name, qty: 1, price, selectedSize, selectedColor) and appends it to the App State cartItems list.

In App State, create a variable cartItems of type List of JSON (persisted: ON). This stores cart entries as JSON objects with productId, productName, qty, price, size, and color. Create a CartPage with a ListView bound to cartItems. Each row shows: Image (product thumbnail), Text (name + size + color), Row with IconButton minus and plus to decrement/increment qty (update the cartItems list via Custom Function), and Text (line total = qty * price). At the bottom, display the cart total calculated by a Custom Function that sums all line totals. Add a Badge widget on the AppBar cart icon showing cartItems.length. The persisted App State ensures the cart survives page navigation and app restarts.

Deploy a Cloud Function createCheckoutSession that accepts the cartItems array, creates Stripe line items from each cart entry (name, unit_amount in cents, quantity), calls stripe.checkout.sessions.create with mode: payment and success/cancel URLs, and returns the session URL. In FlutterFlow, add a Checkout button on the CartPage that calls this Cloud Function via an API Call action, then opens the returned URL with Launch URL action. Deploy a second Cloud Function handleStripeWebhook listening for checkout.session.completed: it creates an order document in Firestore with the cart items, total, status: confirmed, and the authenticated userId. After payment, the success URL returns the user to an OrderConfirmationPage. Clear the cartItems App State on successful return.

1// Cloud Function: createCheckoutSession
2const stripe = require('stripe')(process.env.STRIPE_SECRET_KEY);
3
4exports.createCheckoutSession = async (req, res) => {
5  const { cartItems, userId } = req.body;
6  const lineItems = cartItems.map(item => ({
7    price_data: {
8      currency: 'usd',
9      product_data: { name: `${item.productName} (${item.size}, ${item.color})` },
10      unit_amount: Math.round(item.price * 100),
11    },
12    quantity: item.qty,
13  }));
14  const session = await stripe.checkout.sessions.create({
15    payment_method_types: ['card'],
16    line_items: lineItems,
17    mode: 'payment',
18    success_url: 'https://yourapp.com/order-success?session_id={CHECKOUT_SESSION_ID}',
19    cancel_url: 'https://yourapp.com/cart',
20    metadata: { userId },
21  });
22  res.json({ url: session.url });
23};

Create an OrdersPage with a ListView bound to a Backend Query on orders where userId == currentUser.uid, ordered by timestamp descending. Each order card shows: order date (formatted timestamp), status with a color-coded Container badge (green for delivered, blue for shipped, yellow for confirmed, grey for pending), item count, and total amount. Tap an order to navigate to OrderDetailPage showing the full items list, delivery status stepper (Column of status steps with active/completed indicators), and a Support button. For admin use, create a separate AdminOrdersPage where staff can update the status field via a DropDown selector triggering an Update Document action.