ListView: fetching details with FutureBuilder results in glitchy behavior

Issue

I have a ListView and I am using ListView.builder to lazily populate the list when children get visible.

However, the items also need to render additional content which I want to fetch lazily.

To do that, I am constructing an http-get-future in the child-builder and pass it to a FutureBuilder that renders the additional content as soon as the Future completes.

However, even if I cache the http-get-futures, the whole list feels glitchy since the items are rebuild when they get visible again and the FutureBuilder renders always one waiting-frame without any data (“because there is no way to synchronously check if a Future already completed” — as the Flutter docs say).

What should I change?

Solution

I found a solution:

Instead of directly using a Future in the FutureBuilder, I put a ValueNotifier in the cache that is set inside of the Future‘s then function and a replace the FutureBuilder by a ListenableBuilder.

The ListenableBuilder does not have the issue with the empty frame…

Answered By – user3612643

Answer Checked By – Terry (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.