Allow TabBar to be dragged instead of scrolling the TabBarView when using NestedScrollView

Question

I have this code to make a page which has a TabBar with content above it and a TabBarView below the TabBar. Scrolling the TabBarView causes the TabBar to move up the page from it's initial position until it reaches the top.

However, I want the user to be able to drag the TabBar at any time to move it up and down. Currently, if you try to drag the TabBar, the TabBarView scrolls instead.

Demo:

Here you can see scrolling up the TabBarView normally, and then attempting to drag the TabBar down but the TabBarView scrolling instead: https://imgur.com/a/vUusqyq

Code:

                    NestedScrollView(
                      headerSliverBuilder:
                          (BuildContext context, bool innerBoxIsScrolled) {
                        return <Widget>[
                          SliverToBoxAdapter(
                            child: pageHeaderContent,
                          ),
                          SliverPersistentHeader(
                            pinned: true,
                            delegate: _SliverTabBarDelegate(tabBar),
                          ),
                        ];
                      },
                      body: TabBarView(
                        controller: _tabController,
                        children: [
                          for (var tabItem in tabItems)
                              tabItem.page,
                        ],
                      ),
                    ),

Zhentao · Accepted Answer · 2024-11-25 13:10:24Z

0

using SliverAppBar may achieve what you want

example

          headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
            return <Widget>[
              SliverOverlapAbsorber(
                handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                sliver: SliverAppBar(
                  surfaceTintColor: Colors.white,
                  flexibleSpace: pageHeaderContent,
                  pinned: true,
                  expandedHeight: 150.0,
                  forceElevated: innerBoxIsScrolled,
                  bottom: tabBar,
                ),
              ),
            ];
          },

NestedScrollView document

answered Nov 25, 2024 at 13:10

Zhentao

8343 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Allow TabBar to be dragged instead of scrolling the TabBarView when using NestedScrollView

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related