quire-io / scroll-to-index

scroll to index with fixed/variable row height inside Flutter scrollable widget
MIT License
519 stars 106 forks source link

Support in NestedScrollView + TabbarView(ListView,GridView) #112

Open kimwest00 opened 7 months ago

kimwest00 commented 7 months ago

Hi! I'm going to develop feature that [when user click gridview item, then

  1. change gridview ->listview widget
  2. scroll to gridview item's index on Listview (e.g. instagram poster interaction)

So, I want to work with this library but I use NestedScrollView with body : TabbarView,(not CustomScrollView) and this library doesn't work

I attach code below

//in controller
AutoScrollController scrollController = AutoScrollController(
    axis: Axis.vertical,
    suggestedRowHeight: double.infinity,
  );
//in view class
NestedScrollView(
controller: controller.scrollController
headerSliver:(something),
body:TabbarView(children:
[
tab1(),
tab2(),
..
]
)
// in tab1 widget,
ListView.builder(
      controller: controller.scrollController,
      itemCount: list.length + 1,
      itemBuilder: (context, index) {
        return AutoScrollTag(
          key: ValueKey(index),
          index: index,
          controller: controller.scrollController,
          child: (child Widget something)

I register scrollController on NestedScrollView as AutoScrollController type. (At first, I register scrollController individually(on ListView,GridView, NestedScrollView), but scroll interaction either works individually, so I register scrollController only on NestedScrollview)

I also attach a picture of the widget tree to help you understand my case Thank you for read this, and want some help ASAP😭

image

kimwest00 commented 4 months ago

Any updates on this? 🥲@jerrywell

jerrywell commented 4 months ago

Hi @kimwest00

It’s actually two different routes. I’m simply listing the idea here:

  1. Use the grid view without the scroll-to feature.
  2. When you tap on a cell in the grid view, it will trigger a route with a list view.
  3. The first item in this list view will be what you just tapped.
  4. Both the tapped item in the grid view and the list view will use the Hero widget.
  5. For step 3, the list view will use the center key to keep the scroll offset 0, and allowing for more newer content if any.
  6. When you want to swipe back from the list view to the grid view, you can reload the grid view and assign the first item (or whichever position) as the one you just swiped from in the list view.

So this feature actually doesn't need the scroll to feature.