rawg | Async API wrapper for RAWG.io | REST library

FutureBuilder removes boilerplate code. see

Let's say you want to fetch some data from the backend on page launch and show a loader until data comes.

Tasks for ListBuilder:

• Have two state variables, dataFromBackend and isLoadingFlag On

• launch, set isLoadingFlag = true, and based on this, show loader.

• Once data arrives, set data with what you get from backend and set
  isLoadingFlag = false (inside setState obviously)

• We need to have a if-else in widget creation. If isLoadingFlag is true,show the loader else show the data. On failure, show error message.

Tasks for FutureBuilder:

• Give the async task in future of Future Builder
• Based on connectionState, show message (loading, active(streams), done)
• Based on data(snapshot.hasError), show view

Pros of FutureBuilder

• Does not use the two state variables and setState
• Reactive programming (FutureBuilder will take care of updating the view on data arrival)

Example:

This is an array not an object, and needs to change $response :

FutureBuilders work by calling the async function and then immediately calling build. This is why you're seeing null. They will rebuild again once the future returns.

Even though you've marked apiCall as async the builder will not wait for it to finish. What you need to do is check snapshot.hasData which will only be true once the future has completed. When snapshot.hasData is false, you need to return a different widget.

It might also be worth using snapshot.hasError which is a bool representing if an error occurred while completing the async function.

Try this code out

I don't understand why you need two extra arrays since you are mapping price to populate tempArr1, which contain a copy of its items, and tempArr2, which contains a copy of its steamAppIDs.

I think you could just pass the price array as data, and a mapped version as steamAppID:

Your issue is because you started your data out as null. On initial render before the api has a chance to come back your featured array is actual null and you cannot call .map on null. Instead you can either start the data off as an empty array like so

const [featured, setFeatured] = useState([]);

Or you can have a check in your render to make sure its no longer null which will be the case after the api comes back with a response.

I just checked the rawg api endpoint you mentioned, you are setting the wrong value to games.

You are trying to set games with the whole response data, though the game list is in "results" field.

OK, with a bit of digging I came up with this.

Your search parameters should be search= the title you're looking for, and search_exact which should be true.

I think recursive is better in this case