Find out which items in a ListView are visible

Question

How can I find out which items are currently visible or invisible in a ListView?
For example, I have 100 items in ListView and when i scroll to top of screen or list, I want to detect which items appear or disappear from the viewport.

Illustration:

Answer 1

There is no easy way to do this. Here is the same question, however, it does not have an answer.

There is an active GitHub issue about this.

There are multiple solutions for the problem in that issue. This Gist features one that requires the rect_getter package.
Alternatively, you could take a look at this proposal.

TL;DR

This is not yet implemented if you are searching for an easy way to find it out. However, there are solutions, like the ones I mentioned above and from other packages, say VisibilityDetector from flutter_widgets.

Answer 2

You can also use inview_notifier_list. It's basically a normal ListView which defines a visible region and it's children get notified when they are in that region.

Answer 3

There is a package for this purpose.

A VisibilityDetector widget wraps an existing Flutter widget and fires a callback when the widget's visibility changes.

Usage:

VisibilityDetector(
    key: Key('my-widget-key'),
    onVisibilityChanged: (visibilityInfo) {
      var visiblePercentage = visibilityInfo.visibleFraction * 100;
      debugPrint(
          'Widget ${visibilityInfo.key} is ${visiblePercentage}% visible');
    },
    child: someOtherWidget,
  )