ProofHub

Log into ProofHub in your browser and navigate to your profile. The API key is tucked away: click your profile picture (top right) five times in quick succession, and a new option appears — API. Alternatively, go to Account Settings → API if your plan shows it there. Click 'Generate new key' and copy the key to a safe place such as a password manager or your notes app. Do not store it in a code file or commit it to version control. While you are here, note your account subdomain. Your ProofHub login URL is https://YOURCOMPANY.proofhub.com — the YOURCOMPANY segment is the company slug you chose when signing up. This becomes the first part of every API call you make. The v3 base URL is: https://YOURCOMPANY.proofhub.com/api/v3/ — note the trailing slash. There is also a legacy v1 API at https://api.proofhub.com/v1/ but v3 has richer endpoints for projects and to-do lists, so always use v3 unless you have a specific reason not to. Write down both the key and the full base URL before switching to FlutterFlow.

Open your FlutterFlow project in the browser. In the left navigation bar, click API Calls (the plug icon, or find it in the left panel list). Click + Add → Create API Group. A dialog appears asking for a name and base URL. Name it something clear like 'ProofHub' and paste your full base URL — for example https://acmecorp.proofhub.com/api/v3/ — in the Base URL field. Now add the two headers that ProofHub requires on every request. Click the Headers tab inside the API Group editor. Add the first header: - Header name: X-API-KEY - Value: your ProofHub API key Then add the second header — this one is critical and often missed: - Header name: User-Agent - Value: FlutterFlowApp/1.0 (yourname@yourcompany.com) ProofHub rejects requests that arrive without a recognizable User-Agent string with a silent 400 or 403, with no body explaining why. Adding a User-Agent identifying your app (and optionally a contact email per good API citizenship) solves this immediately. At this stage, resist the temptation to hardcode the API key directly as a static string if you plan to release the app. Dart code and API Call configurations are compiled into the app binary, which means anyone who unpacks the APK or IPA can extract the key. For now, a static header is fine for prototyping — see Step 6 for the production proxy approach.

1// API Group configuration (reference — set these values in the FlutterFlow UI)
2// Group name: ProofHub
3// Base URL: https://YOURCOMPANY.proofhub.com/api/v3/
4// Headers (static):
5//   X-API-KEY: your-api-key-here
6//   User-Agent: FlutterFlowApp/1.0 (you@company.com)

Inside the ProofHub API Group, click + Add API Call. Name the first call 'Get Projects'. Set the method to GET and the endpoint to projects (the full URL becomes https://YOURCOMPANY.proofhub.com/api/v3/projects). Click the Response & Test tab. Paste a sample ProofHub JSON response into the sample JSON field — you can get one by calling the API directly in a browser REST client like Hoppscotch or by pasting your key into ProofHub's API documentation examples. Click Generate JSON Paths. FlutterFlow will parse the array and generate path selectors like $[*].id, $[*].title, $[*].description. Now create a Data Type to hold project data. Go to the Data Types section in the left nav → + Add Data Type, name it 'ProofHubProject', and add fields: id (Integer), title (String), description (String). Come back to your API Call, go to the Response tab, and map each JSON Path to the corresponding Data Type field. Repeat this process for a second call: 'Get ToDo Lists'. The endpoint is todolists (FlutterFlow auto-prefixes the base URL). ProofHub to-do lists belong to a project, so the endpoint is actually projects/{project_id}/todolists — add a variable: in the Variables tab, add a path variable named project_id. Now your endpoint field reads projects/{{project_id}}/todolists. In the JSON response, map fields like id, title, and status into a second Data Type named 'ProofHubTodoList'. Test each call in the Test tab by entering real values for any variables. You should see a 200 OK and a populated JSON response. If you see a 400 or 403, double-check that both headers are set correctly in the parent API Group.

1// JSON Paths to map after pasting a sample response:
2// For projects array:
3// $[*].id         → ProofHubProject.id (Integer)
4// $[*].title      → ProofHubProject.title (String)
5// $[*].description → ProofHubProject.description (String)
6//
7// For todolists array:
8// $[*].id         → ProofHubTodoList.id (Integer)
9// $[*].title      → ProofHubTodoList.title (String)
10// $[*].status     → ProofHubTodoList.status (String)

Now wire the data to your FlutterFlow UI. Open the screen where you want to display ProofHub projects. Add a ListView widget from the widget palette. Select the ListView, open the Backend Query tab (right panel → Data → Backend Query), choose API Call, select 'Get Projects' from the dropdown, and set the query to run once on page load. Inside the ListView, add a ListTile or a custom Row layout. Select a Text widget that should show the project title. In the Set from Variable panel, choose 'Project Item → title' from the list — FlutterFlow automatically creates the item reference when you set the ListView's data source. Do the same for the description field or any other field you mapped. For the to-do list detail, create a new screen called ToDoListScreen. Add a pass-through parameter (Integer type, named project_id) in the screen's Parameters tab. Add another ListView on this screen backed by the 'Get ToDo Lists' API Call, passing the project_id parameter as the path variable. From the first screen's ListTile, set the Navigate To action → ToDoListScreen → pass the selected project's id as the project_id argument. This pattern — a master list screen that drills into a detail screen passing an ID as a parameter — is the standard FlutterFlow pattern for REST API data and works cleanly with ProofHub's project → to-do list hierarchy.

Creating a task in ProofHub requires a POST request to the to-do endpoint: projects/{project_id}/todolists/{todolist_id}/todos. In the API Calls panel, add a third API Call inside the ProofHub group. Set method to POST and the endpoint to projects/{{project_id}}/todolists/{{todolist_id}}/todos. In the Variables tab, add three variables: project_id (Integer, path), todolist_id (Integer, path), and title (String, body). In the Body tab, select JSON body type and enter the payload structure. FlutterFlow lets you construct JSON bodies by typing field names and referencing your variables with {{variable_name}} syntax. The minimum required body is: { "todo": { "title": "{{title}}" } } Back in your app, create a simple form screen or a bottom sheet with a TextField for the to-do title and a Button labeled 'Add Task'. Select the Button, open the Actions panel, click + Add Action, choose Backend/API Calls → Create To-Do (your new POST call). Map the project_id and todolist_id from your screen parameters, and map the title from the TextField controller. After the action, add a Navigate Back action or a Show Snack Bar to confirm success. Test this in FlutterFlow's Test Mode. If the POST returns 201 Created, the task appears in ProofHub immediately. If it returns a 4xx, open the Test tab of the API Call and inspect the full response body — ProofHub usually returns a JSON error object describing the problem (missing required field, wrong list ID, etc.).

1// POST /projects/{{project_id}}/todolists/{{todolist_id}}/todos
2// Method: POST
3// Headers: inherited from API Group (X-API-KEY + User-Agent)
4// Body (JSON):
5{
6  "todo": {
7    "title": "{{title}}"
8  }
9}
10// Optional additional fields:
11// "description": "{{description}}"
12// "assignees": [{ "id": {{assignee_id}} }]
13// "duedate": "{{due_date}}"

For any app you release to the App Store or Play Store, the API key must not ship inside the compiled binary. Anyone who decompiles an APK or uses a network proxy can extract keys stored in Flutter app state or hardcoded in API Call headers. Since ProofHub API keys grant full access to your account's projects and tasks, a leaked key is a serious risk. The solution is a lightweight Firebase Cloud Function that holds the key server-side and forwards requests to ProofHub. In your Firebase project, create an HTTPS Cloud Function (Node.js). The function accepts a path parameter from your FlutterFlow app, appends it to the ProofHub base URL, injects the X-API-KEY and User-Agent headers from environment config (not hardcoded in code either), and returns the ProofHub response. In FlutterFlow, update your API Group's base URL to point to the Cloud Function's URL instead of ProofHub directly. The Function URL looks like https://us-central1-YOUR-PROJECT.cloudfunctions.net/proofhubProxy. Your FlutterFlow API Calls no longer contain the ProofHub key at all — the proxy handles it. If you want to restrict which FlutterFlow users can call the proxy, add Firebase Auth token validation in the Cloud Function using admin.auth().verifyIdToken(). This pattern — FlutterFlow → your Cloud Function → third-party API — is the recommended production architecture for any secret key integration in FlutterFlow. If you prefer not to set up Firebase, RapidDev's team builds FlutterFlow integrations like this every week and offers a free scoping call at rapidevelopers.com/contact.

1// Firebase Cloud Function proxy (Node.js, index.js)
2const functions = require('firebase-functions');
3const axios = require('axios');
4
5exports.proofhubProxy = functions.https.onRequest(async (req, res) => {
6  res.set('Access-Control-Allow-Origin', '*');
7  if (req.method === 'OPTIONS') {
8    res.set('Access-Control-Allow-Methods', 'GET, POST, PATCH, DELETE');
9    res.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
10    res.status(204).send('');
11    return;
12  }
13
14  const apiKey = functions.config().proofhub.apikey;
15  const companySlug = functions.config().proofhub.company;
16  const baseUrl = `https://${companySlug}.proofhub.com/api/v3`;
17  const path = req.query.path || '';
18
19  try {
20    const response = await axios({
21      method: req.method,
22      url: `${baseUrl}/${path}`,
23      headers: {
24        'X-API-KEY': apiKey,
25        'User-Agent': 'FlutterFlowProxy/1.0 (admin@yourcompany.com)',
26        'Content-Type': 'application/json'
27      },
28      data: req.body
29    });
30    res.status(response.status).json(response.data);
31  } catch (error) {
32    const status = error.response ? error.response.status : 500;
33    res.status(status).json(error.response ? error.response.data : { error: 'Proxy error' });
34  }
35});