Splashtop

Before writing a single line of code, confirm that your Splashtop plan includes REST API access. Splashtop API access is not available on personal or small-team plans — it is typically gated to Business Access Plus, Remote Support plans, or enterprise agreements. Log into your Splashtop management console at my.splashtop.com and look for an API or Developer section. If you do not see one, contact your Splashtop account manager or support team to confirm API access and obtain your credentials. The Splashtop API uses an API key or OAuth-based credentials depending on the product variant. Note your API endpoint base URL (it may vary by region: US, EU, or custom enterprise instances), your API key, and any required parameters (such as account ID or team ID). Write these down — you will store them as Firebase Functions environment config in the next step, not in FlutterFlow. Also note: the Splashtop API is primarily designed for enterprise integrations and partner applications. Its documentation is available through your Splashtop partner portal or account dashboard. The exact endpoint paths and request formats should be confirmed from that documentation, as they are not publicly listed in the same way as consumer API providers like Stripe or Twilio.

The Splashtop API key is an admin-scoped credential that can access all computers in your organization's account. Placing it in a FlutterFlow API Call header would ship it inside the compiled app binary — anyone who reverse-engineers the app could use it to list and potentially interact with your organization's computers. The solution is a Firebase Cloud Function that holds the API key server-side and exposes only what the FlutterFlow app needs. In your Firebase project, create a Cloud Function (Node.js) that: 1. Accepts a request from your FlutterFlow app (optionally verifying a Firebase Auth ID token to confirm the user is authorized) 2. Calls the Splashtop API with your stored API key 3. Returns only the computer list (name, ID, online status) — nothing else Store the Splashtop API key using Firebase Functions config: run firebase functions:config:set splashtop.api_key="your-key" splashtop.base_url="your-splashtop-api-url" in your terminal. Deploy the function using the Firebase CLI. After deployment, Firebase gives you an HTTPS URL (https://us-central1-your-project.cloudfunctions.net/getComputers). This URL is what FlutterFlow will call — never the Splashtop API directly. Enable CORS in the function (res.set('Access-Control-Allow-Origin', '*')) to support FlutterFlow web builds.

1// Firebase Cloud Function — index.js
2const functions = require('firebase-functions');
3const axios = require('axios');
4
5const API_KEY = functions.config().splashtop.api_key;
6const BASE_URL = functions.config().splashtop.base_url;
7
8exports.getComputers = functions.https.onRequest(async (req, res) => {
9  res.set('Access-Control-Allow-Origin', '*');
10  res.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
11  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
12
13  try {
14    // Replace with your actual Splashtop API endpoint and auth pattern
15    const response = await axios.get(`${BASE_URL}/computers`, {
16      headers: {
17        'Authorization': `Bearer ${API_KEY}`,
18        'Content-Type': 'application/json'
19      }
20    });
21
22    // Return only the fields the FlutterFlow app needs
23    const computers = response.data.computers.map(c => ({
24      id: c.computer_id,
25      name: c.computer_name,
26      online: c.online_status === 'online',
27      os: c.os_type
28    }));
29
30    res.json({ computers });
31  } catch (err) {
32    res.status(500).json({ error: err.message });
33  }
34});

In FlutterFlow, click API Calls in the left navigation panel → + Add → Create API Group. Name it SplashtopProxy. In the Base URL field, enter your Cloud Function HTTPS URL (e.g., https://us-central1-your-project.cloudfunctions.net). Add an API Call inside this group. Name it GetComputers. Method: GET. Endpoint: /getComputers. If you added Firebase Auth verification in the Cloud Function, add a header: Key: Authorization Value: Bearer {{ firebaseToken }} and add a variable firebaseToken (String) — bind it from App State where you store the Firebase Auth token after login. In the Response & Test tab, paste a sample response: { "computers": [ { "id": "comp-abc123", "name": "Office iMac", "online": true, "os": "macOS" }, { "id": "comp-def456", "name": "Work Laptop", "online": false, "os": "Windows" } ] } Add JSON Path mappings: $.computers[*].id → computerId (String, List) $.computers[*].name → computerName (String, List) $.computers[*].online → isOnline (Boolean, List) $.computers[*].os → osType (String, List) Test the call using the Test button. A successful response will show the computer array and confirm the JSON Paths resolve correctly.

1{
2  "group": "SplashtopProxy",
3  "baseUrl": "https://us-central1-your-project.cloudfunctions.net",
4  "calls": [
5    {
6      "name": "GetComputers",
7      "method": "GET",
8      "endpoint": "/getComputers",
9      "headers": { "Authorization": "Bearer {{ firebaseToken }}" },
10      "jsonPaths": {
11        "$.computers[*].id": "computerId",
12        "$.computers[*].name": "computerName",
13        "$.computers[*].online": "isOnline",
14        "$.computers[*].os": "osType"
15      }
16    }
17  ]
18}

Create a new FlutterFlow screen called My Computers. At the page level, set a Backend Query to GetComputers, binding the firebaseToken variable from App State. This fetches the computer list when the screen loads. Add a Column to the screen containing: - A Text widget with the heading Your Computers styled as a title - A ListView widget with a RefreshIndicator wrapper (set to re-trigger the Backend Query on pull-to-refresh) For each ListView item, create a Card widget containing a Row with: - A Column on the left: a Text widget showing computerName (bold, large), and a smaller Text widget showing osType - A status badge on the right: a Container with rounded corners, green background and text Online when isOnline is true, red background and text Offline when isOnline is false — use a Conditional widget to switch between the two versions - A Connect button (ElevatedButton) — visible only when isOnline is true. Set its disabled state to !isOnline using a Conditional. For the Connect button action, leave it empty for now — that is the deep link step next. Sort the list to show online computers first: since FlutterFlow's list sorting by boolean is limited, you can set a Custom Function that splits and reorders the array, or accept the API-returned order if the proxy already sorts by online status.

The final step is wiring the Connect button to launch the native Splashtop app via a URL scheme deep link. In FlutterFlow, select the Connect button in the ListView item. Open the Actions panel and click + Add Action. Choose Launch URL. Splashtop uses URL schemes for deep linking. The exact URL scheme depends on which Splashtop product the user has installed (Splashtop Business, Splashtop Remote Support, etc.). Check your Splashtop documentation or partner portal for the correct URL scheme for your product. A typical pattern is: splashtopbusiness://connect?computer_id={{ computerId }} In the Launch URL action, set the URL to a dynamic string built from the computer's ID: combine the Splashtop URL scheme prefix with the computerId variable from the ListView item. The critical edge case: if the Splashtop app is not installed on the device, the URL scheme launch will fail silently on iOS or show an error dialog on Android. Handle this gracefully by chaining the action: 1. Try Launch URL with the Splashtop URL scheme 2. As a fallback action on error (or via a Conditional based on platform), launch the App Store / Google Play Store URL for the Splashtop app Note: deep link behavior cannot be tested in the FlutterFlow web Preview — test on a real physical device with the Splashtop Business app installed. If your specific Splashtop product line uses a different URL scheme than the example above, verify it by checking your Splashtop documentation or contacting RapidDev's team for help navigating the enterprise API at rapidevelopers.com/contact.

1// Splashtop deep link URL patterns (verify with your Splashtop product docs)
2// Splashtop Business:
3// splashtopbusiness://connect?computer_id=COMPUTER_ID
4
5// App Store fallback (iOS):
6// https://apps.apple.com/app/splashtop-business/id678890889
7
8// Google Play fallback (Android):
9// https://play.google.com/store/apps/details?id=com.splashtop.remote.business
10
11// In FlutterFlow Launch URL action:
12// Primary: splashtopbusiness://connect?computer_id=${computerId}
13// Fallback: https://www.splashtop.com/downloads