How to Integrate a Custom API for Unique App Functionalities in FlutterFlow

Create a Cloud Function using functions.https.onRequest (for unauthenticated or custom-auth endpoints) or functions.https.onCall (for Firebase Auth-integrated callable functions). For most FlutterFlow custom APIs, use onCall because it automatically handles CORS, parses the request body, and provides context.auth with the caller's Firebase UID. The function signature is: exports.functionName = functions.https.onCall(async (data, context) => { ... }). Verify authentication: if (!context.auth) throw new functions.https.HttpsError('unauthenticated', 'Login required'). Process the request using data (the JSON body from FlutterFlow). Return a plain JavaScript object — FlutterFlow receives it as JSON. Deploy with: firebase deploy --only functions. The URL format is: https://us-central1-{projectId}.cloudfunctions.net/{functionName}. For callable functions, FlutterFlow must send the body wrapped in {"data": {...}} format.

1// Custom API: calculateCustomPrice
2// Called by FlutterFlow to apply business pricing rules
3const functions = require('firebase-functions');
4const admin = require('firebase-admin');
5
6exports.calculateCustomPrice = functions.https.onCall(async (data, context) => {
7  // Require authentication
8  if (!context.auth) {
9    throw new functions.https.HttpsError('unauthenticated', 'Login required');
10  }
11
12  const { productId, quantity, customerType, promoCode } = data;
13
14  // Validate input
15  if (!productId || !quantity || quantity < 1) {
16    throw new functions.https.HttpsError('invalid-argument', 'productId and quantity required');
17  }
18
19  // Fetch product from Firestore
20  const productDoc = await admin.firestore().collection('products').doc(productId).get();
21  if (!productDoc.exists) {
22    throw new functions.https.HttpsError('not-found', 'Product not found');
23  }
24  const product = productDoc.data();
25
26  // Apply business pricing rules
27  let unitPrice = product.basePrice;
28  let discountPercent = 0;
29
30  if (customerType === 'wholesale') discountPercent += 15;
31  if (quantity >= 100) discountPercent += 10;
32  if (quantity >= 500) discountPercent += 5;
33
34  if (promoCode) {
35    const promoDoc = await admin.firestore().collection('promo_codes').doc(promoCode).get();
36    if (promoDoc.exists && promoDoc.data().active) {
37      discountPercent += promoDoc.data().discountPercent;
38    }
39  }
40
41  const discountedPrice = unitPrice * (1 - discountPercent / 100);
42  const totalPrice = discountedPrice * quantity;
43
44  return {
45    unitPrice: parseFloat(discountedPrice.toFixed(2)),
46    totalPrice: parseFloat(totalPrice.toFixed(2)),
47    discountPercent,
48    breakdown: {
49      basePrice: unitPrice,
50      quantity,
51      discountApplied: discountPercent > 0,
52      promoCodeUsed: !!promoCode && discountPercent > 0
53    }
54  };
55});

In FlutterFlow, open the API Manager (plug icon in left sidebar). Add a new API Group named CustomBackend. Set the Base URL to your Cloud Functions base URL: https://us-central1-{your-project-id}.cloudfunctions.net. Add a Content-Type: application/json header. Add an API Call named calculatePrice. Set method to POST, path to /calculateCustomPrice. In the Body tab, add the request body JSON. For onCall callable functions, the body MUST be wrapped in a data key: {"data": {"productId": "[productId]", "quantity": [quantity], "customerType": "[customerType]", "promoCode": "[promoCode]"}}. Mark productId, quantity, customerType, promoCode as Variables. In the Response and Test tab, test with sample values. The response will be wrapped in a result key: {"result": {"unitPrice": 8.50, "totalPrice": 850.00, ...}}. Extract the fields: result.unitPrice, result.totalPrice, result.discountPercent, result.breakdown.discountApplied.

On your product detail page, add a TextField for quantity and a DropDown for customerType (values: retail, wholesale). Add a promo code TextField. Add a Calculate Price Button. In the Button's Action Flow: (1) Validate: IF quantity TextField is empty, show Snackbar 'Enter quantity' and stop. (2) API Call → CustomBackend → calculatePrice, passing: productId from Page Parameter, quantity from TextField, customerType from DropDown, promoCode from TextField. (3) Set Page State variable priceResult to the API response. (4) Show a Container (conditional visibility based on priceResult is not null) with: Text 'Unit Price: $[priceResult.unitPrice]', Text 'Total: $[priceResult.totalPrice]', Text 'Discount: [priceResult.discountPercent]%' (conditionally visible if discountPercent > 0). Add an error handler: if the API returns a non-200 status, show a Snackbar with the error message.

A second common custom API pattern is document generation. Deploy a Cloud Function named generateReport that accepts a reportType and dateRange, queries Firestore for the relevant data, uses the pdfkit npm package to generate a PDF with your branding, uploads the PDF to Firebase Storage, and returns the download URL. In FlutterFlow: add an API Call named generateReport in the CustomBackend API Group. In the Action Flow on a Reports page: call generateReport with the user's selections → receive the download URL → use a Launch URL action to open the PDF. For reports that take more than a few seconds to generate: return a jobId instead of waiting, write status updates to a Firestore document, and have FlutterFlow poll the document with a real-time Backend Query. This is the same pattern for any long-running custom API operation.