How to scroll listview.builder inside a sliverList in a nestedScrollView and paginate the listview.builder?

Question

When I scroll the ListView.builder in the body of a NestedScrollView, it scrolls independently from the SliverToBoxAdapter and SliverList. This means when I scroll the listview.builder, only the colored part in the photo below moved.

How can I make it such that when I scroll the listview.builder, the whole screen moves together(even the SliverToBoxAdapter and SliverList scroll up together) and pagination can be done for the listview.builder when it reaches the end of the list?

Code for UI

Scaffold(
      body: NestedScrollView(
        headerSliverBuilder: (BuildContext context, bool boxIsScrolled) {
          return <Widget>[
            SliverToBoxAdapter(child: SizedBox(height: 300)),
            SliverList(
              delegate: SliverChildListDelegate(
                [
                  TabBar(
                    indicator: UnderlineTabIndicator(
                      borderSide: BorderSide(width: 1.5,color: Colors.white),
                      // insets: EdgeInsets.symmetric(horizontal:60.0)
                    ),
                    tabs: <Widget>[
                      Icon(
                        CupertinoIcons.rectangle_grid_2x2,
                      ),
                      Icon(
                        CupertinoIcons.doc_plaintext,
                      ),
                    ],
                  ),

                ],
              ),
            )
          ];
        },
        body:
        TabBarView(
          controller: _tabController,
          children: [
            ListView.builder(
                controller: controller,
                shrinkWrap: true,
                itemCount: cardDetail.length,
                itemBuilder: (BuildContext context, int index) {
                  return CardWidget(cardDetail[index], index);
                }),
            ListView.builder(
                controller: differentController,
                shrinkWrap: true,
                itemCount: differentCardDetail.length,
                itemBuilder: (BuildContext context, int index) {
                  return CardWidget(differentCardDetail[index], index);
                }),
          ],
        ),
      ),
    );

Code for pagination


_controller = ScrollController();
_controller.addListener(_scrollListener);

_scrollListener()async {
    if (_controller.offset >= _controller.position.maxScrollExtent &&
        !_controller.position.outOfRange) {
        loadMoreData();
    }
  }

have you tried https://stackoverflow.com/a/56366570/16569443 — Rahul, Apr 12 '22 at 04:29
Thanks for the suggestion, that is quite similar to what I implemented. It's just that I used sliverList and sliverBoxtoAdapter instead of sliverAppBar. — scott lee, Apr 12 '22 at 04:36
@scottlee hello! Did you find solution for this case? Can you please share it with me — Georgiy Chebotarev, Apr 26 '23 at 08:57

score 0 · Answer 1 · answered Apr 12 '22 at 04:22

0

Given that NestedscrollView is your parent widget and scrollable, you can disable scroll physics of your listview and use NestedScrollView physics.

ListView.builder(
                 physics:NeverScrollablePhysics(),
                //controller: differentController,
                shrinkWrap: true,
                itemCount: differentCardDetail.length,
                itemBuilder: (BuildContext context, int index) {
                  return CardWidget(differentCardDetail[index], index);
                }),

answered Apr 12 '22 at 04:22

griffins

7,079
4
29
54

Thanks for the suggestion, but how can I paginate the listview when I take the controller out of the listview? The reason I place the controller in the listview.builder is so that it can detect when the list has reached the end and it will get more data. – scott lee Apr 12 '22 at 04:24
I'm unable to place the controller in the NestedScrollView because there are two lists from two tab bar that requires pagination – scott lee Apr 12 '22 at 04:30

score 0 · Answer 2 · answered Apr 26 '23 at 11:13

I think, I found some solution for this case - we can use notificationListener:

return NotificationListener(
  child: RefreshIndicator(
    onRefresh: () => Future(() => paginationCubit.refreshAllItems()),
    child: resultWidget,
  ),
  onNotification: (notification) {
    if (notification is ScrollUpdateNotification) {
      scrollVisibilityController.updateVisibilityFromNotificationListener(notification);
    } else if (notification is ScrollEndNotification) {
      if (notification.metrics.pixels == notification.metrics.maxScrollExtent) {
        paginationCubit.loadItems(args: getArgumentsForLoading());
        return true;
      }
    }
    return true;
  },
);

Hope it will save time for others. The source: https://reactree.com/pagination-in-nestedscrollview-using-scrollnotification-in-flutter/

Yeah, possible it changes the standard behaviour of saving widget's state by switching between tabs. We can fix it by adding `AutomaticKeepAliveClientMixin` to the states of tab-widgets — Georgiy Chebotarev, Apr 26 '23 at 12:02

How to scroll listview.builder inside a sliverList in a nestedScrollView and paginate the listview.builder?

2 Answers2