I have a Material Design screen where I use a RefreshIndicator for pull-to-refresh effect. However, I need the RefreshIndicator to appear below the SliverAppBar; due to that, I can't just leave the SliverAppBar inside the list's CustomScrollView and I need to give it a header place in a NestedScrollView.
The problem comes because I can't seem to synchronize the general scroll of the list and the header. The list scrolls fine, but the header does not. I want it to float and snap upon scroll up/down.
class Sample extends StatefulWidget {
@override
_SampleState createState() => _SampleState();
}
class _SampleState extends State<Sample> {
final ScrollController _scrollController = new ScrollController();
@override
Widget build(BuildContext context) {
return Scaffold(
body: NestedScrollView(
headerSliverBuilder: (context, _) => [
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context),
sliver: SliverAppBar(
floating: true,
snap: true,
title: Text('Title'),
),
)
],
body: Builder(
builder: (context) => RefreshIndicator(
onRefresh: () { /* do stuff */ },
child: CustomScrollView(
controller: _scrollController, // needed for an infinite scroll items loading effect
slivers: <Widget>[
SliverOverlapInjector(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(context)
)
// more slivers
],
),
)
),
),
);
}
}
I guess I am missing something regarding the injecting/absorbing of the header sliver overlap.
How can I make the SliverAppBar and the general CustomScrollView scroll synchronously?
