Why is SliverFillRemaining expanding too much?

Question

I'm trying to make a SliverAppBar that reacts to its height, showing different things depending if it's expanded or not.

I've based it on https://medium.com/flutter-community/flutter-sliverappbar-snap-those-headers-544e097248c0, but I'm having an issue:

The empty space at the end of the list is way too long.

Removing SliverFillRemaining is not necessary if the number of items is high, but changing the numberOfItems to e.g. 3 items (instead of 30), the SliverFillRemaining is necessary.

Check out this dartpad for the code: https://dartpad.dev/2c434ddf2d4d1e87bd4b421f0a673c2d

      CustomScrollView(
        physics: AlwaysScrollableScrollPhysics(),
        controller: _controller,
        slivers: [
          SliverAppBar(
            pinned: true,
            backgroundColor: Colors.grey[100],
            stretch: true,
            automaticallyImplyLeading: false,
            flexibleSpace: Header(
              maxHeight: maxHeight,
              minHeight: minHeight,
            ),
            collapsedHeight: minimizedHeight,
            expandedHeight: maxHeight - MediaQuery.of(context).padding.top,
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) {
                return _buildCard(index);
              },
              childCount: numberOfItems,
            ),
          ),
          SliverFillRemaining(
              hasScrollBody: true), // ** <-- this will add space, but too much **
        ],
      ),

Solution 1

if you are just adding a certain height of space, i suggest you use SliverToBoxAdapter:

SliverToBoxAdapter(
  child: SizedBox(
    height: 50,
  ),
),

Solution 2

make the hasScrollBody value to be false like this:

     SliverFillRemaining(
        hasScrollBody: false
     ),

Comments

[proformance]

Thanks, I ended up using this solution since I couldn't get it working with SliverFillRemaining