ScrollablePositionedList: Use ScrollablePositionedList inside a CustomScrollVIew

[andreyeurope]

It would be awesome to be able to use ScrollablePositionedList inside a CustomScrollView.
I am currently working on a MVP that uses Slivers for reading some content, and by using ScrollablePositionedList with another library, I would be able to save the position inside the content when the user has left the page on any device.

[tarobins]

Doing something as general as what you request is going to be difficult. If you can tell me more, even in a email robinsontom at google, I might be able to suggest something.

Sorry for the delay.

[andreyeurope]

Thanks for answering, Tom. I would like to keep the conversation here, as it might help other people as well.
So I am working on a feature (no deadline) which will allow the users of my future app to save the location of an article (an article being in fact an HTML document parsed as a list of widgets) without knowing the size of the device and keep that location in sync on all devices own by the user (via Firestore).
This is the main reason why I would like to know the index of the first visible element of the list.

[tarobins]

Do you need to have the list appearing alongside other slivers within the CustomScrollView? If not, then I think CustomScrollView will already do what you want.

There's an example here

flutter.widgets/example/scrollable_positioned_list/lib/scrollable_positioned_list_example.dart

Line 120 in 6779a65

// Determine the first visible item by finding the item with the

that figures out what the first visible item in a list is.

If you have a list plus other types of slivers in a CustomScrollView, ScrollablePositionedList does not handle that case and doing so will be a bunch more work, the scale of which I'm not certain of at the moment.

If this isn't making sense, or I'm misunderstanding what you are looking for, some sample code of what you're trying to do might help.

[andreyeurope]

You are right indeed. I need the list to appear alongside other slivers.
For now, I only have a SliverAppBar and the SliverList, but in the future there will be other slivers as well.

The problem is that I tried thinking of different approaches, but all entail having some mechanism that tells me what index does the topmost visible element have and another mechanism for scrolling (or initializing the controller) to a specific index.

[tarobins]

So, I doubt I'll get ScrollablePositionedList to work within a CustomScrollView. I think supporting a SliverAppBar (or a similar custom widget) at the top of a ScrollablePositionedList might be doable. Are there other use cases you've come across so far; other types of slivers you want to use along side the ScrollablePositionedList?

[andreyeurope]

No, not in my case at least. The UI is basically a navigation bar and a list of widgets, which are the SliverChildDelegate and SliverAppBar widgets.
It would be nice to still be able to choose the behavior of the app bar, like floating, pinned and snap,

[psyanite]

I totally need this. I'm currently putting a ScrollablePositionedList inside a Column, not sure if I can do ListView.

I also want to do ScrollablePositionedList inside a ScrollablePositionedList.

[tarobins]

Does a ListView inside a ListView work?

[psyanite]

I think NestedListView inside a ListView could work. I ended up using my original structure which was CustomScrollView with SliverList with ListView and then something like.

because I couldn't get Scrollable.ensureVisible to work correctly I don't know why 😭

Page Widget, where _scrollie is my ScrollController

void scrollToOffset(double offset) {
    var y = offset + _scrollie.position.pixels;
    _scrollie.animateTo(
      y,
      duration: Duration(milliseconds: 250),
      curve: Curves.ease,
    );
}

Card Widget

RenderBox box = context.findRenderObject(); 
var position = box.globalToLocal(Offset.zero); // Gives you the position of the card relative to the current scroll position
scrollToOffset(position.dy);

[Ahmadre]

Hi @tarobins,

I need this feature in production. Now I am scrolling the old fashioned way: CustomScrollView with pixel jumping. Not really helpfull. And we have to use CustomScrollView because we need the parallax effect inside the flexibeBar of SliverAppBar + a simple SliverList. When we have now for example an: SliverPositionedList. It would be awesome 💪🏼. Then you would just pass inside SliverPositionedList the itemScrollController and we would break up the work into just one simple Sliver Component :)

Hope this will come one day ❤️

Thx.