NestedScrollView persistent header sometimes looks awkward

Question

Often when scroll is fast enough my app shows a small transparent line between scrolling view and persistent header.

Minimal reproducible code: https://gist.github.com/Moonspeaker/0e8573ff6620a7e00b8f7b04937b51a1

This is how it looks recorded on video: https://www.youtube.com/watch?v=DDxu1NTkaMA&feature=youtu.be

I have no clue how to fix this. The issue seems to be in Align widget with Alginment.bottomCenter. Column with MainAxisAlignment.end works the same way.

Can you circle out the "small transparent line" you're referring to? I can only see a "big white line" and a "small red line below the white line". — rickimaru, Mar 03 '21 at 07:34
The background of the whole app is red. That small red line is a margin between listview and header that should not be there. — Alexey Subbotin, Mar 03 '21 at 07:37
I can't replicate your issue using the "minimal reproducable code". I'm just using emulator though (Android & iOS). — rickimaru, Mar 03 '21 at 08:00
it happens in both release and debug versions on emulator and real device. Scroll up and down fast several times and you'll be seeing this happen — Alexey Subbotin, Mar 03 '21 at 08:02
The screenshot was taken in the app compiled from this gist. Tested on sdk: ">=2.12.0-29.10.beta <3.0.0", latest beta channel flutter. — Alexey Subbotin, Mar 03 '21 at 08:06
It is easier to reproduce if you let scrollphysics finish the scroll releasing gesture halfway — Alexey Subbotin, Mar 03 '21 at 08:13
Maybe it only happens in beta channel. I'm using stable channel, and can't replicate the issue. — rickimaru, Mar 03 '21 at 08:14
This is how it looks to me on latest stable: https://www.youtube.com/watch?v=DDxu1NTkaMA&feature=youtu.be — Alexey Subbotin, Mar 03 '21 at 09:12
I noticed that setting heap to 1gb and ram to 8gb+ makes it harder to reproduce it on emulator somehow — Alexey Subbotin, Mar 03 '21 at 09:15
Do you meant about this transparent section https://stackoverflow.com/questions/51119795/how-to-remove-scroll-glow#:~:text=To%20remove%20this%20effect%2C%20you,ScrollConfiguration%20with%20the%20desired%20ScrollBehavior%20.&text=This%20is%20also%20valid%20if,borders%20of%20the%20scroll%20view. ? — Shriya Pandya, Mar 08 '21 at 06:06

score 1 · Accepted Answer · answered Mar 08 '21 at 21:36

Try wrapping your SliverPersistentHeader with a SliverOverlapAbsorber usually when working with NestedScrollView you will need to wrap the header in this object in order to not encounter rare scrolling artifacts like the red line you described.

I was not able to reproduce the issue with the change stated below. But you could also take a look to SliverOverlapInjector and the NestedScrollView class documentation which has examples using both of these widgets

...
NestedScrollView(
            headerSliverBuilder: (context, scrolling) => [
              SliverOverlapAbsorber(
                handle:
                    NestedScrollView.sliverOverlapAbsorberHandleFor(context),
                sliver: SliverPersistentHeader(
                  delegate: _Delegate(),
                  pinned: true,
                ),
...

NestedScrollView persistent header sometimes looks awkward

1 Answers1