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

score 5 · Accepted Answer · answered May 04 '21 at 02:37

5

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

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

answered May 04 '21 at 02:37

Jim

6,928
1
7
18

1

Thanks, I ended up using this solution since I couldn't get it working with SliverFillRemaining – proformance May 04 '21 at 16:21
`SliverFillRemaining` looks absolutely pointless. It tries to fill the entire screen, I can't see where it can come in handy. With `hasScrollBody: false` it behaves like a regular SliverToBoxAdapter. – Sergey Molchanovsky Apr 10 '23 at 15:35

score 4 · Answer 2 · edited May 19 '22 at 03:22

4

make the hasScrollBody value to be false like this:

     SliverFillRemaining(
        hasScrollBody: false
     ),

edited May 19 '22 at 03:22

MwBakker

498
5
18

answered Nov 17 '21 at 14:16

Arinzehills

1,491
10
14

score 0 · Answer 3 · answered Apr 20 '23 at 07:05

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

score 0 · Answer 4 · answered Jul 10 '23 at 19:52

To avoid your Widget inside your SliverToBoxAdapter from expanding. You can wrap it inside an Align or Center or Column like so :

SliverToBoxAdapter(
                  child: Align(
                    alignment: Alignment.centerLeft,
                    child: YourWidget(),
                  ),
                )

Why is SliverFillRemaining expanding too much?

4 Answers4