How to Integrate AI-Based Predictive Analytics in FlutterFlow

Predictive analytics only works if you have historical data to train on and a clear target to predict. Common use cases for FlutterFlow apps: churn prediction (input features: days_since_last_open, total_purchases, subscription_tier, support_tickets; output: churn_probability 0-1), demand forecasting (input: historical_sales_by_day, day_of_week, is_holiday; output: predicted_units_next_week), content recommendation score (input: user_category_preferences, recency, click_history; output: relevance_score per content item). Decide which use case fits your app, identify the features available in your Firestore data, and choose a pre-trained model or train a simple model using Google AutoML or Vertex AI AutoML Tabular which requires no ML expertise — just upload a CSV of historical data.

In Firebase Console → Functions, create an HTTPS Cloud Function named getPrediction. It accepts a userId (to look up feature data from Firestore) and a predictionType (e.g., 'churn'). The function: reads the user's feature data from Firestore (last_active, purchase_count, etc.), formats it as the model's expected input JSON, calls the Vertex AI prediction endpoint with the service account Bearer token (use Google Auth Library for token generation), and returns the prediction result. For Vertex AI, the endpoint is: https://{region}-aiplatform.googleapis.com/v1/projects/{project}/locations/{region}/endpoints/{endpoint}:predict. The request body is { instances: [{ feature1: value, feature2: value }] }. The response contains predictions and deployed_model_id.

1// Cloud Function: getPrediction
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4const { GoogleAuth } = require('google-auth-library');
5const axios = require('axios');
6admin.initializeApp();
7
8const ENDPOINT = functions.config().vertex.endpoint_url;
9
10exports.getPrediction = functions.https.onRequest(async (req, res) => {
11  res.set('Access-Control-Allow-Origin', '*');
12  if (req.method === 'OPTIONS') return res.status(204).send('');
13
14  const { userId } = req.query;
15  if (!userId) return res.status(400).json({ error: 'userId required' });
16
17  const userDoc = await admin.firestore().collection('users').doc(userId).get();
18  if (!userDoc.exists) return res.status(404).json({ error: 'User not found' });
19
20  const d = userDoc.data();
21  const features = {
22    days_since_last_open: d.daysSinceLastOpen || 0,
23    total_purchases: d.totalPurchases || 0,
24    subscription_tier: d.subscriptionTier === 'pro' ? 1 : 0,
25    support_tickets: d.supportTickets || 0,
26  };
27
28  const auth = new GoogleAuth({ scopes: 'https://www.googleapis.com/auth/cloud-platform' });
29  const client = await auth.getClient();
30  const token = await client.getAccessToken();
31
32  const { data } = await axios.post(ENDPOINT, { instances: [features] }, {
33    headers: { Authorization: `Bearer ${token.token}` },
34  });
35
36  const score = data.predictions[0][0];
37  res.json({ churnProbability: score, confidence: score > 0.5 ? 'high' : 'low' });
38});

Real-time predictions on every page load are slow and expensive. Instead, run predictions on a schedule and store results. Create a Cloud Scheduler trigger for your prediction function to run daily at midnight: schedule: every 24 hours. The scheduled function queries all users where lastPredictionRun is older than 24 hours, calls the prediction endpoint for each, and writes the result to their Firestore user document: churnScore (Double), churnLabel (low/medium/high), predictionUpdatedAt (Timestamp). For users with churnScore > 0.7, also write to a high_risk_users collection so admins can take action. This batch approach means prediction data is always fresh without on-demand latency.

Create an Analytics page. Add a Backend Query loading the current user's document — their churnScore and prediction fields are available. Add a Container at the top showing a risk indicator: Conditional Value on background color (green if churnScore < 0.3, orange if 0.3-0.7, red if > 0.7). Add a Text showing the score as a percentage: 'Churn Risk: 73%'. Below, add a Custom Widget using fl_chart showing a line chart of churnScore over time (query the predictions_history subcollection). Add a Text below the chart explaining what factors contribute to the score — bind this to a factors field you populate in the Cloud Function alongside the score. For admins: add a ListView showing all high-risk users from the high_risk_users collection.

Raw probability numbers like 0.7234 are meaningless to most users. Convert predictions to actionable labels and confidence indicators. Create a Custom Function named categorizePrediction that takes a Double score and returns a Map with label (Low Risk / Medium Risk / High Risk), color (green/orange/red), and recommendation (e.g., 'Send a retention discount coupon' or 'Schedule a check-in call'). Bind the label and recommendation to Text widgets on the prediction card. Also show the confidence interval if your model returns it (most Vertex AI models include a lower_bound and upper_bound) — display as a range: 'Churn Risk: 65%-78%'. If the confidence interval is wide (> 20 percentage points), show a note that the prediction has low confidence due to limited data for this user.