NestedScrollView persistent header sometimes looks awkward

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.

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