# Splashtop

- Tool: FlutterFlow
- Difficulty: Advanced
- Time required: 60 minutes
- Last updated: July 2026

## TL;DR

Connect FlutterFlow to Splashtop by calling the Splashtop REST API (through a Firebase Cloud Function proxy that holds your API credentials) to list a user's computers, then using FlutterFlow's Launch URL action to deep-link into the native Splashtop Business app for the actual remote session. FlutterFlow acts as a companion launcher — it cannot render a remote desktop stream itself. Splashtop API access requires a Business or Enterprise plan.

## Build a Splashtop Companion Launcher App with FlutterFlow

Splashtop is used by IT support teams, managed service providers, and remote workers to access computers and servers from any device. It competes with tools like AnyDesk and TeamViewer, delivering high-performance remote desktop sessions through its native applications for iOS, Android, Windows, and macOS. Splashtop Business plans and above support API access, which allows you to programmatically list a user's computers, check online/offline status, and retrieve session metadata.

The key insight for this tutorial — and the one that saves you significant time — is that you cannot embed a live remote desktop stream inside a FlutterFlow widget. Remote desktop protocols (RDP, proprietary Splashtop codecs) require platform-level native code that Splashtop delivers through its own native app. What FlutterFlow CAN do is act as a companion launcher: show the user their registered computers, display online/offline status, and then hand off to the installed Splashtop Business app via a URL scheme deep link when the user taps Connect. The native Splashtop app takes over from there.

Splashtop's REST API access is gated behind Business and Enterprise plans — personal and Small Business tiers may not include API access. Verify your plan includes API credentials before building. The API endpoint structure and exact authentication method should be confirmed in your Splashtop account portal or with your account manager, as these details vary by product line and region.

## Before you start

- A Splashtop Business or Enterprise account with API access enabled and API credentials (verify with your Splashtop account team)
- A Firebase project for deploying the Cloud Function proxy that will hold the Splashtop API key
- Splashtop Business app installed on the test device for verifying deep link behavior
- A FlutterFlow project with at least one screen
- Basic familiarity with Firebase Cloud Functions and the FlutterFlow Action Flow Editor

## Step-by-step guide

### 1. Confirm Splashtop API access and gather your credentials

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.

**Expected result:** You have confirmed API access, noted your Splashtop API credentials and base URL, and identified the endpoint for listing computers.

### 2. Deploy a Firebase Cloud Function proxy to hold Splashtop API credentials

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.

```
// Firebase Cloud Function — index.js
const functions = require('firebase-functions');
const axios = require('axios');

const API_KEY = functions.config().splashtop.api_key;
const BASE_URL = functions.config().splashtop.base_url;

exports.getComputers = functions.https.onRequest(async (req, res) => {
  res.set('Access-Control-Allow-Origin', '*');
  res.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  if (req.method === 'OPTIONS') { res.status(204).send(''); return; }

  try {
    // Replace with your actual Splashtop API endpoint and auth pattern
    const response = await axios.get(`${BASE_URL}/computers`, {
      headers: {
        'Authorization': `Bearer ${API_KEY}`,
        'Content-Type': 'application/json'
      }
    });

    // Return only the fields the FlutterFlow app needs
    const computers = response.data.computers.map(c => ({
      id: c.computer_id,
      name: c.computer_name,
      online: c.online_status === 'online',
      os: c.os_type
    }));

    res.json({ computers });
  } catch (err) {
    res.status(500).json({ error: err.message });
  }
});
```

**Expected result:** The Cloud Function is deployed and returns a JSON array of computers when called with a GET request. The Splashtop API key is not accessible outside the function.

### 3. Create a FlutterFlow API Group calling your Cloud Function and map computer data

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.

```
{
  "group": "SplashtopProxy",
  "baseUrl": "https://us-central1-your-project.cloudfunctions.net",
  "calls": [
    {
      "name": "GetComputers",
      "method": "GET",
      "endpoint": "/getComputers",
      "headers": { "Authorization": "Bearer {{ firebaseToken }}" },
      "jsonPaths": {
        "$.computers[*].id": "computerId",
        "$.computers[*].name": "computerName",
        "$.computers[*].online": "isOnline",
        "$.computers[*].os": "osType"
      }
    }
  ]
}
```

**Expected result:** The GetComputers API Call in FlutterFlow returns the computer list with online status, names, and IDs correctly mapped via JSON Paths.

### 4. Build the computer list screen with online/offline status

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.

**Expected result:** The My Computers screen shows a list of computers with green Online and red Offline badges, pull-to-refresh works, and the Connect button is active only for online computers.

### 5. Add the deep link Connect button and handle the not-installed case

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.

```
// Splashtop deep link URL patterns (verify with your Splashtop product docs)
// Splashtop Business:
// splashtopbusiness://connect?computer_id=COMPUTER_ID

// App Store fallback (iOS):
// https://apps.apple.com/app/splashtop-business/id678890889

// Google Play fallback (Android):
// https://play.google.com/store/apps/details?id=com.splashtop.remote.business

// In FlutterFlow Launch URL action:
// Primary: splashtopbusiness://connect?computer_id=${computerId}
// Fallback: https://www.splashtop.com/downloads
```

**Expected result:** Tapping Connect on an online computer opens the Splashtop Business app directly to that computer's session. If the app is not installed, the user is redirected to the app store.

## Best practices

- Never put Splashtop API credentials directly in a FlutterFlow API Call header — these are admin-scoped tokens that can access your entire computer fleet; always route them through a Cloud Function proxy.
- Scope the Cloud Function to expose only what the app needs — the computer list with name, ID, and online status — rather than a raw passthrough to the full Splashtop API.
- Test deep links exclusively on real physical devices with the Splashtop app installed — the FlutterFlow web Preview and iOS Simulator cannot reliably test native URL scheme launches.
- Always add an app-store fallback action when a deep link fails — silently doing nothing when Splashtop is not installed frustrates users; redirect them to install the app instead.
- Display an explicit You will be redirected to the Splashtop app message before launching the deep link so users understand what is about to happen, especially on first use.
- Disable the Connect button for offline computers rather than hiding it — showing it grayed out communicates that connecting is possible in principle but the computer is currently unavailable.
- If you are building for an MSP with many technicians, add Firebase Auth to the Cloud Function to verify that only your authenticated technicians can call the computer list endpoint.

## Use cases

### IT support team's quick-access computer launcher

An IT support technician uses a FlutterFlow app to see which computers in their managed fleet are currently online and tap to connect instantly. The app lists all registered computers from the Splashtop API, shows green/red online/offline indicators, and a single tap on any computer deep-links into the Splashtop Business app to start the session — cutting the multi-step process of finding the right computer in the Splashtop web portal.

Prompt example:

```
Build a screen that fetches all computers from my Splashtop API proxy and shows each as a Card with the computer name, OS type, and an Online/Offline status badge. A Connect button on each card launches the Splashtop app for that computer.
```

### Remote work dashboard with session history

A hybrid-work employee wants to quickly see which of their work computers are online and connect to them from their phone while traveling. A FlutterFlow app calls the Splashtop API proxy, shows personal computers sorted by last-accessed, and offers one-tap launch into the native Splashtop app. An offline computer shows a disabled Connect button with a Last seen tooltip.

Prompt example:

```
Show a list of my registered Splashtop computers with their online status and last seen time. Make the Connect button active only when the computer is online, and show a You can't connect — computer is offline message for offline devices.
```

### MSP technician portal with client computer lookup

A managed service provider technician needs to quickly look up a client's computers by name or client group and launch a remote session. A FlutterFlow app with a search bar filters the Splashtop computer list returned by the proxy API, grouping results by client. Tapping a result launches the Splashtop Business app directly to that computer.

Prompt example:

```
Create a screen with a search field at the top. Typing in it filters a ListView of computers fetched from my Splashtop API by computer name or client group name. Each result has a Connect button that launches a Splashtop deep link.
```

## Troubleshooting

### The Connect button taps do nothing on the device — no app opens and no error appears

Cause: The Splashtop URL scheme is incorrect, or the Splashtop app is not installed on the device, and the fallback action is not configured.

Solution: Verify the URL scheme with your Splashtop documentation — the scheme name varies by product (Splashtop Business vs Remote Support vs SOS). Test the URL scheme by opening a browser on the device and navigating to the deep link URL manually. If the URL scheme is wrong, nothing will happen. Add a Store URL fallback action as described in Step 5.

### The Cloud Function returns 500 Internal Server Error when fetching computers

Cause: The Splashtop API key is invalid or missing, the API endpoint URL is incorrect, or the Splashtop API is returning an error that the Cloud Function is not handling gracefully.

Solution: Check the Firebase Functions logs in the Firebase Console (Functions → Logs). The log will show the actual Axios error message and the HTTP status from the Splashtop API. Verify your credentials are set correctly: firebase functions:config:get splashtop to inspect the config values. If the Splashtop API returns 401 or 403, your API key is wrong or your plan does not include API access.

### XMLHttpRequest error when testing the GetComputers call in the FlutterFlow web Preview

Cause: The Cloud Function is missing CORS headers, so the browser blocks the response.

Solution: Add res.set('Access-Control-Allow-Origin', '*') and handle OPTIONS preflight in your Cloud Function (see the code in Step 2). Redeploy the function after making the change. Native iOS/Android builds are not affected by CORS.

```
res.set('Access-Control-Allow-Origin', '*');
res.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
if (req.method === 'OPTIONS') { res.status(204).send(''); return; }
```

### Deep link launches the Splashtop app but connects to the wrong computer or shows an error inside Splashtop

Cause: The computer_id value passed in the deep link URL does not match the identifier format Splashtop uses for session launch, or the specific deep link parameters for your product version differ from the example.

Solution: Verify the exact deep link URL format and parameter names in your Splashtop partner documentation. The computerId from the API may need to be formatted differently (URL-encoded, prefixed, or translated to a different field) for the deep link. Test with a hardcoded known-good computer ID first to confirm the URL scheme works before using the dynamic value from the API.

## Frequently asked questions

### Can FlutterFlow actually stream a remote desktop inside the app?

No. Remote desktop streaming (displaying and interacting with a remote screen in real time) requires platform-level native code and codec support that Splashtop delivers through its own native apps. FlutterFlow cannot embed a live remote desktop stream. The correct architecture is a companion launcher: your FlutterFlow app lists computers and starts the session via deep link, and the Splashtop native app handles the streaming. This is the same pattern used by TeamViewer and AnyDesk companion apps.

### Do I need a specific Splashtop plan for API access?

Yes. Splashtop's REST API is available on Business and Enterprise plans — it is not included in personal or Small Business tiers. Contact your Splashtop account team to confirm your plan includes API access and to obtain the correct API credentials and endpoint documentation for your specific Splashtop product (Business Access, Remote Support, SOS, etc.).

### What happens if the user taps Connect but the Splashtop app is not installed on their phone?

If the Splashtop URL scheme is not registered on the device (because the app is not installed), the Launch URL action fails silently on iOS or shows a system dialog on Android. You should add a fallback action that opens the App Store or Google Play listing for the Splashtop app. Use a platform-specific conditional in the Action Flow to open the correct store link.

### Can I build this for both iOS and Android from one FlutterFlow project?

Yes — FlutterFlow compiles to both platforms from a single project. The deep link URL scheme should work on both iOS and Android if the Splashtop app is installed. Test on both platforms separately because URL scheme handling has minor differences between iOS and Android, particularly around the fallback behavior when the app is not installed.

### How do I handle users in different regions where Splashtop uses different API endpoints?

In the Cloud Function, detect or accept the user's region as a parameter and use the appropriate Splashtop API base URL for that region (US, EU, etc.). Alternatively, configure multiple Cloud Functions or a routing layer inside a single function. Store the regional API URLs in Firebase Functions config rather than hardcoding them in the function code.

---

Source: https://www.rapidevelopers.com/flutterflow-integrations/splashtop
© RapidDev — https://www.rapidevelopers.com/flutterflow-integrations/splashtop