PyCharm

Open PyCharm and create a new Python project. Install FastAPI and uvicorn by adding them to a requirements.txt file (fastapi, uvicorn[standard]). Create a main.py file and write your first endpoint. A simple starting point is a GET /health endpoint and a POST /data endpoint that accepts a JSON body and returns a response. For example, a /summarize endpoint that accepts { "text": "string" } and returns { "summary": "string" }. Keep the business logic simple at this stage — you are validating the architecture first. To test the endpoint before deploying, PyCharm's built-in HTTP Client is invaluable. Create a file named requests.http in your project. In it, write: POST http://localhost:8000/summarize Content-Type: application/json { "text": "Your test input here" } Run the FastAPI server (uvicorn main:app --reload) from the Run/Debug toolbar or terminal, then click the green play button next to the request in the .http file. PyCharm will show you the full response including status code, headers, and body. This is exactly the shape FlutterFlow will need to handle — validate it carefully before deployment. Note: FlutterFlow cannot open your .py files or run Python — it will only ever call the deployed HTTP URL. PyCharm is entirely your authoring and testing environment.

1# main.py — FastAPI starter
2from fastapi import FastAPI, HTTPException
3from pydantic import BaseModel
4
5app = FastAPI()
6
7class TextInput(BaseModel):
8    text: str
9
10@app.get("/health")
11def health():
12    return {"status": "ok"}
13
14@app.post("/summarize")
15def summarize(body: TextInput):
16    # Replace with real logic (e.g., OpenAI call)
17    summary = body.text[:200] + "..." if len(body.text) > 200 else body.text
18    return {"summary": summary}

Any API endpoint callable from a mobile app needs authentication — otherwise anyone can call it. The recommended approach for FlutterFlow integrations is Bearer/JWT authentication: your Python API issues a JWT token on login, and FlutterFlow sends it as Authorization: Bearer {token} in subsequent requests. Install python-jose and passlib packages (add to requirements.txt: python-jose[cryptography], passlib[bcrypt]). Add a /token endpoint that accepts username and password in a form body and returns a signed JWT. Then protect your /summarize (and other) endpoints with a dependency that validates the JWT on each incoming request. Alternatively, for a simple internal tool where you control all clients, you can skip JWT and use a static shared secret — an API key string you generate and store both in your FlutterFlow App State and in the Python server's environment variable. The FastAPI endpoint reads it from the request header and rejects calls that do not match. This is simpler but less secure for multi-user apps. Critical: keep your Python server's own secrets (database passwords, OpenAI API keys, JWT signing secrets) in environment variables — load them with os.environ.get() or python-dotenv. Never return them in API responses or log them. The FlutterFlow client should never receive values that would compromise the server.

1# Simple API key auth example for internal tools
2import os
3from fastapi import FastAPI, HTTPException, Header
4from typing import Optional
5
6app = FastAPI()
7API_KEY = os.environ.get("API_KEY", "change-me-in-production")
8
9def verify_key(x_api_key: Optional[str] = Header(None)):
10    if x_api_key != API_KEY:
11        raise HTTPException(status_code=401, detail="Invalid API key")
12    return x_api_key
13
14@app.get("/health")
15def health():
16    return {"status": "ok"}
17
18@app.post("/summarize")
19def summarize(body: dict, key: str = __import__('fastapi').Depends(verify_key)):
20    text = body.get("text", "")
21    return {"summary": text[:200]}

Before deploying, add CORS middleware to your FastAPI app. This is essential for FlutterFlow web builds, which run in a browser and enforce CORS. Native iOS/Android builds do not enforce CORS, but adding it harms nothing and future-proofs your API. Add the FastAPI CORS middleware, allowing your FlutterFlow app's domain (or * for development): from fastapi.middleware.cors import CORSMiddleware app.add_middleware(CORSMiddleware, allow_origins=["*"], allow_methods=["*"], allow_headers=["*"]) For production, replace allow_origins=["*"] with your specific FlutterFlow published domain. Now deploy. The easiest path for founders is Render.com: create a new account, choose New → Web Service, connect your GitHub repository (push your PyCharm project to GitHub first using PyCharm's built-in Git integration), select Python as the environment, set the start command to uvicorn main:app --host 0.0.0.0 --port $PORT. Add your environment variables (API_KEY, DATABASE_URL, etc.) in Render's Environment section. Render deploys automatically on every push and gives you a free HTTPS URL like https://your-app.onrender.com. Test the deployed URL using PyCharm's HTTP Client — update the request to use the Render URL instead of localhost. Confirm all endpoints return correct responses before moving to FlutterFlow. Note: the Render free tier has cold starts (the server sleeps after 15 minutes of inactivity, adding ~30 seconds to the first request). For production, upgrade to a paid instance or use Railway/Google Cloud Run.

1# requirements.txt
2fastapi
3uvicorn[standard]
4python-dotenv
5httpx
6
7# Render start command
8# uvicorn main:app --host 0.0.0.0 --port $PORT

Now open your FlutterFlow project. In the left navigation panel, click API Calls → + Add → Create API Group. Name it PythonBackend (or something specific to your backend's purpose). Enter your deployed HTTPS URL as the Base URL — for example https://your-app.onrender.com. In the API Group Headers tab, add the authentication header you chose: Key: X-API-Key Value: {{ apiKey }} (or Authorization: Bearer {{ token }} for JWT-based auth) Go to the Variables tab and add apiKey (String). This variable will be passed from App State when calls are made. Store the actual API key value in App State and populate it on app start or after a login step. Now add your first API Call inside the group. Click + Add API Call. Name it Summarize. Set method to POST, endpoint to /summarize. In the Body tab, add JSON: { "text": "{{ inputText }}" }. Add a variable inputText (String). In Response & Test, paste a sample response { "summary": "..." } and add a JSON Path: $.summary → summaryText (String) Test the call using the Test button, passing your actual API key and some test text. If it works, you will see the returned summary in the test panel. If it returns 401, your API key variable is not being passed correctly.

1{
2  "baseUrl": "https://your-app.onrender.com",
3  "headers": {
4    "X-API-Key": "{{ apiKey }}",
5    "Content-Type": "application/json"
6  },
7  "calls": [
8    {
9      "name": "Summarize",
10      "method": "POST",
11      "endpoint": "/summarize",
12      "body": { "text": "{{ inputText }}" },
13      "jsonPaths": { "$.summary": "summaryText" }
14    }
15  ]
16}

With the API Call working, it is time to bind it to your app's UI. Go to your FlutterFlow screen, add a Column containing a TextField widget and a Button labeled Summarize. In the TextField properties, bind the value to a Page State variable inputText (String). Select the Button widget and open the Actions panel (the lightning bolt icon). Click + Add Action. Choose Backend/API Call, select PythonBackend → Summarize. Map the inputText parameter to the Page State variable inputText. Map the apiKey parameter to the App State variable you set up for the key. For the success path, add an Update Page State action to store the returned summaryText in a Page State variable summaryResult (String). Add a Text widget below the button. In its Text Source, choose Page State → summaryResult. By default it will be empty until the user taps Summarize and receives a response. Wrap it in a Conditional Visibility widget that shows only when summaryResult is not empty. For loading state, add a variable isLoading (Boolean) to Page State. Set it to true before the API call action and false in both the success and error paths. Bind a CircularProgressIndicator's visibility to isLoading. For error handling, in the API Call action's error path, add a Show Snackbar action with the message API request failed — please try again. If you see consistent 403 errors in the error path, the API key is wrong; if you see 500 errors, check your Python server logs in the Render dashboard.