ScrollablePositionedList: observe the ScrollablePositionedList offset about flutter.widgets

[maulik-benzatine]

itemPositionsListener.itemPositions.addListener(() {
      if (itemPositionsListener.itemPositions.value.last.index > (dataList.length - 3)) {
            // do your logic
      }
    });

[phong764119]

Yes please something like this
_controller = ScrollController();
_controller.addListener(_scrollListener);

[GanZhiXiong]

@tarobins
I also need this feature because I want to be able to click a button to go back to the top of the list.
Thank you very much for providing the plug-in and look forward to your reply.

Because I want to realize it as soon as possible, can you provide me with a method?

[tarobins]

If currentMax is the index of the last item currently in the list, I think something like

needToPaginate = itemPositionsListener.itemPositions.value.firstWhere(
        (ItemPosition position) => position.index == currentMax, orElse: () => null)
    ?.itemTrailingEdge <= 1.0 ?? false; 

Haven't tested, not sure if it even compiles, but something like that should work.

[dimityrivanov]

Just attach the ScrollablePositionedList with NotificationListener and calculate the progress -> double progress = notification.metrics.pixels /
notification.metrics.maxScrollExtent;

[tarobins]

@Zazo032

Sorry the docs are wrong and I'll correct them, but I think you should be able to do

itemPositionsListener.itemPositions.addListener((positions) => ...);

let me know if that doesn't work. I'll update the docs and investigate a bit more.

[edit]
ohhhh sorry, my mistake, you'll need to do something like

itemPositionsListener.itemPositions.addListener(() {
   doSomethingWith(itemPositionsListener.itemPositions.value); 
});

I'll update the docs.

[ryosuji]

If currentMax is the index of the last item currently in the list, I think something like

needToPaginate = itemPositionsListener.itemPositions.value.firstWhere(
        (ItemPosition position) => position.index == currentMax, orElse: () => null)
    ?.itemTrailingEdge <= 1.0 ?? false; 

Haven't tested, not sure if it even compiles, but something like that should work.

can you elaborate this @tarobins?
itemTrailingEdge <= is always null
i want to know how to detect whether its reach top or bottom in the list
thanks.

[NaikSoftware]

This works for detecting pixel offset 0.0:

_itemPositionsListener.itemPositions.addListener(() {
      final positions = _itemPositionsListener.itemPositions.value;
      final firstPosition = positions.first;
      final elevated = firstPosition.index != 0 || firstPosition.itemLeadingEdge != 0;
      if (_inputBoxElevated != elevated) {
        setState(() {
          _inputBoxElevated = elevated;
        });
      }
    });

[quango2304]

you can expose the frontScrollController to use it as "_controller"

[tarobins]

Can you explain a bit more of what you're looking for? Do you mean the pixel offset of the scroll?

[Mdlich]

you can expose the frontScrollController to use it as "_controller"

How would you expose it without modifying the package? I am trying to use this widget with a widget from another package that requires the default ScrollController as a parameter. It seems like the ScrollablePositionedList uses a ScrollController internally, I just don't understand why is it not exposed by default..?

[Zazo032]

@tarobins in README.md it says you can see which items are on screen, but that code doesn't work:

itemPositionsListener.positions.addListener((positions) => ...);

The correct code is

itemPositionsListener.positions.itemPositions.addListener(() => ...);

So, you can no longer see the index of the items on screen. Why was that modified/removed? We need to see which index is being shown on screen in order to trigger a listener

[tarobins]

@Clear2 sorry, so an issue with exposing the scroll offset is that there's isn't a consistent scroll offset when you jump around the list. For example, if you jump to item 1000, we don't figure out the offset off 1000, we just create a new list with 1000 at offset 0 and display that list.

I could possibly expose an interface that give a relative offset as scrolls are occurring.

If you still need this, could you explain some more about your use case?

[leavjenn]

@tarobins Hi, I have one use case: for threaded comments lists (like Reddit, Hacker News, etc), I want to add a feature that can collapse comments between a selected one and its parent. After collapsing, it should keep the exact selected comment item's position for a better user experience. So it requires both the position index and offset. Thanks for this great widget.

[tarobins]

@GanZhiXiong

"I also need this feature because I want to be able to click a button to go back to the top of the list."

That should already be doable.

itemScrollController.jumpTo(index: 0);

[marcglasberg]

@tarobins This issue is impossible to solve. As you said, the scroll offset isn't a consistent scroll offset when you jump around the list.

However, yes, it would be useful to expose an interface that gives a relative offset as scrolls are occurring. This is useful, for example, to show some effects like scrollbars, shadows, or collapsing appbars. In fact, I just implemented something like this so that I can show these kinds of effects. What I did is this:

Create a ScrollPosition where:

minScrollExtent is 0

maxScrollExtent is 1000 * itemCount;

pixels:

• Make it the correct pixels value when the first item is in the cache. Because in this situation you can calculate the pixels precisely.
• Make it 1000 * itemCount - pixelsToEnd when the last item is in the cache. Because in this sittuation you can calculate the pixelsToEnd precisely. And calculated like this it will be compatible with maxScrollExtent.
• For all the other situations, make it 1000 * minItem where minItem is the minimum index in the screen at the moment. This will give some good approximation to our current position in relation to maxScrollExtent.

The docs should state that these positions are approximate, and meant only to help with scrollbars, shadows, and collapsing appbars.

[AxesandGrinds]

How do we know when user has scrolled all the way to the top or bottom of screen in order to trigger a function that will load more items hence pagination?

Using itemPositionsListener.itemPositions.value does not seem to provide any information on when index is at zero or end of list.

[AxesandGrinds]

I think I figured it out using

ValueListenableBuilder<Iterable>(
valueListenable: itemPositionsListener.itemPositions,...

the max and min values can be compared to the index of the list displayed

[davidmartos96]

@tarobins This issue is impossible to solve. As you said, the scroll offset isn't a consistent scroll offset when you jump around the list.

However, yes, it would be useful to expose an interface that gives a relative offset as scrolls are occurring. This is useful, for example, to show some effects like scrollbars, shadows, or collapsing appbars. In fact, I just implemented something like this so that I can show these kinds of effects. What I did is this:

Create a ScrollPosition where:

minScrollExtent is 0

maxScrollExtent is 1000 * itemCount;

pixels:

• Make it the correct pixels value when the first item is in the cache. Because in this situation you can calculate the pixels precisely.
• Make it 1000 * itemCount - pixelsToEnd when the last item is in the cache. Because in this sittuation you can calculate the pixelsToEnd precisely. And calculated like this it will be compatible with maxScrollExtent.
• For all the other situations, make it 1000 * minItem where minItem is the minimum index in the screen at the moment. This will give some good approximation to our current position in relation to maxScrollExtent.

The docs should state that these positions are approximate, and meant only to help with scrollbars, shadows, and collapsing appbars.

Do you have a small example with what you did? (Repo / Gist)
Where are you doing the ScrollPosition creation and those calculations?

[jb522185660]

how do you observe the offset now?Any solution????

[Yogesh-Dubey-Ayesavi]

https://pub.dev/packages/scrollable_positioned_list_extended see here

[tarobins]

Added a method for observing scroll offset changes in #472 and #473. Please let me know how this works and if more is needed.