How to Build a Charity or Crowdfunding Platform with FlutterFlow

Create a campaigns collection with fields: title (String), description (String), imageUrl (String), goalAmount (Number), raisedAmount (Number, default 0), backerCount (Integer, default 0), endDate (Timestamp), createdBy (String, userId), category (String), status (String: 'active', 'funded', 'closed'). Create a donations collection with: campaignId (String), userId (String), amount (Number), timestamp (Timestamp), isAnonymous (Boolean). Add a Firestore index on campaigns for category + status + raisedAmount for efficient discovery queries.

Create a DiscoverPage with a Column layout. At the top, add a TextField with a search icon prefix for searching campaigns by title. Below it, add a Row of ChoiceChips for categories (Education, Health, Technology, Community, Creative, Emergency). Add a GridView with a Backend Query on campaigns where status == 'active', filtered by the selected category ChoiceChip. Each grid cell is a CampaignCard Component showing: Image (thumbnailUrl), title Text, LinearPercentIndicator (raisedAmount/goalAmount), raisedAmount Text, and days remaining calculated from endDate.

Create a CampaignDetailPage with Route Parameter campaignId. Use a SingleChildScrollView containing a Column. Add: hero Image (full width), title Text (headlineMedium), Row with creator avatar CircleImage and name, LinearPercentIndicator (large, showing percentage funded), Row of three stat Containers (raisedAmount, backerCount, daysLeft), description Text (multiline), and a prominent Donate Button at the bottom fixed with a Container. Show a 'Goal Reached' banner Container with Conditional Visibility when raisedAmount >= goalAmount.

On Donate Button tap, open a DonateSheet Bottom Sheet Component. Display a Row of four preset amount Containers ($10, $25, $50, $100) that set a Page State selectedAmount on tap. Below, add a TextField for custom amounts with a number keyboard. Add an isAnonymous Switch. The Donate Button in the sheet calls a Cloud Function createDonationCheckout passing campaignId, amount, userId, and isAnonymous. The function creates a Stripe Checkout Session (mode: 'payment') and returns the URL. Use Launch URL to open it. A webhook Cloud Function on checkout.session.completed creates the donation document and atomically increments the campaign raisedAmount and backerCount.

1// Cloud Function: onDonationComplete (Stripe webhook)
2const admin = require('firebase-admin');
3const db = admin.firestore();
4
5exports.onDonationComplete = async (event) => {
6  const session = event.data.object;
7  const { campaignId, userId, isAnonymous } = session.metadata;
8  const amount = session.amount_total / 100;
9
10  const batch = db.batch();
11  batch.create(db.collection('donations').doc(), {
12    campaignId, userId, amount,
13    isAnonymous: isAnonymous === 'true',
14    timestamp: admin.firestore.FieldValue.serverTimestamp(),
15  });
16  batch.update(db.collection('campaigns').doc(campaignId), {
17    raisedAmount: admin.firestore.FieldValue.increment(amount),
18    backerCount: admin.firestore.FieldValue.increment(1),
19  });
20  await batch.commit();
21};

Create a CreateCampaignPage with a PageView (swipe disabled) acting as a step wizard. Step 1: title TextField and description TextField (multiline). Step 2: image upload via FlutterFlowUploadButton to Firebase Storage. Step 3: goalAmount TextField (number), endDate DateTimePicker, category DropDown. Step 4: review all entered data with an Edit button per section. Store all values in Page State variables. On Publish Button tap: Create Document in campaigns with all fields plus createdBy: currentUser.uid and status: 'active'. Navigate to the new campaign detail page. Show step indicators as a Row of numbered Containers at the top with the active step highlighted.