Pixabay API

Open pixabay.com in your browser and click Join for Free in the top right corner. Complete the free registration with your email address and confirm your account via the verification email. Once logged in, navigate to pixabay.com/api/docs — this is Pixabay's API documentation page and it also displays your personal API key in a green box near the top of the page once you are authenticated. The key is a short string of letters and numbers, typically around 30 characters. Copy this key now. You will use it as a query parameter in FlutterFlow — it is not an OAuth secret in the sense that it grants server-side access beyond your rate quota, but it is tied to your Pixabay account and your per-minute request limit. Treat it as semi-sensitive: do not commit it to a public GitHub repository, and for a production app consider routing requests through a simple backend proxy so the key is not visible in network traffic from client devices. For a prototype or internal tool, using the key directly in FlutterFlow as a query variable is acceptable to get started quickly.

In FlutterFlow, click API Calls in the left navigation bar, then click + Add → Create API Group. Name the group Pixabay API and set the Base URL to https://pixabay.com/api. Do not add any authentication headers — Pixabay uses query parameters only. Inside the group, click + Add API Call. Name it searchImages, set the method to GET, and leave the endpoint path blank (the group's base URL is the full endpoint). In the Query Parameters section, click + Add Parameter for each of the following: - key: set value to your API key string. This is a constant — you can hard-code it here since it is a query parameter, not a header secret, and Pixabay's free tier has no sensitive write access. - q: set as a variable named searchQuery (String). This receives the user's search input. - image_type: set as a variable named imageType (String) with a default value of 'all'. - per_page: set as a constant of 50 (the maximum per page on the free tier is 200, but 50 is a good balance for grid performance). - lang: optionally add as a variable named lang (String) defaulting to 'en'. Click Save, then open the Response & Test tab. In the Test API Call section, enter a test value for searchQuery such as 'mountain' and click Test. Paste the returned JSON response into the Sample JSON field and click Generate JSON Paths. FlutterFlow will auto-create paths including $.hits[0].webformatURL, $.hits[0].largeImageURL, $.hits[0].tags, and $.totalHits.

1// Pixabay API Call config reference
2{
3  "method": "GET",
4  "base_url": "https://pixabay.com/api",
5  "query_params": {
6    "key": "YOUR_API_KEY",
7    "q": "{{searchQuery}}",
8    "image_type": "{{imageType}}",
9    "per_page": "50",
10    "lang": "en"
11  }
12}
13// Key JSON paths from response:
14// $.totalHits           → total result count
15// $.hits[0].id          → image ID
16// $.hits[0].webformatURL → preview image URL (max 1280px)
17// $.hits[0].largeImageURL → full size URL (also max 1280px free tier)
18// $.hits[0].tags         → comma-separated tag string
19// $.hits[0].user         → uploader username

Create a new screen named ImageSearch in FlutterFlow. Add the following widgets from the top of the screen down: a TextField widget for the search query, a Text widget showing the result count (e.g. '24 images found'), and a GridView widget with 2 columns for the image results. For the TextField: set its label to 'Search free images...' and add an onChanged action. In the Action Flow Editor, add a Wait action with 600 milliseconds before the API Call action. This creates the debounce: only after the user pauses typing for 0.6 seconds does the app call Pixabay. This single step keeps you well inside the 100-requests-per-minute limit. After the Wait, add a Backend/API Call action: select Pixabay API → searchImages. Set the searchQuery variable to the TextField's current value. Map the response to a page-level variable named pixabayResults of type JSON (or use a FlutterFlow Data Type you define for images). Also map $.totalHits to a separate Integer page variable named resultCount. In the GridView: set its data source to the pixabayResults hits array. Inside the grid item widget, place an Image widget and bind its network URL to $.hits[i].webformatURL. Add a Tags Text widget bound to $.hits[i].tags below the image. Set a fixed height for each grid cell (e.g. 150px) so the grid renders at consistent size regardless of image aspect ratio. Add a loading shimmer or CircularProgressIndicator visible while the API Call is in progress.

To let users pick an image and use it elsewhere in the app, add a tap action to each GridView item. In the Action Flow Editor for the grid item's tap gesture: add a Set Variable action that stores the tapped image's webformatURL in a page-level variable named selectedImageUrl. Then, depending on your use-case, either navigate to another screen passing the URL as a parameter, or call a Firestore/Supabase write action to persist the selection. For a Firestore save: add a Firestore Action → Update Document or Create Document, writing the selectedImageUrl to the appropriate field in the user's document. For a Supabase save: add a Backend/API Call action pointing to your Supabase REST endpoint for the relevant table, passing the image URL in the request body. An important Pixabay terms-of-service note: Pixabay's API terms require that applications do not hotlink image URLs indefinitely in a way that circumvents their serving infrastructure. For images users actively select and want to keep, the best practice is to download the image bytes and re-upload them to your own storage (Supabase Storage, Firebase Storage, or Cloudinary) rather than saving only the Pixabay URL. Pixabay URLs can expire or change, and hotlinking at scale may violate their terms. For a prototype or low-traffic app, saving the URL directly is fine to get started — just plan the migration to your own storage before launch.

Even with debounce, rapid or concurrent users can exceed the 100-requests-per-minute free-tier cap. In the Action Flow Editor for the searchImages API Call, add an error branch: when the HTTP status code is 429, show a SnackBar with the message 'Too many image requests — please try again in a moment' and set a Boolean page variable isRateLimited to true. Bind the TextField's enabled property to isRateLimited = false so the field is temporarily disabled. Use a Timer action to set isRateLimited back to false after 5 seconds. For a production app with multiple concurrent users, consider deploying a simple Firebase Cloud Function or Supabase Edge Function that proxies Pixabay requests using the API key stored in server environment variables. This centralizes rate limiting and hides the key from client network traffic. The proxy is optional for a Pixabay integration (unlike Getty or Adobe where it is mandatory for security), but it is good practice for any public-facing app. Finally, test your search screen on a physical device. Custom debounce timing can behave differently in FlutterFlow's web preview versus a native build — verify that searches fire correctly after the pause and that images load at an acceptable speed on a mobile data connection. The webformatURL previews are typically 100-400KB each, so a 50-image grid can load 5-20MB of images. Consider implementing infinite scroll with per_page=20 rather than loading 50 at once if you target users on slower connections.