How do I use async/HTTP data to return child widgets in an IndexedWidgetBuilder?

Question

I'm obtaining JSON data over HTTP and displaying it in a ListView. Since it's HTTP, it's all async. Here's what I'd like to do: ``` var index = new ListView.builder( controller: _scrollController, itemBuilder: (ctx, i) async { _log.fine("loading post $i"); var p = await _posts[i]; return p == null ? new PostPreview(p) : null; }, ); ``` Unfortunately, this doesn't work since IndexedWidgetBuilder has to be a synchronous function. How do I use a Future to build a child for an IndexedWidgetBuilder? It doesn't seem like there's a way to wait for the future to complete synchronously. Previously, I was loading the data into an array and the IndexedWidgetBuilder function only checked to see if the list elements existed before returning the child widget. ``` var index = new ListView.builder( controller: _scrollController, itemBuilder: (ctx, i) { _log.fine("loading post $i"); return _posts.length > i ? new PostPreview(_posts[i]) : null; }, ); ``` This works, but I would like to completely separ…

Accepted Answer

You can wait for asynchronous computations using a `FutureBuilder`. I'd probably change your `PostPreview` to take a `Future` as a constructor argument and put the `FutureBuilder` there, but if you want to leave `PostPreview` as-is, here's how to modify your `itemBuilder`.

```
var index = new ListView.builder(
  controller: _scrollController,
  itemBuilder: (ctx, i) {
    return new FutureBuilder(
      future: _posts[i],
      builder: (context, snapshot) {
        return snapshot.connectionState == ConnectionState.done
               ? new PostPreview(snapshot.data)
               : new Container(); // maybe a show placeholder widget?
    );
  },
);
```

The nice thing about `FutureBuilder` is that it takes care of the scenarios where the async request completes and your State has already been disposed.

How do I use async/HTTP data to return child widgets in an IndexedWidgetBuilder?

Solution

Problem

Related problems