Cloudflare

You do not need the Wrangler CLI to create a Worker — the Cloudflare dashboard has a browser-based editor that non-technical founders can use. Log into your Cloudflare account at dash.cloudflare.com, click Workers & Pages in the left sidebar, then click Create application → Create Worker. Give it a name (e.g., 'flutterflow-backend') and click Deploy — Cloudflare generates a starter Worker at https://flutterflow-backend.your-subdomain.workers.dev instantly. Click Edit code to open the browser editor. Replace the starter code with your application logic: define routes for GET /items, POST /items, GET /upload-url, etc. Use the request.url and request.method properties to dispatch to the correct handler. All secrets (R2 credentials, third-party API keys) must be added as environment variables through Settings → Variables and Secrets — not hardcoded in the Worker source code. Worker secrets are encrypted at rest and injected at runtime as env.SECRET_NAME. For D1 databases, go back to Workers & Pages → D1, create a new database, then bind it to your Worker via the Worker's Settings → Bindings → D1 Database → Add binding. The binding name (e.g., 'DB') becomes available as env.DB inside your Worker. Run SQL migrations using the D1 console in the dashboard to create your tables before testing.

1// Cloudflare Worker — example with D1 and R2 routes
2export default {
3  async fetch(request, env) {
4    const url = new URL(request.url);
5
6    // CORS headers for FlutterFlow web preview
7    const corsHeaders = {
8      'Access-Control-Allow-Origin': '*',
9      'Access-Control-Allow-Methods': 'GET, POST, PUT, DELETE, OPTIONS',
10      'Access-Control-Allow-Headers': 'Content-Type, Authorization'
11    };
12
13    if (request.method === 'OPTIONS') {
14      return new Response(null, { headers: corsHeaders });
15    }
16
17    if (url.pathname === '/items' && request.method === 'GET') {
18      const { results } = await env.DB.prepare('SELECT * FROM items ORDER BY created_at DESC LIMIT 50').all();
19      return Response.json({ items: results }, { headers: corsHeaders });
20    }
21
22    if (url.pathname === '/items' && request.method === 'POST') {
23      const body = await request.json();
24      await env.DB.prepare('INSERT INTO items (name, value) VALUES (?, ?)').bind(body.name, body.value).run();
25      return Response.json({ success: true }, { headers: corsHeaders });
26    }
27
28    return new Response('Not found', { status: 404 });
29  }
30};

Any API key, database credential, or private token your Worker needs must be stored in Worker environment variables — never in the Worker source code or in FlutterFlow. In the Cloudflare dashboard, navigate to Workers & Pages → your Worker → Settings → Variables and Secrets. Click Add variable for non-sensitive configuration values (like a public API base URL) and Add secret for sensitive values (like a third-party API key or an R2 access key ID). Secrets are encrypted and not visible after saving — even Cloudflare employees cannot read them. Inside your Worker code, access these values through the env parameter: env.MY_API_KEY, env.R2_BUCKET (the R2 binding), env.DB (the D1 binding). When you make a request from FlutterFlow to your Worker, the Worker reads these values at runtime and uses them to call downstream services. This means FlutterFlow never needs to know your third-party API keys — it only needs the Worker URL, which is public by design. For R2, add an R2 bucket binding rather than using access keys: in the Worker's Settings → Bindings → R2 Bucket → Add binding. Name it 'BUCKET' and select your R2 bucket. The Worker then accesses R2 via env.BUCKET.put(), env.BUCKET.get(), etc. — no credentials needed in code because the binding handles authentication automatically.

Now configure FlutterFlow to talk to your Worker. In the FlutterFlow editor, click API Calls in the left navigation panel, then click + Add → Create API Group. Name it 'Cloudflare Worker' and set the Base URL to your Worker URL: https://flutterflow-backend.your-subdomain.workers.dev (or your custom domain if you've configured one). Under Headers, add 'Content-Type: application/json'. If you've implemented JWT-based authentication in your Worker, add an 'Authorization' header with the value 'Bearer {{userToken}}' — FlutterFlow will substitute the actual token at runtime from a page variable. Inside the API Group, click + Add API Call for each route your Worker exposes. For the GetItems call: Method = GET, Path = /items. For the CreateItem call: Method = POST, Path = /items, and in the Body tab add the JSON fields your Worker expects (e.g., { "name": "{{itemName}}", "value": "{{itemValue}}" }). Click the Variables tab on each call to define the variables that FlutterFlow will substitute at runtime (itemName, itemValue, etc.). Switch to the Response & Test tab on GetItems, paste a sample response from your Worker (e.g., {"items": [{"id": 1, "name": "Test", "value": "ABC"}]}), and click Generate JSON Paths. FlutterFlow will automatically extract $.items as the list path and $.items[0].name, $.items[0].value as field paths. These paths are what you'll use when binding the API Call to a Data Type and ListView.

1// Sample API Call config
2{
3  "group_name": "Cloudflare Worker",
4  "base_url": "https://flutterflow-backend.your-subdomain.workers.dev",
5  "headers": {
6    "Content-Type": "application/json",
7    "Authorization": "Bearer {{userToken}}"
8  },
9  "calls": [
10    { "name": "GetItems", "method": "GET", "path": "/items" },
11    { "name": "CreateItem", "method": "POST", "path": "/items",
12      "body": { "name": "{{itemName}}", "value": "{{itemValue}}" } },
13    { "name": "GetUploadUrl", "method": "GET", "path": "/upload-url?filename={{filename}}" }
14  ]
15}

Uploading to Cloudflare R2 from FlutterFlow follows the same two-step pattern as Blob Storage and S3: first get a presigned URL from your Worker, then PUT the file bytes directly to R2. Add a Worker route that generates a presigned R2 PUT URL using the R2 bucket binding. The Worker calls env.BUCKET.createMultipartUpload() or uses R2's S3-compatible API to generate a signed URL with a short expiry, then returns it as JSON. In FlutterFlow, build the upload flow in the Action Flow Editor. Start with an 'Upload Photo/Video' action to get the file into a local state variable, then add an API Call action to GetUploadUrl (passing the filename as a variable), storing the returned presigned URL in a page state variable. Finally, add a Custom Action (Dart) that performs an http.put() to the presigned URL with the file bytes from the local variable. The presigned URL is time-limited and scope-limited — it is safe to use in Dart. After a successful upload, call a third Worker route to record the file's R2 URL in your D1 database so you can display it in the app later. For displaying R2 files, your Worker can return the R2 public URL (if your bucket has public access enabled) or generate a short-lived signed read URL. For most apps, enabling public read access on the R2 bucket is the simplest approach — files are still only writable through the Worker.

1// Worker route: generate R2 presigned upload URL
2import { AwsClient } from 'aws4fetch'; // R2 is S3-compatible
3
4async function handleUploadUrl(request, env) {
5  const url = new URL(request.url);
6  const filename = url.searchParams.get('filename');
7  const accountId = env.CF_ACCOUNT_ID;
8  const accessKeyId = env.R2_ACCESS_KEY_ID;
9  const secretAccessKey = env.R2_SECRET_ACCESS_KEY;
10  const bucketName = env.R2_BUCKET_NAME;
11
12  const client = new AwsClient({ accessKeyId, secretAccessKey });
13  const r2Url = `https://${accountId}.r2.cloudflarestorage.com/${bucketName}/${filename}`;
14  const presigned = await client.sign(new Request(r2Url, { method: 'PUT' }), {
15    aws: { signQuery: true },
16    datetime: new Date().toISOString().replace(/[:-]|\..+/g, ''),
17    expiresIn: 600 // 10 minutes
18  });
19
20  return Response.json({ uploadUrl: presigned.url });
21}

If you want users to reach your FlutterFlow web app at a custom domain (e.g., app.yourcompany.com) and you use Cloudflare for DNS, the setup is entirely in the Cloudflare dashboard — no changes in FlutterFlow are needed for this step. First, publish your FlutterFlow app: click the Publish icon (top-right) → Publish → wait for the build to complete. FlutterFlow gives you a URL like https://yourapp.flutterflow.app. FlutterFlow custom domains require a paid FlutterFlow plan; you configure the custom domain in FlutterFlow's Settings → Custom Domain section by adding a CNAME record. Cloudflare is where you create that CNAME record: go to your Cloudflare account → select your domain → DNS → Records → + Add record. Set Type = CNAME, Name = app (for app.yourcompany.com), Target = the value FlutterFlow instructs you to use. Enable the orange cloud (Cloudflare proxy) to get SSL and CDN benefits automatically. After DNS propagation (usually under 5 minutes with Cloudflare), your app is live at your custom domain. This DNS configuration is completely separate from your Worker — the Worker is your backend, the DNS record points to FlutterFlow's hosting.