AfterShip

Open your browser and go to https://app.aftership.com. Log in or create a free account. Once inside the dashboard, navigate to Settings (gear icon in the left sidebar) → API Keys. Click 'Create API Key', give it a label like 'FlutterFlowApp', and copy the generated key to a secure place — your password manager or a private notes file. While you are in the AfterShip dashboard, take a moment to understand the free plan limits. The free tier includes approximately 50 shipment trackings per month (verify the current number at aftership.com/pricing, as limits change). Importantly, 'a tracking' means registering a new shipment — calling the GET status endpoint on an already-registered tracking does not consume additional quota. This means you can register one real tracking number, then call the status endpoint dozens of times during development without burning your monthly allowance. Also note AfterShip's carrier slug system. Carriers are identified by a short slug (e.g., 'usps' for United States Postal Service, 'fedex' for FedEx, 'dhl' for DHL). When you register a tracking, you can either pass the carrier slug explicitly or let AfterShip auto-detect it. Auto-detection works well for major carriers but can miss regional ones — passing the slug explicitly gives more reliable results.

Open your FlutterFlow project in the browser. Click API Calls in the left navigation panel (the plug/lightning icon). Click + Add → Create API Group. A dialog appears requesting a group name and base URL. Set: - Group name: AfterShip - Base URL: https://api.aftership.com/v4 Note: do not add a trailing slash after v4 — FlutterFlow concatenates the base URL with the endpoint path, and an extra slash can cause routing issues. Click the Headers tab. Add one header: - Header name: aftership-api-key - Value: your API key from Step 1 This is the only authentication AfterShip requires. The header name is lowercase and hyphenated — AfterShip also accepts 'as-api-key' as an alias, but 'aftership-api-key' is the primary name shown in their documentation. Do not add a 'Bearer ' prefix — this is a plain API key header, not a Bearer token. For web builds, note that AfterShip's CORS policy allows browser origins on most endpoints. You will likely not encounter CORS errors on web, but if you do (especially if testing from a localhost domain), the Firebase Cloud Function proxy approach in Step 6 resolves it. Native iOS and Android builds do not have CORS restrictions. Click Save. The API Group is now ready to hold your AfterShip API Calls.

1// AfterShip API Group configuration reference:
2// Group name: AfterShip
3// Base URL: https://api.aftership.com/v4
4// Headers (static):
5//   aftership-api-key: your-api-key-here
6//
7// Note: AfterShip also accepts 'as-api-key' as an alternate header name.

Inside the AfterShip API Group, click + Add API Call. Name it 'Register Tracking'. Set the method to POST and the endpoint to trackings — the full URL becomes https://api.aftership.com/v4/trackings. Go to the Variables tab. Add two variables: - tracking_number (String, body) - slug (String, body) — this is the carrier slug (optional but recommended) In the Body tab, select JSON body type. Enter the request body structure. AfterShip wraps the tracking object in a 'tracking' key: { "tracking": { "tracking_number": "{{tracking_number}}", "slug": "{{slug}}" } } The slug field is optional — if you omit it, AfterShip will attempt auto-detection. For a better user experience in a real app, either let users select their carrier from a dropdown (mapped to AfterShip slugs) or use AfterShip's /couriers/detect endpoint to suggest the carrier based on the tracking number format. In the Response & Test tab, test the call with a real tracking number and carrier slug. A successful registration returns HTTP 201 Created with a JSON body containing the full tracking object including the AfterShip-assigned id. Map the response JSON path $.data.tracking.id into a variable if you need to reference the tracking later. Important edge case: if you call this endpoint with a tracking number that is already registered in your AfterShip account, you will get a 4009 error ('Tracking already exists'). This is not a fatal error — it means the tracking was already registered and you can proceed directly to the GET endpoint to read its status. Handle this in your Action Flow: treat 4009 as a success signal and skip to the status-reading step.

1// POST /trackings request body:
2{
3  "tracking": {
4    "tracking_number": "{{tracking_number}}",
5    "slug": "{{slug}}",
6    "title": "{{order_title}}"
7  }
8}
9// Response on success (201 Created):
10// $.data.tracking.id          → AfterShip tracking ID
11// $.data.tracking.slug        → resolved carrier slug
12// $.data.tracking.tag         → current status tag (e.g. 'InTransit', 'Delivered')
13// $.data.tracking.checkpoints → array of checkpoint objects

Inside the AfterShip API Group, add a second API Call. Name it 'Get Tracking Status'. Set the method to GET and the endpoint to trackings/{{slug}}/{{tracking_number}} — this is the AfterShip endpoint that returns full status and checkpoint history for a registered tracking. In the Variables tab, add two path variables: slug (String) and tracking_number (String). These are already defined by your API Group pattern from the previous step. In the Response & Test tab, test with a real slug and tracking number (one you already registered in Step 3). Paste the JSON response into the sample field. AfterShip returns a rich response including the current status tag, estimated delivery time, origin/destination country, and most importantly a checkpoints array. Create a Data Type called 'AfterShipCheckpoint' with these fields: - created_at (String) - tag (String) — checkpoint category (e.g. 'InTransit', 'OutForDelivery') - message (String) — human-readable status description - location (String) — city, state or facility name - country_name (String) Create a second Data Type called 'AfterShipTracking' with fields: - tracking_number (String) - slug (String) - tag (String) — overall current status - expected_delivery (String) - checkpoints (List of AfterShipCheckpoint) In the Response & Test panel, use Generate JSON Paths. Map: - $.data.tracking.tag → tag - $.data.tracking.expected_delivery → expected_delivery - $.data.tracking.checkpoints[*].message → checkpoints[].message - $.data.tracking.checkpoints[*].tag → checkpoints[].tag - $.data.tracking.checkpoints[*].created_at → checkpoints[].created_at - $.data.tracking.checkpoints[*].location → checkpoints[].location

1// JSON Paths for GET /trackings/{{slug}}/{{tracking_number}} response:
2// $.data.tracking.tag                     → current status (String)
3// $.data.tracking.expected_delivery       → estimated delivery date (String)
4// $.data.tracking.origin_country_iso3     → origin country code (String)
5// $.data.tracking.destination_country_iso3 → destination country (String)
6// $.data.tracking.checkpoints[*].tag      → checkpoint status tags (List<String>)
7// $.data.tracking.checkpoints[*].message  → checkpoint messages (List<String>)
8// $.data.tracking.checkpoints[*].created_at → timestamps (List<String>)
9// $.data.tracking.checkpoints[*].location → locations (List<String>)

Now wire everything to the FlutterFlow UI. Create a tracking screen with two sections: the input area at the top and the timeline below. For the input area: add a TextField widget (hint text: 'Enter tracking number') and a Button labeled 'Track Package'. Select the Button → open the Actions panel → + Add Action → Backend/API Calls. Add the Register Tracking call first (with the tracking number from the TextField's controller), followed immediately by the Get Tracking Status call. In the Action Flow Editor, add branching: if the Register Tracking call returns code 4009 (tracking exists), skip it and proceed to Get Tracking Status directly. For the status badge: add a Container with a background color driven by a condition on the tracking's tag field. Common tag values from AfterShip: 'Pending' (grey), 'InTransit' (blue), 'OutForDelivery' (orange), 'Delivered' (green), 'Exception' (red). Use FlutterFlow's conditional styling to color the container based on the tag string. For the checkpoint timeline: add a ListView below the badge, backed by the checkpoints Data Type list from your Get Tracking Status response. Inside each list item, add: - A small dot or icon (use FlutterFlow's Icon widget with a circle) - A Text widget for the checkpoint message, bold - A Text widget for the location in a smaller font - A Text widget for the timestamp Store the checkpoints in App State (List type) after the API call and bind the ListView to that App State list. Add a CircularProgressIndicator (loading spinner) widget that shows while the API call is in progress, using FlutterFlow's conditional visibility tied to a boolean App State variable 'isLoading'. Test in FlutterFlow's Test Mode with a real tracking number. The timeline should populate with checkpoint history, and the status badge should reflect the current delivery state.

For any app you release to the App Store or Play Store, the API key should not be embedded in the compiled binary. While AfterShip API keys have more limited blast radius than payment keys (they grant read/track access, not financial operations), a leaked key can still exhaust your monthly tracking quota or expose your shipment data. The Firebase Cloud Function proxy pattern is the same as other REST integrations: a lightweight Node.js function that accepts the tracking slug and tracking number from FlutterFlow, adds the AfterShip API key from server-side config, calls AfterShip, and returns the response. In FlutterFlow, update your API Group's base URL to point to the Cloud Function URL instead of api.aftership.com. For the Register Tracking call (POST), the Cloud Function proxies the JSON body to AfterShip. For the Get Tracking Status call (GET), it forwards the path parameters. The Cloud Function also handles CORS, which is useful if you have a web build that encounters browser restrictions. If you want a simpler production option without Firebase, consider storing the API key in your Supabase project's Edge Function environment variables and creating a Supabase Edge Function as the proxy instead. Both patterns work — choose whichever backend your FlutterFlow app is already using for other features. If you need help setting this up, RapidDev's team handles FlutterFlow API integrations like this regularly and offers a free consultation at rapidevelopers.com/contact.

1// Firebase Cloud Function — AfterShip proxy (Node.js, index.js)
2const functions = require('firebase-functions');
3const axios = require('axios');
4
5exports.aftershipProxy = 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');
9    res.set('Access-Control-Allow-Headers', 'Content-Type');
10    res.status(204).send('');
11    return;
12  }
13
14  const apiKey = functions.config().aftership.apikey;
15  const path = req.query.path || 'trackings';
16
17  try {
18    const response = await axios({
19      method: req.method,
20      url: `https://api.aftership.com/v4/${path}`,
21      headers: {
22        'aftership-api-key': apiKey,
23        'Content-Type': 'application/json'
24      },
25      data: req.method === 'POST' ? req.body : undefined
26    });
27    res.status(response.status).json(response.data);
28  } catch (error) {
29    const status = error.response ? error.response.status : 500;
30    res.status(status).json(error.response ? error.response.data : { error: 'Proxy error' });
31  }
32});