[How to use] How to minimise SliverToBoxAdapter below SliverAppBar

[GerritBurgerDev]

Platforms

Android, iOS

Description

When creating the headerSliverBuilder I want to be able to scroll and minimise all SliverToBoxAdapter widgets. This works fine for any SliverToBoxAdapter above the SliverAppBar, however, any below it does not minimise.

My code

                return DefaultTabController(
                  length: profileStore.hideNativePosts ? 3 : 4,
                  child: Scaffold(
                    body: ExtendedNestedScrollView(
                      headerSliverBuilder: (context, innerScrolled) => <Widget>[
                        // This will successfully shrink
                        SliverToBoxAdapter(
                          child: SafeArea(
                            child: Padding(
                              padding: const EdgeInsets.only(top: 0, bottom: 8),
                              child: StandardCircleAvatar(
                                imageUrl: avatar.value ?? '',
                                radius: 30,
                              ),
                            ),
                          ),
                        ),
                        SliverAppBar(
                          backgroundColor:
                          Theme.of(context).scaffoldBackgroundColor,
                          pinned: true,
                          title: Center(
                            child: Padding(
                              padding: userId.value != profileStore.userId
                                  ? const EdgeInsets.only(right: 56.0)
                                  : EdgeInsets.zero,
                              child: Text(
                                name.value ?? '',
                                maxLines: 2,
                                textAlign: TextAlign.center,
                              ),
                            ),
                          ),
                          actions: [
                            if (userId.value == profileStore.userId)
                              IconButton(
                                icon: const Icon(Icons.settings),
                                onPressed: () {
                                  locator<NavigationService>()
                                      .navigateTo('/settings');
                                },
                              )
                          ],
                        ),
                        // This will not shrink
                        SliverToBoxAdapter(
                          child: SafeArea(
                            child: Padding(
                              padding:
                                  const EdgeInsets.only(bottom: 8),
                              child: ProfileHeader(
                                avatar: avatar.value ?? '',
                                name: name.value ?? '',
                                bio: about.value ?? '',
                                location: location.value ?? '',
                                isLoggedInUser:
                                    userId.value == profileStore.userId,
                                followStatus: followStatus.value,
                                userId: userId.value ?? '',
                                postFollowUser: postFollowUser,
                              ),
                            ),
                          ),
                        ),
                      ],
                      pinnedHeaderSliverHeightBuilder: () {
                        return pinnedHeaderHeight;
                      },
                      body: Column(
                        children: [
                          TabBar(
                              controller: tabController,
                              tabAlignment: TabAlignment.start,
                              isScrollable: true,
                              onTap: (_) {
                                globalStore.setScrollToTop(true);
                              },
                              tabs: [
                                if (!profileStore.hideNativePosts)
                                  const Tab(
                                    text: 'Posts',
                                    height: 40.0,
                                  ),
                                const Tab(
                                  text: 'Collections',
                                  height: 40.0,
                                ),
                                Tab(
                                  text:
                                  '${followingCount.value ?? 0} Following',
                                  height: 40.0,
                                ),
                                Tab(
                                  text:
                                  '${followersCount.value ?? 0} Followers',
                                  height: 40.0,
                                ),
                              ],
                              padding: const EdgeInsets.only(
                                left: 8.0,
                              )),
                          Expanded(
                            child: TabBarView(
                              controller: tabController,
                              children: [
                                if (!profileStore.hideNativePosts)
                                  NativePostsPage(
                                    nativePosts: profileStore.nativePosts,
                                    loading: profileStore.loadingNativePosts,
                                    onPostAddToCollection:
                                        (collectionId, postId, blogId, action) {
                                      collectionsPosts.value[collectionId]?.add({
                                        'post_id': postId,
                                        'blog_id': blogId,
                                      });
                                      collectionsPosts.value = {
                                        ...collectionsPosts.value
                                      };
                                    },
                                    hasMoreNativePosts:
                                    profileStore.hasMoreNativePosts,
                                    onLoadMore: () async {
                                      await profileStore.getUserNativePosts(
                                        userId: userId.value,
                                        context: context,
                                        globalStore: globalStore,
                                        setImages: setImages,
                                        forceRefresh: false,
                                      );
                                    },
                                    onRefresh: () async {
                                      await profileStore.getUserNativePosts(
                                        userId: userId.value,
                                        context: context,
                                        globalStore: globalStore,
                                        setImages: setImages,
                                        forceRefresh: true,
                                      );
                                    },
                                    userId: userId.value,
                                    collectionsPosts: collectionsPosts.value,
                                  ),
                                CollectionsPage(
                                  userId: userId.value ?? '',
                                  canEditCollections:
                                  userId.value == profileStore.userId,
                                ),
                                UserFollowingPage(
                                  userId: userId.value ?? '',
                                ),
                                UserFollowersPage(
                                  userId: userId.value ?? '',
                                ),
                              ],
                            ),
                          ),
                        ],
                      )
                    ),
                  ),
                );

Try do it

I know that the built in Flutter NestedScrollView does support this, however, it does not seem to work for this package. Am I missing something simple or is this a missing feature?

Here is an example of it working with natice NestedScrollView:

Screen.Recording.2024-04-18.at.21.55.50.mov

Here is an example of it not working:

Screen.Recording.2024-04-18.at.21.54.19.mov

[zmtzawqlp]

check the value of pinnedHeaderHeight.

[GerritBurgerDev]

Amazing what a stupid mistake to make. Thank you @zmtzawqlp.

Anyone following this, if you only want the AppBar to show and hide the rest do:

                        pinnedHeaderSliverHeightBuilder: () {
                          return kToolbarHeight; // where kToolbarHeight is a constant of 56 (change as needed)
                        },