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