You can add a key to each ListView of item, and then traverse the collection of key to know which is displayed.

Could you please add a code snippet how to find the only visible items? Thank you for your response. I appreciate it.

Any update on this? How to get only items displayed on the screen?

I hope they provide a code of it

My solution here: Visible Items of ListView Demo
need add a dependency first: RectGetter

The work for #10595 might provide a solution for this issue as well.

are there news about this point? For example I want to change TextStyle of the first visible item and apply the actions of a FloatingActionBottom over that element

Probably also related is #12319 scrolltoIndex(idx)

@debuggerx01 RectGetter solution has bad performance and is a bit buggy ( if you wrap a TextField inside it, keyboard will disappear automatic and some more bugs ).

#21764

Is there any update in this issue or any work around?

Following example is used inside our app, you can use the pseudo code to get your visible widget state in any position. I assume we wanna get the position of the first row.

just wrap your children with MetaData

MetaData(
    // [this] can be a custom class, so you can locate it using the class type
    // assume this is a statefull class named DefaultRow and its state called DefaultRowState
    metaData: this,
    behavior: HitTestBehavior.translucent,
    child: row//a row inside the ListView
)

so the widget in the concept will become

ListView(
  children: [
    MetaData(),
    MetaData(),
    MetaData(),
    MetaData(),
    MetaData()
  ]
)

when we need to fetch the first visible row inside the viewport of ListView, just call as following:

final box = listViewState?.context?.findRenderObject() as RenderBox;
if (box != null) {
  // adjust it according to your list padding, 
  // e.g. you have 20's points for your top padding, 
  // just send Offset(0, 20) into [localToGlobal] or maybe 25 just in case of any other border.
  final offset = box.localToGlobal(Offset(0, 0));

  final targetState = getTargetState<DefaultRowState>(offset);
  print('offset: $offset, name: $targetState');
}

T getTargetState<T>(Offset globalPosition) {
  final HitTestResult result = new HitTestResult();
  WidgetsBinding.instance.hitTest(result, globalPosition);
  // Look for the RenderBoxes that corresponds to the hit target (the hit target
  // widgets build RenderMetaData boxes for us for this purpose).
  for (HitTestEntry entry in result.path) {
    if (entry.target is RenderMetaData) {
      final renderMetaData = entry.target as RenderMetaData;
      if (renderMetaData.metaData is T)
        return renderMetaData.metaData as T;
    }
  }

  return null;
}

@jerrywell Thanks ! It works!

And some additional info: If you running getTargetState on some callback, it must wrap with Future.microtask ( I don't know why, can somebody tell me?)

class _VideoListState extends State<VideoList> {

  @override
  void initState() {
    super.initState();
  }

  ListView _listView;
  @override
  Widget build(BuildContext context) {
    _listView = ListView.builder(
      itemBuilder: (context,index) {
        var item = widget.list[index];
        return _getChild(item,);
      },
      itemCount: widget.list.length,
    );

    var notificationListener = NotificationListener(
      onNotification: (noti){
        if (noti is ScrollStartNotification) {
          // stop playing
        }else if(noti is ScrollEndNotification){
          // resume playing
          print("end");
          Future.microtask((){
            VideoInfo info = getMeta(0, 10);
            print("scrolling to ${info.title}");
          });
        }
      },
      child: _listView,
    );

    return notificationListener;
  }


  T getMeta<T>(double x,double y){
    var renderBox = context.findRenderObject() as RenderBox;
    var offset = renderBox.localToGlobal(Offset(x,y));

    HitTestResult result = HitTestResult();
    WidgetsBinding.instance.hitTest(result, offset);

    for(var i in result.path){
      if(i.target is RenderMetaData){
        var d = i.target as RenderMetaData;
        if(d.metaData is T) {
          return d.metaData as T;
        }
      }
    }
    return null;
  }


  Widget _getChild(VideoInfo info){
    return MetaData(
      metaData: info,
      child: VideoCard(info:info),
    );
  }
}

class VideoCard extends StatefulWidget{

  final VideoInfo info;

  const VideoCard({Key key, this.info}) : super(key: key);

  @override
  VideoCardState createState() => VideoCardState();
}

class VideoCardState extends State<VideoCard> {
  @override
  Widget build(BuildContext context) {
    return Container(child: Text("hello world ${widget.info.title}"));
  }
}


//-------------data---------------

class VideoInfo {
  final String title;
  VideoInfo(this.title);
}

Try adding a ScrollController to the list, then add a listener to it as shown below.

class _NumberListState extends State<NumberList> {
  ScrollController scrollController;

  // use this one if the listItem's height is known
  // or width in case of a horizontal list
  void scrollListenerWithItemHeight() {
    int itemHeight = 60; // including padding above and below the list item
    double scrollOffset = scrollController.offset;
    int firstVisibleItemIndex = scrollOffset < itemHeight
        ? 0
        : ((scrollOffset - itemHeight) / itemHeight).ceil();
    print(firstVisibleItemIndex);
  }

  // use this if total item count is known
  void scrollListenerWithItemCount() {
    int itemCount = 100;
    double scrollOffset = scrollController.position.pixels;
    double viewportHeight = scrollController.position.viewportDimension;
    double scrollRange = scrollController.position.maxScrollExtent -
        scrollController.position.minScrollExtent;
    int firstVisibleItemIndex =
        (scrollOffset / (scrollRange + viewportHeight) * itemCount).floor();
    print(firstVisibleItemIndex);
  }

  @override
  void initState() {
    super.initState();
    scrollController = ScrollController();
    scrollController.addListener(scrollListenerWithItemHeight);
  }

  @override
  void dispose() {
    super.dispose();
    scrollController.removeListener(scrollListenerWithItemHeight);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.blueGrey[200],
        appBar: AppBar(
          backgroundColor: Colors.blueGrey[500],
        ),
        body: ListView.builder(
            itemCount: 100,
            controller: scrollController,
            itemBuilder: (context, index) {
              return Padding(
                padding: const EdgeInsets.all(5.0),
                child: Container(
                    height: 50,
                    decoration: BoxDecoration(
                      color: Colors.white,
                    ),
                    child: Center(child: Text('$index'))),
              );
            }));
  }
}

Try adding a ScrollController to the list, then add a listener to it as shown below.

class _NumberListState extends State<NumberList> {
  ScrollController scrollController;

  // use this one if the listItem's height is known
  // or width in case of a horizontal list
  void scrollListenerWithItemHeight() {
    int itemHeight = 60; // including padding above and below the list item
    double scrollOffset = scrollController.offset;
    int firstVisibleItemIndex = scrollOffset < itemHeight
        ? 0
        : ((scrollOffset - itemHeight) / itemHeight).ceil();
    print(firstVisibleItemIndex);
  }

  // use this if total item count is known
  void scrollListenerWithItemCount() {
    int itemCount = 100;
    double scrollOffset = scrollController.position.pixels;
    double viewportHeight = scrollController.position.viewportDimension;
    double scrollRange = scrollController.position.maxScrollExtent -
        scrollController.position.minScrollExtent;
    int firstVisibleItemIndex =
        (scrollOffset / (scrollRange + viewportHeight) * itemCount).floor();
    print(firstVisibleItemIndex);
  }

  @override
  void initState() {
    super.initState();
    scrollController = ScrollController();
    scrollController.addListener(scrollListenerWithItemHeight);
  }

  @override
  void dispose() {
    super.dispose();
    scrollController.removeListener(scrollListenerWithItemHeight);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.blueGrey[200],
        appBar: AppBar(
          backgroundColor: Colors.blueGrey[500],
        ),
        body: ListView.builder(
            itemCount: 100,
            controller: scrollController,
            itemBuilder: (context, index) {
              return Padding(
                padding: const EdgeInsets.all(5.0),
                child: Container(
                    height: 50,
                    decoration: BoxDecoration(
                      color: Colors.white,
                    ),
                    child: Center(child: Text('$index'))),
              );
            }));
  }
}

this way is limit to the item height is be known, for flexible height, this is not work.

SOLUTION IS HERE!!! TAKE IT! https://github.com/google/flutter.widgets

I have searched a lot for something similar in Flutter, like a list that would tell you where is which element, if it is visible etc., but I've only found a few results.
One of them is the above library.
I would personally say that it is not production ready. You are given these features, but you have your flexibility taken. I tried to use the library within a CustomScrollView, but it is one itself. I'm not a Flutter expert by any means, but how do you integrate a CustomScrollView inside a CustomScrollView?

https://pub.dev/packages/inview_notifier_list. Has anyone tried this package? It builds a ListView and notifies when the widgets are visible on the viewport.

I made a library: https://pub.dev/packages/widgets_visibility_provider
It can be used in customScrollVIew, ListView and other places that contain scrollview

It is very simple and flexible to use

Try adding a ScrollController to the list, then add a listener to it as shown below.

class _NumberListState extends State<NumberList> {
  ScrollController scrollController;

  // use this one if the listItem's height is known
  // or width in case of a horizontal list
  void scrollListenerWithItemHeight() {
    int itemHeight = 60; // including padding above and below the list item
    double scrollOffset = scrollController.offset;
    int firstVisibleItemIndex = scrollOffset < itemHeight
        ? 0
        : ((scrollOffset - itemHeight) / itemHeight).ceil();
    print(firstVisibleItemIndex);
  }

  // use this if total item count is known
  void scrollListenerWithItemCount() {
    int itemCount = 100;
    double scrollOffset = scrollController.position.pixels;
    double viewportHeight = scrollController.position.viewportDimension;
    double scrollRange = scrollController.position.maxScrollExtent -
        scrollController.position.minScrollExtent;
    int firstVisibleItemIndex =
        (scrollOffset / (scrollRange + viewportHeight) * itemCount).floor();
    print(firstVisibleItemIndex);
  }

  @override
  void initState() {
    super.initState();
    scrollController = ScrollController();
    scrollController.addListener(scrollListenerWithItemHeight);
  }

  @override
  void dispose() {
    super.dispose();
    scrollController.removeListener(scrollListenerWithItemHeight);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.blueGrey[200],
        appBar: AppBar(
          backgroundColor: Colors.blueGrey[500],
        ),
        body: ListView.builder(
            itemCount: 100,
            controller: scrollController,
            itemBuilder: (context, index) {
              return Padding(
                padding: const EdgeInsets.all(5.0),
                child: Container(
                    height: 50,
                    decoration: BoxDecoration(
                      color: Colors.white,
                    ),
                    child: Center(child: Text('$index'))),
              );
            }));
  }
}

@scofieldpeng - Here, we are able to get firstVisibleItemIndex.

But can you please help me out with getting lastVisibleItemIndex ? Help will be appreciated.

My solution here: Visible Items of ListView Demo
need add a dependency first: RectGetter

Your answer save my time, thanks.
BUT, your code works only with positive indexes (ex.: 0 -> 999...)
If you need to work with negative indexes (ex.: -1 -> -999...) you need to change getVisible() function as shown below:

List<int> getVisible() {
    var rect = RectGetter.getRectFromKey(listViewKey);
    var _items = <int>[];
    _keys.forEach((index, key) {
      var itemRect = RectGetter.getRectFromKey(key);
      if (itemRect != null && !(itemRect.top > rect.bottom || itemRect.bottom < rect.top)) _items.add(index);
    });

    /// Add this line, to sort negative indexes
    _items.sort();

    return _items;
  }

My solution here: Visible Items of ListView Demo
need add a dependency first: RectGetter

U SAVED MY LIFE !!!!!!! THANK YOU !

My solution here: Visible Items of ListView Demo
need add a dependency first: RectGetter

thanks, solved my problem!

Any update on this?