💬
Get Help
V
Vitor

Struggling with Tenor API integration in FlutterFlow (Featured + Search GIFs)

Database & APIs

Hi everyone! I’m very new to FlutterFlow, APIs, and development in general. I’m still learning how things work, so I might be missing something obvious, but I’ve been stuck for hours trying to figure this out.

  • I’m very new to this. I don’t have a lot of practice with APIs or FlutterFlow yet, so maybe I’m missing something simple.

  • I’ve been trying to figure this out for hours and even followed tutorials for different APIs, but I couldn’t make this work properly with Tenor.

What I’m trying to build:
I want to create a simple GIF page in my FlutterFlow app that does the following:

  1. When the page loads, it automatically displays the featured GIFs from the Tenor API.

  2. There is also a search bar, and when the user types something, it should show the GIFs based on the search query.

  3. If the user clears the search bar (makes it empty), the page should go back to showing the featured GIFs.

How I set it up:
I successfully configured both Tenor API endpoints:

  • /v2/featured for popular GIFs.

  • /v2/search for searching GIFs.

  • I added the required parameters: key, limit, contentfilter, and media_filter=nanowebp.

  • I created the JSON Path: $.results[:].media_formats.nanowebp.url

    → This seems to correctly fetch the GIF URLs from the API response.

  • I created a Page State variable (called gifUrls) as a List of String to store the GIF URLs.

  • I added the API call to run “On Page Load” to fetch the featured GIFs.

  • I also set up the search to run when the user types and presses the search button, updating the same variable gifUrls.

    Question about logic (Featured vs. Search):

    • I’m also not fully sure how to handle the switch between Featured GIFs and Search results.

    • Should the Search API overwrite the Featured GIFs in the same list (gifUrls)?

    • Is this the correct logic — using a single list that updates depending on whether the search bar has text or not?

    • Or is it better to have two separate lists, one for Featured and one for Search?

What have you tried so far?

Problems I’m facing:

  • Even though the API call works and the JSON Path returns the correct GIF URLs (I confirmed this in the API Test tab), the GridView does not display anything.

  • The Image widget inside the GridView does not show the URL variable in the binding options. I expected to see something like “gifUrls item” → From GridView, but it doesn't appear.

  • I’ve tried creating the variable as both List<String> and List<Image Path>, but neither solved the issue.

  • When I use a manual image with a fixed URL, it works. But when trying to use the variable from the API, it doesn't show any option to bind it.

  • This happened before when I tried to show images from Firestore, and the only fix was switching from String to Image Path — but this time it doesn’t seem to work.

  • I have no idea if this is a bug, a limitation, or just a mistake in how I’m setting things up.

Did you check FlutterFlow's Documentation for this topic?
No
2