StatusCake

Sign in to your StatusCake account at app.statuscake.com. Click your profile name or avatar in the top-right corner to open the account menu. Select User Details from the dropdown. On the User Details page, scroll to the API section. Click Generate New API Key if none exists, or copy your existing API key using the copy button. The key is a long alphanumeric string (typically 40+ characters). Understand what this API key can do before deciding where to store it. The StatusCake API key is account-scoped: it can read all your monitoring tests, but it can also create new tests, delete existing tests, and modify alert contacts. For a personal app only you install on your own phone, placing the key directly in the FlutterFlow API Group header is acceptable — the risk is low when only one person uses the app and it is never published. For any app you share with colleagues or distribute via an app store, the key must be proxied through a Cloud Function as described in Step 3. Keep the API key copied to your clipboard or note it in your password manager. You will use it in the next step when configuring the FlutterFlow API Group.

In FlutterFlow, click API Calls in the left navigation panel. Click + Add → Create API Group. In the Group Name field, type 'StatusCake'. In the Base URL field enter https://api.statuscake.com/v1 — no trailing slash. This is the only version of the API currently in use; older API v2 URLs are deprecated and return different response shapes. In the Headers section, click Add Header. Set the Key to Authorization and the Value to Bearer YOUR_API_KEY — replace YOUR_API_KEY with your actual key string, keeping the word 'Bearer ' (capital B, followed by a space) before it. The full header value should look like: Bearer abcdef1234567890abcdef1234567890abcdefgh. Click Save Group. Now add the main API Call: click + Add inside the StatusCake group → Create API Call. Name it 'Get Uptime Tests'. Set method to GET and path to /uptime. Click the Variables tab — no variables needed for this call since it returns all tests for the account. Click Save. In the Response & Test tab, click Test API Call. After a successful test, you should see a JSON response with a data[] array at the top level. Each item in data[] represents one monitoring test. Click Generate JSON Paths to create path bindings from the response. The key JSON paths to note are: $.data[*].id, $.data[*].name, $.data[*].website_url, $.data[*].status (returns 'up' or 'down'), $.data[*].uptime (a float representing uptime percentage), $.data[*].check_rate (seconds between checks), $.data[*].last_tested_at (ISO timestamp of the last check). If you are building a shared app, skip to Step 3 before proceeding with widget binding. For a personal app, continue directly to Step 4.

1{
2  "group_name": "StatusCake",
3  "base_url": "https://api.statuscake.com/v1",
4  "headers": [
5    { "key": "Authorization", "value": "Bearer YOUR_STATUSCAKE_API_KEY" }
6  ],
7  "calls": [
8    {
9      "name": "Get Uptime Tests",
10      "method": "GET",
11      "path": "/uptime",
12      "json_paths": [
13        "$.data[*].id",
14        "$.data[*].name",
15        "$.data[*].website_url",
16        "$.data[*].status",
17        "$.data[*].uptime",
18        "$.data[*].check_rate",
19        "$.data[*].last_tested_at"
20      ]
21    }
22  ]
23}

Skip this step if you are building a personal app only you will use on your own device. For any app shared with team members, clients, or published to the app store, deploy a Firebase Cloud Function proxy to keep the StatusCake API key server-side. The proxy for StatusCake is simpler than the Vultr proxy because StatusCake's API is read-heavy for dashboard use — you only need to proxy GET calls. Create a new Firebase Cloud Function. In the Firebase Console, navigate to your project → Functions → Create Function, or add it to an existing functions project. Paste the proxy code shown in the Code field below. Set the StatusCake API key using Firebase Functions environment configuration: 'firebase functions:config:set statuscake.key="YOUR_API_KEY"' from the Firebase CLI. Deploy the function and copy its HTTPS trigger URL. Back in FlutterFlow, update the StatusCake API Group's Base URL to the proxy URL instead of https://api.statuscake.com/v1. Remove the Authorization header from the FlutterFlow API Group — the proxy adds it server-side. From this point forward, all StatusCake calls route through the proxy and the API key never leaves your Cloud Function environment.

1// Firebase Cloud Function: statusCakeProxy/index.js
2const functions = require('firebase-functions');
3const fetch = require('node-fetch');
4
5// Set key: firebase functions:config:set statuscake.key="YOUR_KEY"
6const SC_KEY = functions.config().statuscake.key;
7const SC_BASE = 'https://api.statuscake.com/v1';
8
9exports.statusCakeProxy = functions.https.onRequest(async (req, res) => {
10  // CORS for FlutterFlow web builds
11  res.set('Access-Control-Allow-Origin', '*');
12  res.set('Access-Control-Allow-Methods', 'GET, OPTIONS');
13  res.set('Access-Control-Allow-Headers', 'Content-Type');
14  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
15
16  // Only allow GET requests (read-only for dashboard)
17  if (req.method !== 'GET') {
18    res.status(403).json({ error: 'Only GET requests are permitted' });
19    return;
20  }
21
22  // Whitelist safe read paths
23  const path = req.path || '/';
24  const allowed = ['/uptime', '/pagespeed', '/ssl', '/contact-groups'];
25  if (!allowed.some(p => path.startsWith(p))) {
26    res.status(403).json({ error: 'Path not in whitelist' });
27    return;
28  }
29
30  const qs = Object.keys(req.query).length
31    ? '?' + new URLSearchParams(req.query).toString()
32    : '';
33  const url = `${SC_BASE}${path}${qs}`;
34
35  const scRes = await fetch(url, {
36    headers: { 'Authorization': `Bearer ${SC_KEY}` }
37  });
38  const data = await scRes.json();
39  res.status(scRes.status).json(data);
40});
41

Open the FlutterFlow page where you want the uptime dashboard. Select the page itself and in the Backend Query panel, click + Add → select the StatusCake API Group → Get Uptime Tests. Set this as a page-level query so the list loads immediately when the page opens. Add a ListView to the page. Inside it, create a list item template — a Container containing a Row with three areas: a status chip on the left, a Column with the test name and URL in the center, and the uptime percentage on the right. For the status chip: add a Container (small, roughly 60×28 dp) with a Text widget inside showing 'UP' or 'DOWN'. Select the Container and open Conditional Logic. Set the condition: if the JSON Path value $.data[*].status equals 'up' (lowercase), set the background color to green (#22C55E) and the text to 'UP'. Otherwise (status is 'down' or any other value), set the background to red (#EF4444) and text to 'DOWN'. Bind the test name Text widget to $.data[*].name. Bind the URL Text widget to $.data[*].website_url (truncate it at 30 characters using a FlutterFlow Custom Function if needed). Bind the uptime percentage Text to $.data[*].uptime — format it as '99.98%' using a Custom Function that appends the percent sign. Add a Pull To Refresh action on the ListView: open the ListView's Actions panel, add a Refresh action that re-runs the page Backend Query. Users swipe down to get the latest status. For the test detail screen: add a FlutterFlow page named 'Test Detail'. Add page parameters for id (String), name (String), and status (String). On the ListView item Container, add an On Tap action → Navigate → Test Detail, passing the bound values from the list item. On the Test Detail page, add a second Backend Query: GET /uptime/{{ id }} (add this API Call to the StatusCake group with an id variable). This returns fuller detail for a single test including check_rate, locations[], and contact_groups[]. If you need help wiring the response bindings and conditional status logic, RapidDev's team builds FlutterFlow integrations like this every week — free scoping call at rapidevelopers.com/contact.

This step is optional for founders who want real-time push notifications when a site goes down — not just a manual refresh-based dashboard. It requires a Firebase project with Firestore and Cloud Functions (Blaze plan). FlutterFlow apps cannot receive incoming webhook requests — a mobile app runs only when the user has it open. The alerting chain is: StatusCake detects a site is down → StatusCake fires a webhook HTTP POST to a Cloud Function URL → the function writes a down-alert document to a Firestore collection → FlutterFlow listens to that Firestore collection in real time → an alert appears in the app without the user pulling to refresh → optionally, Firebase Cloud Messaging delivers a push notification to all subscribed devices even when the app is closed. To configure the webhook in StatusCake: log into your StatusCake account and navigate to Alerting → Contact Groups. Create a new Contact Group (or edit an existing one) and add a Webhook alert type. Paste your Cloud Function's HTTPS trigger URL as the webhook destination. StatusCake will POST a JSON payload to this URL when a test transitions from up to down (and optionally when it recovers). Create a Firebase Cloud Function that receives the StatusCake webhook POST, parses the payload (which includes fields like TestID, TestName, Status, URL, and Down timestamp), and writes a new document to a Firestore collection called 'statuscake_alerts'. In FlutterFlow, add a real-time Backend Query on the page using Firestore → read the 'statuscake_alerts' collection sorted by timestamp descending. Bind a separate alerts section or a Notification badge to this query — when a new document appears, the ListView updates automatically. For push notifications: in FlutterFlow's Settings → Integrations → Firebase Cloud Messaging, enable push notifications. The Cloud Function can use the Firebase Admin SDK to send a push notification to subscribed device tokens whenever a down-alert document is created in Firestore.

1// Firebase Cloud Function: statusCakeWebhook/index.js
2const functions = require('firebase-functions');
3const admin = require('firebase-admin');
4admin.initializeApp();
5
6exports.statusCakeWebhook = functions.https.onRequest(async (req, res) => {
7  if (req.method !== 'POST') { res.status(405).send('Method Not Allowed'); return; }
8
9  const payload = req.body;
10  // StatusCake webhook payload fields (verify field names in SC docs)
11  const alert = {
12    test_id: payload.TestID || payload.test_id || '',
13    test_name: payload.TestName || payload.test_name || '',
14    url: payload.URL || payload.url || '',
15    status: payload.Status || payload.status || '',
16    down_at: payload.DownTime || payload.down_at || new Date().toISOString(),
17    received_at: admin.firestore.FieldValue.serverTimestamp()
18  };
19
20  // Write alert to Firestore
21  await admin.firestore()
22    .collection('statuscake_alerts')
23    .add(alert);
24
25  // Optional: send FCM push notification to subscribed devices
26  // const message = {
27  //   notification: { title: `${alert.test_name} is DOWN`, body: alert.url },
28  //   topic: 'statuscake_alerts'
29  // };
30  // await admin.messaging().send(message);
31
32  res.status(200).send('OK');
33});
34