How to Set Up a Community-Driven Product Review System in FlutterFlow

Add a subcollection reviews under each product document with fields: userId (String), rating (int, 1-5), title (String), body (String), imageUrls (list of Strings), helpfulCount (int, default 0), timestamp (Timestamp). Add a subcollection helpful_votes under each review with the document ID being the voter's userId (prevents duplicate votes). On the product document, add denormalized fields: averageRating (double), reviewCount (int), ratingDistribution (map: {'1': count, '2': count, ...}). These denormalized fields are updated by Cloud Functions so the product page never needs to read all reviews just to display the average.

On the Write Review page, create a Row with five Icon widgets. Use a Page State variable selectedRating (int, default 0). Each star Icon checks: if its position (1-5) is less than or equal to selectedRating, show Icons.star in amber; otherwise show Icons.star_border in grey. Each star's On Tap action sets selectedRating to that star's position number. Below the stars, add a Text showing the rating label: 1 = Poor, 2 = Fair, 3 = Good, 4 = Very Good, 5 = Excellent. Add TextFields for title and body (multiline), and a FlutterFlowUploadButton for optional review photos.

The Submit Review button runs an Action Flow: validate that selectedRating is greater than 0 and title is not empty. Create a document in the products/{productId}/reviews subcollection with the rating, title, body, imageUrls (from upload), userId, and timestamp. After creation, call a Cloud Function recalculateRating(productId) that queries all reviews for that product, computes the new averageRating, reviewCount, and ratingDistribution map, then updates the product document. This keeps the product page fast since it reads pre-computed values instead of aggregating on every load.

1// Cloud Function: recalculateRating
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4admin.initializeApp();
5
6exports.recalculateRating = functions.firestore
7  .document('products/{productId}/reviews/{reviewId}')
8  .onWrite(async (change, context) => {
9    const productId = context.params.productId;
10    const reviewsSnap = await admin.firestore()
11      .collection('products').doc(productId)
12      .collection('reviews').get();
13
14    let total = 0;
15    const dist = { '1': 0, '2': 0, '3': 0, '4': 0, '5': 0 };
16    reviewsSnap.forEach(doc => {
17      const r = doc.data().rating;
18      total += r;
19      dist[String(r)]++;
20    });
21
22    const count = reviewsSnap.size;
23    const avg = count > 0 ? parseFloat((total / count).toFixed(1)) : 0;
24
25    await admin.firestore().collection('products')
26      .doc(productId).update({
27        averageRating: avg,
28        reviewCount: count,
29        ratingDistribution: dist,
30      });
31  });

On the product detail page, add a rating summary section. Show the averageRating as a large Text (e.g., 4.3) next to a Row of filled/empty star Icons reflecting the average. Show reviewCount as text below (e.g., 'Based on 47 reviews'). For the distribution bars: create five Rows, one for each star level (5 down to 1). Each Row shows: the star number Text, a LinearPercentIndicator where the percentage is ratingDistribution[starLevel] divided by reviewCount, and the count Text. This gives users a quick visual breakdown of how ratings are distributed.

On each review card, add a Helpful button showing the helpfulCount and a thumbs-up Icon. On tap, check if a document exists in the review's helpful_votes subcollection with the current user's ID. If it exists, show a SnackBar saying they already voted. If not, create the vote document and increment the review's helpfulCount using FieldValue.increment(1). Using the userId as the document ID guarantees uniqueness at the Firestore level, preventing race condition double-votes even if the client check is bypassed. Add a sort option to order reviews by helpfulCount descending so the most useful reviews appear first.

When displaying each review, check if the reviewer has a completed order containing this product. Query the orders collection where userId equals the reviewer's ID, status equals 'completed', and the items array contains the current productId. If a matching order exists, show a green Container badge with a checkmark Icon and the text 'Verified Purchase' next to the reviewer name. This check can be done via a Backend Query on each review card or pre-computed by the Cloud Function at review submission time (store isVerifiedPurchase boolean on the review document for faster reads).