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.

Solution

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

Comments

[rickimaru]

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".

[Alexey Subbotin]

The background of the whole app is red. That small red line is a margin between listview and header that should not be there.

[rickimaru]

I can't replicate your issue using the "minimal reproducable code". I'm just using emulator though (Android & iOS).

[Alexey Subbotin]

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]

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]

It is easier to reproduce if you let scrollphysics finish the scroll releasing gesture halfway

[rickimaru]

Maybe it only happens in beta channel. I'm using stable channel, and can't replicate the issue.

[Alexey Subbotin]

This is how it looks to me on latest stable: youtube.com/watch?v=DDxu1NTkaMA&feature=youtu.be

[Alexey Subbotin]

Same on emulator

[Alexey Subbotin]

I noticed that setting heap to 1gb and ram to 8gb+ makes it harder to reproduce it on emulator somehow

[Shriya Pandya]

Do you meant about this transparent section stackoverflow.com/questions/51119795/…. ?