ShipBob

Open the ShipBob Developer Portal at developer.shipbob.com and sign in with your ShipBob merchant credentials. Navigate to the API Tokens section — sometimes listed as Personal Access Tokens or PAT in the left sidebar. Click Create Token, give it a descriptive name such as FlutterFlow Dashboard, and select the permission scopes your app needs. For a read-only inventory dashboard, request Inventory read. For an app that creates orders, add Orders read/write. Copy the token immediately after creation; ShipBob will not show it again after you leave that page. Before proceeding, confirm your API base URL in the Developer Portal's API reference or Getting Started guide. ShipBob has historically used /1.0 and /1_0 path prefixes, but the current version is /2.0. Using an outdated base URL returns 404 errors on every call, which is the most common setup failure on this integration. The correct base URL at time of writing is https://api.shipbob.com/2.0 — but always verify this in the current portal documentation before building. Store the PAT in a password manager or your Firebase project's Secret Manager. Do not paste it into a code file, widget, or Dart source at this point. You will configure it as a variable in FlutterFlow for prototyping and move it to a Cloud Function environment secret for production in Step 6.

In your FlutterFlow project, click API Calls in the left navigation panel. Click the + Add button at the top of the panel and choose Create API Group. Name the group ShipBob and enter the base URL: https://api.shipbob.com/2.0. Note the /2.0 suffix — not /v2, /1.0, or /1_0. With the group saved, click into the Headers tab within the group settings. Add one header row: set the key to Authorization and the value to Bearer {{patToken}}. The double curly braces mark this as a FlutterFlow variable placeholder. Now click the Variables tab for the API Group. Click + Add Variable, name the variable patToken, set the type to String, and mark it as required. This variable will receive the actual PAT value when each API Call is invoked from a widget action. For the prototyping phase, store the PAT in App State: click the State Management icon in the left nav, add an App State variable named shipbobPAT of type String, and paste your token as the initial value. Then when you configure API Call actions on widgets, link the patToken parameter to this App State variable. Be aware that App State values compile into the app binary — this is acceptable for an internal prototype, but you will replace this with the Cloud Function proxy in Step 6 before any public release. Save the API Group. It now appears in the API Calls panel listing with the ShipBob base URL and an Authorization header configured.

1// API Group configuration reference
2// Group name: ShipBob
3// Base URL: https://api.shipbob.com/2.0
4// Headers:
5//   Authorization: Bearer {{patToken}}
6// Variables:
7//   patToken (String, required)

Inside the ShipBob API Group, click + Add API Call. Name it Get Inventory, set the method to GET, and set the endpoint path to /inventory. Leave the body empty — this is a GET request. Click the Response and Test tab, then click Test API Call. If your PAT is valid and the base URL is correct, you will receive a JSON response containing an array of inventory items, each with an id, name, and fulfillment center data. ShipBob inventory responses contain nested arrays: each item has a total_fulfillable_quantity at the top level and a fulfillment_center_quantities nested array for per-warehouse breakdowns. You need a Data Type to hold this. Go to left nav → Data Types → + Add Data Type. Name it ShipBobInventoryItem, then add fields: id (Integer), name (String), totalStock (Integer). Back in the Get Inventory API Call's JSON Path tab, click Generate JSON Paths from Sample to auto-detect fields from the test response. Map $.items[*].id to ShipBobInventoryItem.id, $.items[*].name to ShipBobInventoryItem.name, and $.items[*].total_fulfillable_quantity to ShipBobInventoryItem.totalStock. Repeat for orders: click + Add API Call, name it Get Orders, method GET, endpoint /order. Add a query parameter variable named status (String) so you can filter by open, pending, or completed. Test the call, generate JSON Paths, and create a ShipBobOrder Data Type with fields: id (Integer), referenceId (String), status (String), createdDate (String). Map the corresponding paths. Both calls are now ready to bind to your FlutterFlow UI widgets.

1// JSON Path mapping reference for ShipBob API Calls
2//
3// GET /inventory — expected response structure:
4// { "items": [ { "id": 123, "name": "...", "total_fulfillable_quantity": 50,
5//     "fulfillment_center_quantities": [ { "id": 1, "fulfillable_quantity": 30 }, ... ] } ] }
6//
7// JSON Paths to map:
8// $.items[*].id                        -> ShipBobInventoryItem.id
9// $.items[*].name                      -> ShipBobInventoryItem.name
10// $.items[*].total_fulfillable_quantity -> ShipBobInventoryItem.totalStock
11//
12// GET /order — expected response structure:
13// [ { "id": 456, "reference_id": "ORD-001", "status": "Processing", "created_date": "..." } ]
14//
15// JSON Paths to map:
16// $[*].id             -> ShipBobOrder.id
17// $[*].reference_id   -> ShipBobOrder.referenceId
18// $[*].status         -> ShipBobOrder.status
19// $[*].created_date   -> ShipBobOrder.createdDate

Add a new Page to your FlutterFlow project named Inventory Dashboard. In the widget tree, place a Column that fills the screen. At the top, add a Row containing two summary Cards — one for Total SKUs and one for Total Units In Stock. Below, add a ListView widget. Click the ListView's Generate Children from Variable property and choose Backend Query as the source. Select the ShipBob API Group, then the Get Inventory call. Pass the patToken by linking it to your App State shipbobPAT variable. FlutterFlow will use this to populate the list on page load. For the ListView child item (the template that repeats for each inventory item), add a Card widget. Inside the Card, add a Column containing: a Text widget bound to the ShipBobInventoryItem.name field, and a Row with a Text widget bound to ShipBobInventoryItem.totalStock and a Container acting as a stock badge. Configure the badge Container's fill color as a Conditional Styling rule — if totalStock is less than 10, color is red; if 10 to 50, color is orange; above 50, color is green. For the summary Cards at the top, add a Page-level Backend Query also pointing to Get Inventory. Then in the Action Flow Editor, use a Set Local Variable action on page load to calculate the count of items (for Total SKUs) and sum all totalStock values (for Total Units). Bind the resulting local variable values to the summary Card Text widgets. Wrap the entire ListView in a RefreshIndicator to enable pull-to-refresh, which re-runs the Backend Query on drag.

Inside the ShipBob API Group, click + Add API Call. Name it Create Order, set method to POST, and set the endpoint to /order. Click the Body tab and set body type to JSON. You will build the body from FlutterFlow variables — each JSON field becomes a variable you define in the Variables tab and reference using {{ variable }} syntax inside the body JSON. The minimum required fields for a ShipBob order include: recipient (an object with name, address1, city, state, country, zip_code, email), products (an array of objects each with id and quantity), and shipping_method. Create variables in the Variables tab: recipientName, recipientAddress1, recipientCity, recipientState, recipientCountry, recipientZip, recipientEmail, productId (Integer), productQuantity (Integer), shippingMethod, and referenceId. Create a new Page named Create Order with a Form widget. Add TextField widgets for each recipient field, a Dropdown for product selection (populated from the Get Inventory query — list ShipBobInventoryItem names but store the integer id as the selected value), a quantity number field, a shipping method dropdown, and a Submit Order button. In the button's Action Flow, add a Backend/API Call action for ShipBob → Create Order. Map each form widget's current value to the corresponding API Call variable. After the action, add a Conditional branch: if the response status code is 200 or 201, navigate to a Confirmation Page passing the returned order id as a page parameter. If the status is 4xx, show a Snackbar with the error detail from the response body. Test this in FlutterFlow Test Mode on a real device rather than the web preview to avoid any browser-level request blocking.

1// ShipBob POST /order request body template
2// Use these variable placeholders in the FlutterFlow API Call body JSON
3{
4  "recipient": {
5    "name": "{{recipientName}}",
6    "address1": "{{recipientAddress1}}",
7    "city": "{{recipientCity}}",
8    "state": "{{recipientState}}",
9    "country": "{{recipientCountry}}",
10    "zip_code": "{{recipientZip}}",
11    "email": "{{recipientEmail}}"
12  },
13  "products": [
14    {
15      "id": {{productId}},
16      "quantity": {{productQuantity}}
17    }
18  ],
19  "shipping_method": "{{shippingMethod}}",
20  "reference_id": "{{referenceId}}"
21}

For any app released to the App Store, Google Play, or shared with users outside your immediate team, the ShipBob PAT must move out of the FlutterFlow API Group header and into a server-side Firebase Cloud Function. Because the PAT grants order-creation and inventory access, leaving it in the app binary is a significant security risk — compiled Dart apps can be unpacked and the header values extracted. In the Firebase console, navigate to your project and open Functions in the left sidebar. Click Get Started or Create Function and choose an HTTP-triggered function. Name it shipbobProxy. Write the function to read the PAT from Firebase Functions configuration (set via the Firebase CLI command: firebase functions:config:set shipbob.pat=YOUR_TOKEN_HERE), then forward incoming requests to the ShipBob API with the Authorization header attached. The function receives a path parameter and optional body from FlutterFlow, calls ShipBob, and returns the response JSON. Deploy the function. You will receive a public HTTPS URL in the format https://us-central1-YOUR_PROJECT.cloudfunctions.net/shipbobProxy. Return to FlutterFlow and update the ShipBob API Group's base URL to this Cloud Function URL. Remove the Authorization header from the FlutterFlow group — the function now handles authentication. Remove the patToken variable requirement from individual API Calls. Your Flutter app now calls the Cloud Function, which securely calls ShipBob, and the PAT is never exposed client-side. For CORS on web builds: if your FlutterFlow app targets the web platform, the Cloud Function must include CORS response headers. The example below includes this. Native iOS and Android builds do not enforce CORS, but it is good practice to include it for future web support. If you would rather skip writing the Cloud Function entirely, RapidDev's team builds FlutterFlow integrations with secure backend proxies every week — free scoping call at rapidevelopers.com/contact.

1// Firebase Cloud Function — Node.js proxy for ShipBob API
2// File: functions/index.js
3// Deploy: firebase deploy --only functions
4// Requires Blaze plan for outbound HTTP calls
5
6const functions = require('firebase-functions');
7const axios = require('axios');
8
9exports.shipbobProxy = functions.https.onRequest(async (req, res) => {
10  // CORS headers (required for FlutterFlow web builds)
11  res.set('Access-Control-Allow-Origin', '*');
12  res.set('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
13  res.set('Access-Control-Allow-Headers', 'Content-Type, Authorization');
14
15  if (req.method === 'OPTIONS') {
16    res.status(204).send('');
17    return;
18  }
19
20  // PAT stored in Firebase config (never in client code)
21  // Set with: firebase functions:config:set shipbob.pat=YOUR_TOKEN
22  const pat = functions.config().shipbob.pat;
23
24  // FlutterFlow passes ?path=/inventory or ?path=/order etc.
25  const apiPath = req.query.path || '';
26  const shipbobUrl = `https://api.shipbob.com/2.0${apiPath}`;
27
28  try {
29    const response = await axios({
30      method: req.method,
31      url: shipbobUrl,
32      headers: {
33        'Authorization': `Bearer ${pat}`,
34        'Content-Type': 'application/json'
35      },
36      data: req.body
37    });
38    res.status(response.status).json(response.data);
39  } catch (error) {
40    const status = error.response ? error.response.status : 500;
41    const data = error.response
42      ? error.response.data
43      : { error: error.message };
44    res.status(status).json(data);
45  }
46});