1 year ago

#340127

test-img

Martin

Flutter NestedScrollView TabBar and PagedListView always scrolls the SliverAppBar

I'm trying to use a NestedScrollView with a TabBar on the SliverAppBar and the TabBarView on the body, and inside the TabBarViews pages put a PagedListView.

Is it possible when my PagesListViews has no items or only a few (not enough for scrolling), not to scroll the floating SliverAppBar??

I think this happens because the TabBarView is taking all the height, is it possible no avoid this behavior?

    class TestPage extends StatefulWidget {
      @override
      State<StatefulWidget> createState() => _TestScreenState();
    }
    
    class _TestScreenState extends State<TestPage>
        with TickerProviderStateMixin {
      late TabController tabController;
      final PagingController<int, String> pagingController =
          PagingController(firstPageKey: 0);
      final PagingController<int, String> pagingController2 =
          PagingController(firstPageKey: 0);
      @override
      void initState() {
        tabController = TabController(length: 2, vsync: this, initialIndex: 0);
        pagingController.addPageRequestListener((pageKey) {
          if (pageKey < 2) {
            pagingController.appendPage(
                List.generate(10, (index) => 'page1 $index'), pageKey + 1);
          } else {
            pagingController
                .appendLastPage(List.generate(10, (index) => 'page1 $index'));
          }
        });
    
        pagingController2
            .addPageRequestListener((pageKey) => pagingController2.appendLastPage(
                  List.generate(3, (index) => 'page1 $index'),
                ));
        super.initState();
      }
    
      @override
      Widget build(BuildContext context) {
        return NestedScrollView(
          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverAppBar(
                expandedHeight: 200,
                collapsedHeight: 200,
                pinned: false,
                floating: true,
                bottom: TabBar(
                    controller: tabController,
                    tabs: List.generate(
                        2,
                        (index) => Tab(
                              text: 'tab $index',
                            ))),
              )
            ];
          },
          body: TabBarView(
            controller: tabController,
            children: [
              PagedListView<int, String>(
                shrinkWrap: true,
                pagingController: pagingController,
                padding: EdgeInsets.only(
                    top: 10,
                    bottom: kBottomNavigationBarHeight +
                        MediaQuery.of(context).padding.bottom),
                builderDelegate: PagedChildBuilderDelegate<String>(
                    itemBuilder: (context, item, index) {
                      return ListTile(title: Text(item));
                    },
                    noItemsFoundIndicatorBuilder: (_) => const Text('no items')),
              ),
              PagedListView<int, String>(
                shrinkWrap: true,
                pagingController: pagingController2,
                padding: EdgeInsets.only(
                    top: 10,
                    bottom: kBottomNavigationBarHeight +
                        MediaQuery.of(context).padding.bottom),
                builderDelegate: PagedChildBuilderDelegate<String>(
                    itemBuilder: (context, item, index) {
                      return ListTile(title: Text(item));
                    },
                    noItemsFoundIndicatorBuilder: (_) => const Text('no items')),
              ),
            ],
          ),
        );
      }
    }

flutter

infinite-scroll

tabbar

nestedscrollview

sliverappbar

0 Answers

Your Answer

Accepted video resources