CODEWITHSUNDEEP
flutterflutter-sliverflutter-sliverappbar
proformance
proformance

Reputation: 450

Why is SliverFillRemaining expanding too much?

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 **
        ],
      ),

Upvotes: 3

Views: 6696

Answers (3)

StansAvenger
StansAvenger

Reputation: 101

This Package does exactly what you are expecting, I've been trying for days now,and finally used this, Its works the same way as the SliverToBoxAdapter but extends enough and does not cause over scroll

  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,
        ),
      ),
      SliverFillRemainingBoxAdapter(
          child: // Your content goes here), 
    ],
  ),

Upvotes: 0

Arinzehills
Arinzehills

Reputation: 2329

make the hasScrollBody value to be false like this:

     SliverFillRemaining(
        hasScrollBody: false
     ),

Upvotes: 5

Jim
Jim

Reputation: 7601

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

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

Upvotes: 6

Related Questions