DigitalOcean

Before touching FlutterFlow, decide which of the two DigitalOcean roles applies to your project. If DigitalOcean is where your backend API lives (a Droplet running Express, a Node app on App Platform, a FastAPI service), your FlutterFlow API Group will point at your own API's URL — DigitalOcean never appears by name in FlutterFlow's config. Skip to Step 3 and set the base URL to your `.ondigitalocean.app` or custom domain URL. If you want to build an ops panel that reads DigitalOcean's own management data — Droplet list, App Platform apps, database nodes — you'll use the DO API v2. In this case you need a Personal Access Token from the DigitalOcean control panel. Go to console.digitalocean.com → API (left sidebar) → Generate New Token. Give it a descriptive name like 'FlutterFlow Dashboard Read-Only' and check only the Read scope. A read-only token cannot destroy Droplets or databases even if it leaks — always prefer the minimum scope for client-facing credentials. Copy the token now; DigitalOcean shows it only once. Keep any write-capable token exclusively on your server-side backend, never in FlutterFlow.

In FlutterFlow, click API Calls in the left navigation panel. Click + Add and select Create API Group. Name it clearly — 'DigitalOcean' for the ops panel, or 'MyBackend' if you're calling your own App Platform API. Set the Base URL field: - **Ops panel path:** `https://api.digitalocean.com/v2/` - **Backend host path:** `https://your-app-name.ondigitalocean.app/` (or your custom domain) For the ops panel path, you need to add the Bearer authorization header at the API Group level so it applies to all calls in the group. In the Headers section of the API Group, click + Add Header: - Header Name: `Authorization` - Header Value: `Bearer YOUR_PAT_HERE` Do not paste the raw token into the field as a literal string that will be checked into FlutterFlow. Instead, store the token as an App Constant: go to Settings & Integrations → App Settings → App Constants, add a constant named `DO_PAT`, and set its value there. Then reference it in the header value as `[App Constant: DO_PAT]`. This keeps the token out of your API Group config and makes it easy to rotate. Click Save to commit the group. For backend host calls, your own API probably handles its own auth (JWT, API key) — configure whatever headers your backend expects at the group level.

1{
2  "api_group_name": "DigitalOcean",
3  "base_url": "https://api.digitalocean.com/v2/",
4  "headers": [
5    {
6      "name": "Authorization",
7      "value": "Bearer [App Constant: DO_PAT]"
8    },
9    {
10      "name": "Content-Type",
11      "value": "application/json"
12    }
13  ]
14}

With the API Group open, click + Add API Call inside it. For the ops panel, set: - **Call Name:** `GetDroplets` - **Method:** GET - **Endpoint (relative):** `droplets` This results in FlutterFlow calling `https://api.digitalocean.com/v2/droplets`, which returns a paginated list of all Droplets on your account. Click the Response & Test tab. Click Test to fire a real request — you should see a JSON response with a `droplets` array. If you get a 401 Unauthorized, double-check that your App Constant value for `DO_PAT` is set correctly and the header is properly referencing it. If you see a 403 Forbidden, your token may have been generated with scopes that don't include Droplet read access. Once you see a successful 200 response, use the JSON Paths panel to extract the fields you need. Click + Add JSON Path: - Name: `droplets_list` → Path: `$.droplets` - Name: `droplet_name` → Path: `$.droplets[*].name` - Name: `droplet_status` → Path: `$.droplets[*].status` - Name: `droplet_region` → Path: `$.droplets[*].region.slug` These paths let FlutterFlow flatten the nested Droplet objects into arrays you can bind to a ListView. Click Save on the API Call. For a backend host call, the endpoint will be whatever your own API exposes (e.g., `/jobs`, `/users`, `/products`) — the JSON Path structure will match your own response schema.

1{
2  "call_name": "GetDroplets",
3  "method": "GET",
4  "endpoint": "droplets",
5  "json_paths": [
6    { "name": "droplets_list", "path": "$.droplets" },
7    { "name": "droplet_name", "path": "$.droplets[*].name" },
8    { "name": "droplet_status", "path": "$.droplets[*].status" },
9    { "name": "droplet_region", "path": "$.droplets[*].region.slug" }
10  ]
11}

Now wire the API data to your app's UI. In the FlutterFlow canvas, add a ListView widget to the screen where you want to show Droplets. Click the ListView, open its Backend Query tab (in the right-side Properties panel), and select API Call as the query type. Choose the DigitalOcean API Group and the GetDroplets call. FlutterFlow will generate a list variable from the response. Inside the ListView, add child widgets — typically a Container or Card — and add Text widgets inside them. For each Text widget, bind its value to a field from the API response: - One Text widget → bind to `getJsonField(dropletItem, r'$.name')` for the Droplet name - Another Text widget → bind to `getJsonField(dropletItem, r'$.status')` for the status - A third → bind to `getJsonField(dropletItem, r'$.region.slug')` for the region To add color-coding, wrap the status text in a conditional Container: if the status value equals 'active', set the background to green; if 'off', set it to red. This gives your on-call engineers an instant visual indicator. For auto-refresh, set the Backend Query's refresh interval on the ListView — 60 seconds is a sensible polling cadence for Droplet status. The DigitalOcean API allows 5,000 requests per hour per token (verify current limits in DO docs), so a 60-second poll for a small Droplet list is well within bounds. If you display many resources or poll more aggressively, watch the `ratelimit-remaining` header in your test responses.

If your app lets users upload files (photos, documents, reports) to DigitalOcean Spaces, you cannot generate the SigV4 presigned URL inside FlutterFlow or a client-side Dart Custom Action. Here is why: a Spaces upload URL requires signing with your Spaces access key secret — if that secret lives inside the compiled Flutter binary, anyone can extract it and get full write (and potentially delete) access to your Spaces bucket. The safe pattern has two legs: **Leg 1 — Your backend (App Platform or Droplet):** Expose an endpoint like `POST /api/presign-upload` that receives a filename and content type, generates a presigned PUT URL using the Spaces SDK (boto3 for Python or the aws-sdk for Node.js), and returns it in the response. The Spaces credentials live only in your backend's environment variables. **Leg 2 — FlutterFlow:** Create an API Call `GetPresignedUrl` against your own backend's `/api/presign-upload`. Then use a Custom Action to pick a file (using the `file_picker` package, already available in FlutterFlow's Custom Code → Dependencies), call `GetPresignedUrl`, and PUT the file bytes to the presigned URL using Dart's `http.put()`. The presigned URL is time-limited (typically 15 minutes) and scoped to one specific object key, so it carries zero risk if intercepted after the upload completes. This pattern keeps Spaces credentials off the device entirely. If you ever rotate your Spaces access key, you update one environment variable on your backend — no app update required.

1// Backend: Node.js (App Platform) presign endpoint
2// Deploy this on your DigitalOcean App Platform app
3const { S3Client, PutObjectCommand, getSignedUrl } = require('@aws-sdk/client-s3');
4
5const s3 = new S3Client({
6  endpoint: 'https://nyc3.digitaloceanspaces.com', // your region
7  region: 'nyc3',
8  credentials: {
9    accessKeyId: process.env.SPACES_KEY,
10    secretAccessKey: process.env.SPACES_SECRET,
11  },
12});
13
14app.post('/api/presign-upload', async (req, res) => {
15  const { filename, contentType } = req.body;
16  const command = new PutObjectCommand({
17    Bucket: process.env.SPACES_BUCKET,
18    Key: `uploads/${Date.now()}-${filename}`,
19    ContentType: contentType,
20    ACL: 'private',
21  });
22  const url = await getSignedUrl(s3, command, { expiresIn: 900 });
23  res.json({ uploadUrl: url });
24});

Before publishing your app, review every API Call that writes, deletes, or changes the state of DigitalOcean resources. Power-off, reboot, and destroy Droplet endpoints, as well as database deletion calls, should either be removed entirely from the FlutterFlow client or routed through your own backend with additional authorization checks — your FlutterFlow app should never be the direct trigger for a Droplet destroy operation. For any moderate-risk actions (scaling an App Platform instance, restarting a Droplet), add a confirmation dialog in your Action Flow Editor before the API Call fires. In FlutterFlow's Action Flow Editor, wire the button's on-tap action to: Show Dialog (custom confirmation) → on Confirm → fire the API Call. This prevents accidental taps in a mobile UI from taking down production infrastructure. Test your integration thoroughly: 1. Open FlutterFlow's Test mode (the play button in the top bar) and navigate to your ops dashboard screen. Verify the ListView loads Droplets and the status badges are color-coded correctly. 2. For the Spaces upload flow, test on a physical device (Android or iOS) or APK — file picker Custom Actions don't run in web preview mode. 3. Check the rate limit headers in your API test responses (`ratelimit-remaining`) and confirm your polling interval won't exhaust the limit during a busy on-call shift. If you'd rather skip the backend-proxy setup and let a team do the integration architecture, RapidDev builds FlutterFlow integrations like this every week — free scoping call at rapidevelopers.com/contact.