So I'm trying to make bidirectional scroll with sticky headers in each SliverItem.
I made scroll that infinite in both directions with https://github.com/fluttercommunity/flutter_sticky_headers as items.
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title),),
body: Scrollable(
controller: _controller,
viewportBuilder: (BuildContext context, ViewportOffset offset) {
return Viewport(
offset: offset,
center: positiveListKey,
slivers: [
_negativeListView,
_positiveListView,
]);
},
),
);
}
SliverList get _positiveListView => SliverList(
key: positiveListKey,
delegate: SliverChildBuilderDelegate((context, index) {
return StickyHeader(
header: new Container(
height: 50.0,
color: Colors.blueGrey[700],
padding: new EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: new Text('Header #$index',
style: const TextStyle(color: Colors.white),
),
),
content: new Container(
height: 300,
child: Text("Context #${index.toString()}"),
),
);
}),
);
SliverList get _negativeListView => SliverList(
delegate: SliverChildBuilderDelegate((context, i) {
int index = (i + 1) * -1;
return Container(
child: StickyHeader(
header: new Container(
height: 50.0,
color: Colors.blueGrey[700],
padding: new EdgeInsets.symmetric(horizontal: 16.0),
alignment: Alignment.centerLeft,
child: new Text('Header #$index',
style: const TextStyle(color: Colors.white),
),
),
content: new Container(
height: 300,
child: Text("Context #${index.toString()}"),
),
),
);
}),
);
Here is some screencast - https://i.ibb.co/ZLJvwsG/sticky-jump.gif
Problem is that when both SliverLists visible in Viewport, sticky header start to jumping. StickyHeader package is quite straightforward - it just updates position of header el (with markNeedsLayout as listener), when scroll position changes.
Here is position calculation - https://github.com/fluttercommunity/flutter_sticky_headers/blob/master/lib/sticky_headers/render.dart#L94
Here is event bind https://github.com/fluttercommunity/flutter_sticky_headers/blob/master/lib/sticky_headers/render.dart#L79
_scrollable there is defined with Scrollable.of(context);
It looks like or scroll event fire with some delay, or Viewport repaints, that creates this type of effect.
Need some help or with solution or with explanation - why it happens?
Really, I will be enough with just explanation of the reason) I want to understand why this happens in the first place. Since with understanding I will be able to provide solution that works)
Update
Ok, so after some time I found what original issue was. In order to make scroll list as I need I made own package to solve this problem)
https://github.com/TatsuUkraine/flutter_sticky_infinite_list
I changed the way how most of such packages binds on scroll event and how it calculates position for the sticky item, so it doesn't have an issue described in the original question
Feel free to use and suggest)