# Spocket

- Tool: FlutterFlow
- Difficulty: Intermediate
- Time required: 45 minutes
- Last updated: July 2026

## TL;DR

Connect FlutterFlow to Spocket by routing API calls through a Firebase Cloud Function proxy that securely injects your Bearer key, then creating a FlutterFlow API Group pointed at the function to browse supplier catalogs and track order fulfillment status. Build read-only product listings and order dashboards — Spocket's REST API is suited for catalog browsing, not standalone order creation.

## Building a Dropshipping Catalog Browser: FlutterFlow + Spocket

Spocket gives dropshippers access to a curated network of US and EU suppliers with fast shipping times, making it a strong alternative to AliExpress-sourced stores. Its REST API (base https://api.spocket.co/v1) exposes product listings and order status endpoints that you can surface in a native mobile app — letting your customers browse real supplier inventory, view pricing, and check fulfillment progress without leaving your branded app.

The critical challenge in FlutterFlow is security. FlutterFlow compiles to a Flutter client app that runs on the user's device. Any API key you paste directly into an API Call header will be baked into the distributed app binary and is trivially extractable. Spocket's Bearer API key is a private credential tied to your paid account — exposing it means anyone could query your supplier catalog or impersonate your store. The solution is a thin Firebase Cloud Function proxy: FlutterFlow calls your function, the function adds the Bearer key from its secure environment, and forwards the request to Spocket. Your key never touches the client.

Spocket plans start from around $39.99/month (verify current pricing on spocket.co) and API access is typically tied to a paid subscription — confirm your plan includes API credentials before starting. The API is best suited for catalog browsing and order status reads; order creation in Spocket flows through Shopify or WooCommerce stores rather than a standalone REST endpoint. Keep your FlutterFlow app focused on what the API does well: displaying supplier products and tracking fulfillment.

## Before you start

- A Spocket paid account with API access enabled — check your plan details at spocket.co
- Your Spocket API key (Bearer token) from the Spocket account settings or developer panel
- A Firebase project with Cloud Functions enabled (Blaze plan required to make outbound HTTP calls from Cloud Functions)
- A FlutterFlow project (any tier) with Firebase connected via Settings & Integrations → Firebase
- Basic familiarity with the FlutterFlow API Calls panel and Data Types

## Step-by-step guide

### 1. Deploy a Firebase Cloud Function proxy for Spocket

Because Spocket's Bearer API key is a private credential, it must never appear in a FlutterFlow API Call header — that would bake it into the compiled app. Instead, create a Firebase Cloud Function that receives requests from FlutterFlow, injects the key, and forwards them to Spocket.

In the Firebase Console, navigate to your project and open the Cloud Functions section. If you haven't already, upgrade to the Blaze (pay-as-you-go) plan — outbound HTTP calls from Cloud Functions require it. Create a new HTTP-triggered function and paste the proxy code below. Store your Spocket API key as an environment variable (in the Firebase Console under Functions → Configuration, or via the Firebase CLI) — never hardcode it in the function source.

Deploy the function and copy the trigger URL. It will look like https://us-central1-your-project.cloudfunctions.net/spocketProxy. This is the URL FlutterFlow will call — it never sees your Spocket key directly. Test the function manually in your browser or with a REST client by calling it with a path query parameter like ?path=/v1/products to confirm it returns Spocket product JSON.

```
const functions = require('firebase-functions');
const axios = require('axios');

exports.spocketProxy = functions.https.onRequest(async (req, res) => {
  // Allow FlutterFlow web builds to call this function
  res.set('Access-Control-Allow-Origin', '*');
  res.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  res.set('Access-Control-Allow-Headers', 'Content-Type');
  if (req.method === 'OPTIONS') {
    res.status(204).send('');
    return;
  }

  const spocketKey = process.env.SPOCKET_API_KEY;
  if (!spocketKey) {
    res.status(500).json({ error: 'SPOCKET_API_KEY not configured' });
    return;
  }

  // path param: e.g. /v1/products or /v1/orders
  const path = req.query.path || '/v1/products';
  const queryParams = { ...req.query };
  delete queryParams.path;

  try {
    const response = await axios.get(`https://api.spocket.co${path}`, {
      headers: {
        Authorization: `Bearer ${spocketKey}`,
        'Content-Type': 'application/json',
      },
      params: queryParams,
    });
    res.status(200).json(response.data);
  } catch (error) {
    const status = error.response?.status || 500;
    res.status(status).json({ error: error.message });
  }
});
```

**Expected result:** The Cloud Function deploys successfully and returns Spocket product JSON when you call the trigger URL with ?path=/v1/products.

### 2. Create a FlutterFlow API Group targeting the proxy

With the Cloud Function deployed, open your FlutterFlow project and click API Calls in the left navigation panel. Click the + Add button and choose Create API Group. Name it SpocketProxy and paste your Cloud Function trigger URL as the Base URL — for example https://us-central1-your-project.cloudfunctions.net/spocketProxy. Leave the Authentication section empty because authentication is handled inside the Cloud Function, not in FlutterFlow.

Inside the API Group, click + Add API Call to add your first endpoint. Name it GetProducts. Set the Method to GET and add a Query Parameter named path with a default value of /v1/products. This tells the proxy which Spocket endpoint to forward to. You can add additional optional query parameters like page, per_page, or category_id to support pagination and filtering — these get passed through as-is to Spocket.

Once saved, open the Response & Test tab. Click Test API Call. If you've set the path to /v1/products the function should return a JSON array of Spocket products. Click Generate JSON Paths to let FlutterFlow automatically detect the structure. You'll see paths like $.products[0].title, $.products[0].price, $.products[0].image_url — select the fields you want to use in your UI.

```
{
  "API Group": "SpocketProxy",
  "Base URL": "https://us-central1-your-project.cloudfunctions.net/spocketProxy",
  "Authentication": "None (handled by Cloud Function)",
  "API Calls": [
    {
      "Name": "GetProducts",
      "Method": "GET",
      "Query Parameters": [
        { "name": "path", "default": "/v1/products" },
        { "name": "page", "default": "1" },
        { "name": "per_page", "default": "20" }
      ]
    },
    {
      "Name": "GetOrders",
      "Method": "GET",
      "Query Parameters": [
        { "name": "path", "default": "/v1/orders" }
      ]
    }
  ]
}
```

**Expected result:** The SpocketProxy API Group appears in the API Calls panel with GetProducts and GetOrders calls that return JSON when tested.

### 3. Create Data Types and map Spocket JSON paths

Before binding API responses to widgets, define FlutterFlow Data Types that mirror the Spocket product and order JSON shapes. Go to Data Types in the left nav (the database icon) and click + Add Data Type. Create a SpocketProduct type with fields: id (String), title (String), price (Double), imageUrl (String), supplierName (String), shippingTime (String), inventoryCount (Integer).

Create a second Data Type called SpocketOrder with fields: orderId (String), status (String), trackingNumber (String), createdAt (String), itemTitle (String).

Now link these to your API calls. Open the GetProducts API Call, navigate to the Response & Test tab, and use the generated JSON Paths to map each field: $.products[0].title → title, $.products[0].retail_price → price, $.products[0].images[0].src → imageUrl. These paths may differ slightly depending on your Spocket plan and API version — use the actual JSON returned in the test to confirm the structure.

Repeat this mapping exercise for the GetOrders call using your SpocketOrder type. Having well-structured Data Types prevents repetitive JSON Path setup every time you add a new screen.

**Expected result:** SpocketProduct and SpocketOrder Data Types appear in your project, and the API Call JSON Path mappings are confirmed in the Response & Test tab.

### 4. Build product and order ListViews and bind data

Create a new page called ProductCatalog. Add a ListView widget as the main content area. Inside the ListView, add a Card containing: an Image widget (for product image), a Text widget for the title, a Text widget for the price formatted as currency, and a Text widget for supplier name or shipping time.

To populate the ListView, select it in the widget tree and open the Backend Query panel. Set the Query Type to API Call, select SpocketProxy → GetProducts as the call. The list view will now fire the API call when the screen loads and iterate over the returned product array.

Bind each widget: select the Image widget → Set Image Path → From Variable → Backend Query → imageUrl JSON Path. Do the same for title and price Text widgets. For the price, you can apply a Number Format action in the widget binding to display it as a currency string.

Create a second page called OrderTracker using the same pattern but with the GetOrders call and SpocketOrder Data Type. Add status badges using a Container with conditional background color based on the status field (processing = orange, shipped = blue, delivered = green). Set up a pull-to-refresh by wrapping the ListView in a RefreshIndicator widget from the Refresh List property in the ListView settings.

**Expected result:** The ProductCatalog screen displays Spocket products in a scrollable Card list with images, titles, and prices. The OrderTracker screen shows orders with colored status badges.

### 5. Handle pagination and test on device

Spocket's product catalog may contain hundreds of items — you'll want pagination to avoid loading everything at once. In FlutterFlow, manage pagination state with a Page State variable. Create a page-level integer state variable named currentPage with a default value of 1.

Add a Load More button below your ListView. In the button's Action Flow, use the Update Local State action to increment currentPage by 1, then re-fire the GetProducts API call with currentPage passed as the page query parameter. Append the new results to your existing list using the Add Item to List action on a list-typed App State variable that holds your products array.

For testing: custom API calls do render in FlutterFlow's browser Preview mode, but verify images and data look correct in Run mode (click the Run button top-right) or by downloading to a physical device via the Download APK/iOS option. Pay particular attention to image loading performance on mobile — supplier images can be high-resolution and slow on cellular. Consider adding the CachedNetworkImage pattern via a Custom Action if you find images load slowly.

If you want to ship this to real users, ensure your Cloud Function has basic rate protection — add a check for the Spocket rate limit (verify the current limit in Spocket's documentation) and return a 429 response from your function if you're approaching the limit, so FlutterFlow can display a friendly message rather than silently failing.

**Expected result:** Tapping Load More fetches the next page of products and appends them to the list. The app works correctly on a physical device with real supplier images loading without errors.

## Best practices

- Never place the Spocket Bearer key directly in a FlutterFlow API Call header — always route through a Firebase Cloud Function so the key stays server-side and is not compiled into the app binary.
- Verify each Spocket API endpoint is available on your specific plan before designing screens around it — the public documentation is limited and endpoint availability varies by subscription tier.
- Set image fallbacks on every Image widget displaying Spocket supplier URLs, since hotlinked CDN images can expire or return 404 without warning.
- Implement pagination from the start rather than loading all products at once — even a 50-product catalog can slow initial screen load on mobile networks.
- Cache product data locally in Firestore or App State between sessions so users see content immediately while the API call refreshes in the background.
- Gate your catalog browsing with your own app authentication before showing Spocket data — even though Spocket products are visible to subscribers, you want your app users authenticated so you can track usage.
- Keep the FlutterFlow integration read-only for catalog and order status; order creation flows through Shopify or WooCommerce, not through a direct Spocket REST call.
- Test the full experience on a real device (Run mode or downloaded APK), not just the FlutterFlow browser Preview, to verify image loading performance and layout on actual mobile screen sizes.

## Use cases

### Branded dropshipping catalog app

A fashion founder builds a mobile shopping app where customers browse Spocket supplier products filtered by category and price. The FlutterFlow app calls the proxy to fetch /v1/products, displays them in a Card-based ListView with supplier images and pricing, and links to checkout via the connected Shopify store.

Prompt example:

```
A mobile catalog screen showing Spocket products in a grid layout with product image, title, price, and a View button that opens a detail screen with shipping time and supplier info.
```

### Order fulfillment tracker

A store owner builds an internal ops app to track Spocket order status without logging into the Spocket dashboard. The app queries /v1/orders through the proxy, displays orders grouped by status (processing, shipped, delivered), and shows tracking info pulled from the order JSON.

Prompt example:

```
An order management screen that lists all active Spocket orders with status badges, shipping carrier, and estimated delivery date, refreshed by a pull-to-refresh gesture.
```

### Supplier product research tool

A sourcing manager uses a FlutterFlow app to compare supplier products from Spocket's catalog, saving interesting products to a Firestore watchlist. The app paginates through /v1/products, lets the user filter by shipping time or price, and bookmarks items to a personal shortlist stored in Firebase.

Prompt example:

```
A product research screen with search and filter controls (category, max price, ships from country) that displays paginated Spocket product results and lets the user save items to a personal watchlist.
```

## Troubleshooting

### API call returns 401 Unauthorized from the Cloud Function

Cause: The SPOCKET_API_KEY environment variable is not set in the Cloud Function configuration, or the key has been revoked.

Solution: In the Firebase Console, go to Cloud Functions → your function → Configuration and verify the SPOCKET_API_KEY variable is present and contains the correct Bearer token from your Spocket account. If the key is correct, log into Spocket and regenerate it, then update the function config and redeploy.

### XMLHttpRequest error in FlutterFlow web preview when testing the API Call

Cause: CORS is not configured in the Cloud Function, blocking browser-origin requests from FlutterFlow's web preview.

Solution: Ensure your Cloud Function includes CORS headers in the response: set Access-Control-Allow-Origin: * and handle OPTIONS preflight requests with a 204 response. The proxy code in Step 1 includes this — if you wrote your own function, add the cors npm package or manually set the headers as shown.

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

### Product images show broken image icons on the catalog screen

Cause: Spocket product images are hotlinked from supplier CDN URLs that can expire, be removed, or return 404 after the product is sourced.

Solution: In the Image widget settings, set a fallback image under the Error Builder property. Upload a placeholder product image to FlutterFlow's asset manager and select it as the error fallback. This ensures users see a clean placeholder rather than a broken image icon when supplier URLs are unavailable.

### The Cloud Function deploys but returns a 403 Forbidden error on all calls

Cause: Firebase Cloud Functions HTTP triggers require authentication by default in newer Firebase projects. The function may be blocking unauthenticated calls from FlutterFlow.

Solution: In the Google Cloud Console, navigate to Cloud Run → your function → Security, and allow unauthenticated invocations. Alternatively, add Firebase App Check to your FlutterFlow project to authenticate requests without exposing user credentials. For development, setting allUsers invoke permission is fastest; for production, prefer App Check.

## Frequently asked questions

### Can I create Spocket orders from my FlutterFlow app?

Spocket's order automation is designed to work through Shopify or WooCommerce, not as standalone REST order creation. In practice, your FlutterFlow app should read products and order status from Spocket through the proxy, while order placement happens through your connected e-commerce platform. Check Spocket's current API documentation for any order creation endpoints on your plan before designing around this.

### Does the Spocket API key need to be kept secret even if I'm only reading product data?

Yes. Even read-only access with a Bearer API key represents your Spocket account credentials. If the key leaks from your app binary, anyone could query your supplier pricing, catalog, and order history — or make calls that count against your rate limit. Always route through the Cloud Function proxy regardless of whether you're doing reads or writes.

### Will the Spocket integration work in FlutterFlow's web Preview mode?

The API Call itself will work in Preview mode if your Cloud Function has CORS headers configured correctly. Product images from supplier CDN URLs may load differently in the browser preview versus on a real device. Always do a final test in Run mode or on a physical device before shipping to users.

### How do I handle Spocket rate limits in my app?

Spocket's current rate limits are not publicly documented — verify them in your Spocket developer or account settings. In your Cloud Function proxy, you can track call frequency using Firebase Firestore counters or a simple in-memory cache and return a 429 response to FlutterFlow before you hit the Spocket limit. On the FlutterFlow side, add an error state handler to your API Call backend query to display a friendly 'Please wait a moment' message when you receive a 429.

### Do I need a paid Spocket plan to access the API?

API access is typically tied to a paid Spocket subscription — the free trial may not include API credentials. Check your account settings after upgrading to a paid plan to find the API key. Contact Spocket support to confirm API access is included in your specific plan tier before building your integration.

---

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