The sized box goes with scrolling

Question

This is a modal bottom sheet where I set isScrollControlled to true to take the entire screen's height. The BottomSheet here has a CustomScrollView & everything is fine except when I scroll down, the first sliver is a SizedBox, that has the height of AppBar, gradually disappears with going down. Any Solutions? Here is the code:

CustomScrollView(
                controller: scrollController,
                slivers: [
                  SliverToBoxAdapter(
                    child: SizedBox(
                      height: AppBar().preferredSize.height,
                    ),
                  ),
                  SliverSheetBar(
                    title: tr('invoice_steps.step1.branch.title'),
                    searchHint: tr('invoice_steps.step1.branch.search_hint'),
                    onSearch: (searchTerm) {
                      page = 1;
                      if (searchTerm.isNotEmpty) {
                        this.searchTerm = searchTerm;
                      } else {
                        this.searchTerm = null;
                      }
                      scrollController.moveToTop();
                      controller.add(GetBranches(page, limit, searchTerm));
                    },
                    sheetItemsLength: state is BranchesSuccess
                        ? tr(
                            'invoice_steps.step1.branch.total_number',
                            args: [
                              replaceWithFarsiNumber(
                                context,
                                state.totalNumOfBranches.toString(),
                              ),
                            ],
                          )
                        : null,
                  ),
                  const SliverToBoxAdapter(
                    child: SizedBox(
                      height: 7.0,
                    ),
                  ),
                  SliverToBoxAdapter(
                    child: Builder(
                      builder: (context) {
                        if (state is BranchesSuccess) {
                          noNextPages = state.noNextPages;
                          if (!noNextPages!) {
                            page++;
                          }
                          return state.branches.isNotEmpty
                              ? ListView.builder(
                                  shrinkWrap: true,
                                  itemCount: state.branches.length + 1,
                                  physics: const NeverScrollableScrollPhysics(),
                                  itemBuilder: (context, index) {
                                    return buildItem(state, index);
                                  },
                                )
                              : searchTerm == null
                                  ? EmptyList(
                                      emptyMessage: tr(
                                          'invoice_steps.step1.branch.empty_message'),
                                    )
                                  : NoSearchResults(
                                      message: tr(
                                          'invoice_steps.step1.branch.no_suggestions'),
                                    );
                        } else if (state is BranchesFailure) {
                          return ErrorMessage(
                            errorMessage: state.failureMessage,
                          );
                        }
                        return const RadioListTileShimmer();
                      },
                    ),
                  ),
                ],
              )

Answer 1

You should use the SliverAppBar widget with the pinned attribute set to true instead of using a SizedBox in a SliverToBoxAdapter.

Additionally you can use the flexibleSpaceBar attribute which will allow you to integrate a widget that dynamically expands and retracts depending on the user's scrolling, This will gives a flexible visual space within the app bar.

Here a example:

SliverAppBar(
      pinned: true,  
      expandedHeight: AppBar().preferredSize.height,
      flexibleSpace: FlexibleSpaceBar(
        title: SizedBox(height: AppBar().preferredSize.height), // Maintain the height of an AppBar
      ),
    ),