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:

Why do you wanna know that? If you are going to make a list with 100 itens you should use `ListView.builder` witch you can pass a `itemBuilder`, that will build the 'widget' of a line in your `listView`. So the flutter will manage to you witch line is visible and render it, and clear from memory the invisible ones... — LgFranco, Jul 12 '19 at 18:11
yes i know that as flutter can manage that. i want to use this feature for using another listeners to use that — DolDurma, Jul 12 '19 at 18:13

creativecreatorormaybenot · Answer 1 · 2019-12-23T21:04:10.760

12

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.

edited Dec 23 '19 at 21:04

answered Jul 12 '19 at 19:08

creativecreatorormaybenot

91,704
51
240
358

6

Now there is an easy way to do it, check this answer: https://stackoverflow.com/a/57252652/11246031 – Lukas Schneider Dec 23 '19 at 14:04
@LukasSchneider Thanks for mentioning it! – creativecreatorormaybenot Dec 23 '19 at 21:04
thank u both u guys, also lukas answer seems to be good solution too! – leylekseven Nov 05 '21 at 08:48
does visibilityDetector has some limitations ? i couldn’t understand that from their pub documentation – Rishabh Agrawal Mar 01 '22 at 11:23

score 1 · Answer 2 · answered Nov 08 '21 at 02:59

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,
  )

score 1 · Accepted Answer · answered Dec 05 '21 at 15:07

1

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.

answered Dec 05 '21 at 15:07

Ashkan Sarlak

6,504
6
35
46

There example is not even working... I'm using flutter v2.8 – Besnik Dec 20 '21 at 14:11

Find out which items in a ListView are visible

3 Answers3

TL;DR

Linked