Skip to content
RoxyAPI
Quick StartPlaygroundSDKMCP SetupFree TemplatesAGENTS.md
  1. Docs
  3. Integrations
  5. FlutterFlow

FlutterFlow astrology app, no code charts

Build a natal chart screen, a daily horoscope card, a tarot reading flow, or a Vedic kundli generator inside any FlutterFlow app in about 20 minutes. iOS, Android and Web from one project, no Dart required.

FlutterFlow calls REST APIs through its API Calls panel: create a group, add the auth header once, and every call inside the group inherits it. Read the section on keeping the key out of the bundle before you ship anything public, because a FlutterFlow project compiles into an app your users hold.

The call that proves it

Run this in a terminal first. A 200 here means the key is good, so anything that fails next is builder wiring.

curl "https://roxyapi.com/api/v2/astrology/horoscope/aries/daily" \
  -H "X-API-Key: $ROXY_API_KEY"

No key yet? One key covers every domain and checkout is instant: pricing.

Now the same call in FlutterFlow. Start with a group so the header is set once for every endpoint you ever add.

  1. Open API Calls from the left navigation, click + Add, choose Create API Group.
  2. API Group Name RoxyAPI. API Base URL https://roxyapi.com/api/v2, with no trailing slash.
  3. + Add Header. Name X-API-Key, value your key from your account.
  4. Add Group.
  5. Open the group, click + Add API Call. Name getDailyHoroscope, Method Type GET, URL /astrology/horoscope/[sign]/daily. Only the part after the base URL goes here.
  6. Square brackets create a variable. Open the Variables tab and add sign, type String, default aries.
  7. Add Call, then go to Response & Test, fill the Variables section, and click Test API Call.

A 200 gives you clean JSON with no wrapper: sign, date, overview, love, career, health, finance, advice, column, luckyNumber, luckyColor, moonSign, moonPhase, energyRating.

Brackets, not braces

FlutterFlow path variables are [sign]. The API reference writes paths in OpenAPI form as {sign}. Swap the braces for brackets whenever you copy a path across.

Import every endpoint at once

Worth doing on a paid plan when you know you will use many domains. The Free plan caps a project at 2 API Endpoints, so a bulk import will not fit there.

  1. Save the combined spec, which is the one whose paths carry the domain segment:
    curl -o roxyapi.json https://roxyapi.com/api/v2/openapi.json
  2. In API Calls, click the Import OpenAPI icon.
  3. Upload File, pick roxyapi.json, and import. FlutterFlow creates a group with the calls, headers, query parameters, variables and body shapes from the file.
  4. Open the group and check the API Base URL. Our spec declares its server as a path rather than a full address, so set it to https://roxyapi.com/api/v2 if it is not already, then open one call and confirm the URL reads like /astrology/natal-chart.
  5. Add the X-API-Key header on the group, as in step 3 above.

Our spec is OAS 3.1, which the importer handles. An OAS 2.0 file from anywhere else can silently lose its request body, so stick to OAS 3 sources.

Ship a daily horoscope screen

One picker, one card, one query that fires on load.

  1. Drop a DropDown with the twelve signs (aries, taurus, gemini, cancer, leo, virgo, libra, scorpio, sagittarius, capricorn, aquarius, pisces).
  2. Bind its value to a Page State variable selectedSign, default aries.
  3. Add three Text widgets for the overview, the lucky number and the energy rating.
  4. Select the page in the widget tree, open Backend Query in the Properties Panel.
  5. Query Type API Call. Pick getDailyHoroscope under API Group or Call Name.
  6. Click + Set Additional Variable and map sign to selectedSign. Confirm.
  7. On each Text widget: Set from Variable, Source getDailyHoroscope Response, API response Options JSON Body, Available Options JSON Path, then the path, for example $.overview, $.luckyNumber, $.energyRating.

Run the project, pick a sign, and the screen rerenders.

Add a lang query parameter for one of ten languages (en, tr, de, es, hi, pt, fr, ru, zh-Hans, zh-Hant). Machine values such as sign stay English; the prose translates.

Send birth data with a POST

Charts, panchang, dasha, compatibility and synastry all take a birth moment. On the FlutterFlow side that is a form, an API Call action on the submit button, and an Action Output Variable Name that the next actions read.

POST /astrology/natal-chart takes five required fields. Create one variable per field on the call and put each into the JSON body.

VariableTypeSource on the form
dateString, YYYY-MM-DDDatePicker formatted output
timeString, HH:MM:SSTimePicker plus a :00 suffix
latitudeDoublefrom the city search below
longitudeDoublefrom the city search below
timezoneString, IANA namefrom the city search below

Optional houseSystem (placidus by default) and nodeType (true by default) are added the same way.

Resolve the city first, never ask for coordinates

No app user knows their birth latitude, and three number fields will kill your onboarding. Add a second call on /location/search with a q variable, wire it to a search-as-you-type field on a debounce, and let the user pick a city. It returns a cities array with city, province, country, latitude, longitude and timezone on each entry. The timezone is an IANA name, which is what you want: the server resolves it to the correct offset for the birth date, so a summer birth and a winter birth are both right. A decimal offset such as 5.5 is accepted but knows nothing about daylight saving.

Bind nested fields with a Data Type

A chart response nests: planets, houses and aspects are lists of objects. JSON paths work, but a typed Data Type is cleaner for a ListView.

  1. Create a Custom Data Type whose fields match the part of the response you display, for example a Planet type with name, sign, degree and house.
  2. Open the API call, Response & Test tab, Response Type, and turn on Parse as Data Type. Select your type.
  3. On the ListView, add the API call as a Backend Query, then set Generate Children from Variable with API Response Options As Data Type, Available Options Data Structure Field, and Select Field to the list you want, for example planets.
  4. Inside the list, bind each widget with Available Options Data Structure Field and the field name.

Keep the key out of the app bundle

A FlutterFlow project compiles to iOS, Android and Web bundles that your users hold. Anything stored as a static value in API Calls, Constants or App State is in there. Pick by what you are shipping.

ApproachHowWhen it is right
Static X-API-Key header on the groupPaste the key into the group headerInternal tools, prototypes, anything behind your own login on a device you control
Publishable pk_ keyMint a publishable key at your account, add your site host to its allowed origins, send it as Authorization: Bearer pk_live_...The Web build served from your own domain. The key is built to be public and is worthless from any other host. Publishable keys are refused on the MCP endpoints, and the iOS and Android builds have no web origin for the allowlist to match, so this is a web-only answer
FlutterFlow private API callMark the call private. It then runs in a Cloud Function, with the key on the serverPublic Firebase-backed apps, including mobile
Your own proxyA small Worker or route handler holds the key, exposes a thin pass-through, and meters per user. Point FlutterFlow at itPublic Supabase-backed or backend-less apps, and anywhere you need per-user limits. The Next.js integration covers the pattern

Private does not mean private if the key comes from the client

A private call runs in a Cloud Function, so a key written into the call header or URL stays on the server. A key passed in from the frontend, from App State or from a remote config, is still exposed. Hard-code it in the call itself. To check, download your project code and search the frontend files for the key.

A private call needs Firebase. It routes through Firebase Cloud Functions, which means Firebase enabled on the project and a Firebase plan that includes Cloud Functions. Supabase-only and backend-less projects use the proxy row instead.

Cache what does not change

FlutterFlow does not cache responses. A horoscope is identical all day for one sign.

  1. App State variable, persisted, with a lastFetched timestamp. Same calendar day, return the stored payload; otherwise call and update.
  2. A Firestore or Supabase document keyed by sign and date, refreshed once a day by a scheduled function. Every app read then comes from your own database.

The second is better for a busy app because it takes cached reads off your request allowance entirely. The caching guide lists how long each kind of result stays valid.

Gotchas

The import fails or the endpoint list is capped

The Free plan allows 2 API Endpoints per project. The combined spec carries 259+ endpoints, so bulk import needs a paid plan. On Free, add two calls by hand.

A private call returns 401 right after I set it up

Group headers are not applied to calls marked private. Add the X-API-Key header on the private call itself, or move the key into an environment variable inside the generated Cloud Function.

I get a 400 and cannot tell which field is wrong

A 400 carries issues[] listing every field problem at once, so read that array in the Test Response tab instead of guessing one field at a time. All errors come back as { error, code }. Retry only 429 and 5xx, never a 400.

The URL is missing the domain segment

Our spec declares its server as a path rather than a full address, so after an import check the group API Base URL reads https://roxyapi.com/api/v2 and one call URL reads /astrology/natal-chart.

Latitude arrives as a string

Set the variable type to Double, not String, and leave the value unquoted in the JSON body.

429 in the middle of testing

You are through your monthly request allowance. Cache in App State or in your own database rather than calling on every page load. See authentication for the quota headers on every response.

Pick the next endpoint

FAQ

Can I build an astrology app in FlutterFlow without code?

Yes. Create an API Group with the base URL https://roxyapi.com/api/v2 and one X-API-Key header, add a call per endpoint, then bind the response to widgets with a Backend Query and a JSON path. No Dart is involved, and one key reaches all 18 domains.

How do I add the API key header to every FlutterFlow API call?

Put it on the API Group rather than on individual calls. Open API Calls, create an API Group, and use + Add Header with the name X-API-Key. Every call inside the group inherits it. The one exception is a call marked private, which does not inherit group headers and needs its own.

Is my API key safe inside a FlutterFlow app?

Not if it is a secret key pasted as a static header, because that value ships inside the compiled iOS, Android and Web bundles. For a web build on your own domain, use a publishable pk_ key locked to that host. For mobile, use a private API call, which runs in a Cloud Function, or point the app at your own proxy.

How do I import every RoxyAPI endpoint into FlutterFlow at once?

Download https://roxyapi.com/api/v2/openapi.json, then use the Import OpenAPI icon in the API Calls panel and upload the file. That is the combined spec, so its paths already carry the domain segment. The Free plan caps a project at 2 API Endpoints, so bulk import needs a paid plan.

How do I turn a birth city into coordinates in a FlutterFlow app?

Add a call on /location/search with a q variable, wire it to a search field, and let the user pick a city from the cities array it returns. Each entry carries latitude, longitude and an IANA timezone that you pass into the chart call, so daylight saving for the birth date is handled for you.