Flutter Nested scrollview taking unwanted space in the bottom

Question

NestedScrollview have a SliverAppbar and sliverToBoxAdapter inside. And In the body, there is a tabbbarView contains a gridview.builder. But its showing more space in the bottom when scrolling. but when the gridview's itemcount increased, then there is no extra space.

Scaffold(
        backgroundColor: Colors.transparent,
        extendBody: true, //
        body: FutureBuilder(
            future: getUserProfileDetails(),
            builder: (context, snapshot) {
              if (snapshot.connectionState == ConnectionState.waiting) {
                return Center(
                  child: CircularProgressIndicator(color: kIndigoColor),
                );
              } else if (snapshot.hasError) {
                return Center(
                  child: Text('Error: ${snapshot.error}'),
                );
              }
              if (!snapshot.hasData || snapshot.data == null) {
                return const Center(
                  child: Text('No data available'),
                );
              }

              var profileRef = snapshot.data['data']['profile'];
              var authRef = snapshot.data['data'];
              UserRegistrationModel userModel =
                  UserRegistrationModel.fromJson(authRef);
              CreateProfileModel createProfileModel =
                  CreateProfileModel.fromJson(profileRef);

              return SafeArea(
                child: NestedScrollView(
                  headerSliverBuilder: (context, innerBoxIsScrolled) => [
                    SliverToBoxAdapter(
                      child: Column(
                        mainAxisSize: MainAxisSize.min,
                        children: [
                          //* <<<<<<<<<<<<<< Profile Top Box >>>>>>>>>>>>>>
                          ProfileTopBoxWidget(
                            profileModel: createProfileModel,
                            userModel: userModel,
                          ),

                          const SizedBox(height: 15),

                          // ---- For following, Followers, Like section ----
                          Row(
                            mainAxisAlignment: MainAxisAlignment.center,
                            children: [
                              followingSingleBox('Following', '10'),
                              verticalDivider(),
                              followingSingleBox('Followers', '20M'),
                              verticalDivider(),
                              followingSingleBox('Like', '50M'),
                            ],
                          ),

                          const SizedBox(height: 20),
                        ],
                      ),
                    ),
                    // :::::::::::::::::::::: TABBAR :::::::::::::::::::::::
                    SliverAppBar(
                      pinned: true,
                      title: TabBar(
                        controller: _tabController,
                        labelColor: primaryColor,
                        unselectedLabelColor: kGreyColor,
                        dividerColor: Colors.transparent,
                        overlayColor:
                            MaterialStatePropertyAll(kGreyColor.shade100),
                        indicatorPadding:
                            EdgeInsets.symmetric(horizontal: width * 0.05),
                        indicatorWeight: 1.2,
                        indicatorColor: primaryColor,
                        indicatorSize: TabBarIndicatorSize.tab,
                        labelStyle: nTextStyle(fontSize: 14),
                        unselectedLabelStyle: nTextStyle(fontSize: 14),
                        labelPadding: const EdgeInsets.only(bottom: 8),
                        tabs: const [
                          Text(' All '),
                          Text(' Photos '),
                          Text(' Videos '),
                        ], // tabs
                      ),
                    ),
                  ],
                  body: TabBarView(
                    controller: _tabController,
                    children: const [
                      PostsViewInProfile(),
                      PostsViewInProfile(),
                      PostsViewInProfile(),
                    ],
                  ),
                ),
              );
            }),
      ),

class PostsViewInProfile extends StatelessWidget {
  const PostsViewInProfile({super.key});

  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      physics: const NeverScrollableScrollPhysics(), //todo
      shrinkWrap: true,
      padding: EdgeInsets.zero,
      itemCount: 9,
      gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        childAspectRatio: 1.0, // controll height here
        mainAxisSpacing: 8,
        crossAxisSpacing: 8,
      ),
      itemBuilder: (context, index) => Stack(
        children: [
          SizedBox(
            height: double.infinity,
            width: double.infinity,
            child: ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child: Image.asset(
                'assets/images/pro-view${index + 1}.jpeg',
                fit: BoxFit.cover,
              ),
            ),
          ),
          index % 2 == 0
              ? Positioned(
                  right: width * 0.015,
                  bottom: width * 0.01,
                  child: SvgPicture.asset('assets/icons/play.svg'),
                )
              : const SizedBox.shrink(),
          // Positioned(
          //   left: width * 0.015,
          //   bottom: width * 0.01,
          //   child: Row(
          //     children: [
          //       Icon(
          //         Icons.visibility_outlined,
          //         color: kGreyColor.shade300,
          //         size: 20,
          //       ),
          //       SizedBox(width: width * 0.01),
          //       Text(
          //         '302K',
          //         style: TextStyle(fontSize: 12, color: kWhiteColor),
          //       ),
          //     ],
          //   ),
          // )
        ],
      ),
    );
  }
}

I changed the padding of gridview in to edgeInsets.Zero. And also I checked with customScrollview. Then the gridview only taking the space as that needed. but main scrollview still have the issue. I also checked with removing the sliverAppBar. not worked.

Answer 1

The unwanted space at the bottom of your Scaffold might be due to the default behavior of the NestedScrollView widget, which can sometimes result in extra space if the content doesn't fully occupy the available space.

Wrap the TabBarView with an Expanded widget:

SafeArea(
              child: IndexedStack(
            index: controller.tabIndex,
            children: [
              RecentChatPage(),
              AllGroupPage(),
              Friends(),
              SettingsPage()
            ],)
          ),

I am using this code in my dashboard and it is working file. you can follow this structure too.