0

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.

enter image description here

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();
    }
  }
scott lee
  • 288
  • 2
  • 12
  • 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

1 Answers1

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);
                }),
griffins
  • 5,390
  • 3
  • 23
  • 46
  • 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