Flutter - How to have a NestedScrollView with a TabBar that can have pull-to-refresh and load-more (pagination, infinite-scroll)?

thoughtassault 0
Viewed 42

I am trying to achieve a NestedScrollView with a pinned and unpinned header on top, multiple tabs, in which each tab can be scrolled to load more items or pulled to refresh the contents of the lists. Actual result: When using the NestedScrollView widget, TabBar lists scroll each other down and up, causing the header to have a "floating" effect even though it was marked as non-floating. Also, since it breaks the NestedScrolLView, I cannot use ScrollController with the TabBar lists, therefore cannot implement load-more functionality.

flutter
1 Answers

I found the answer to my question. According to what I learned by reading and reading on Github, the Flutter framework needs an extensive review of NestedScrollView to fix this known issue. The extended_nested_scroll_view package solves the problem of working with a NestedScrollView and a TabBar.

return ExtendedNestedScrollView(
              onlyOneScrollInBody: true,
              headerSliverBuilder:
                  (BuildContext context, bool innerBoxIsScrolled) {
                // These are the slivers that show up in the "outer" scroll view.
                return <Widget>[
                  SliverToBoxAdapter(
                    child: ProfileHeader(
                      entityId: entityId,
                    ),
                  ),
                  ProfileTabBar(controller: tabController),
                ];
              },
              floatHeaderSlivers: false,
              body: ...); // TabBarView
        });

But if you use this, the inner scrollable views (in the tabs) cannot have their own ScrollControllers, resulting in not being able to implement loading more functionality with ScrollControllers. To overcome this problem, you can use the infinite_scroll_pagination. This package can be used with any architecture, I use it with the bloc pattern. raywenderlich has a nice guide explaining how it works, which you can access on the page of the package. I also tried using the loading_more_list package, but I could not get it to work, let alone work with bloc as well.

You can use the package I recommended with a RefreshIndicator to achieve a pull-to-refresh functionality as recommended on their pub. dev page.

I will not share code right now as it's still a work in progress, but once I am done I will share more snippets.

thoughtassault0
Related