Infinite CustomScrollView scrolls back when next portion of items is presented - dart

Question

In my app I'm using CustomScrollView, which should load more data when scroll position reaches the almost-end of scroll view (currently it's position.pixels - 100.0). The mechanism works fine, data loads as I scroll, but depending on connection speed (more precisely, on api response speed) and initial "touch down and pan up" gesture speed this bug appears. Don't know how to correctly explain it, but of the speed of scrolling was large at the moment when app starts and then finishes loading next portion of data the scroll view kind-of scrolls back in opposite direction. It looks like the scroll view "shoots off" or resists. Here's the gif with problem representation:
I've created simulation of what is happening on gif:
import 'dart:async';
import 'package:flutter/cupertino.dart';
class ItemService {
final _itemsController = StreamController<List<String>>();
final _loadNextController = StreamController<bool>();
get items => _itemsController.stream;
get isLoadingNext => _loadNextController.stream;
List<String> _current = [];
loadNext() async {
_loadNextController.add(true);
await Future.delayed(Duration(milliseconds: 500));
_current.addAll(List.generate(10, (idx) => 'Item ${_current.length + idx}'));
_itemsController.add(_current);
_loadNextController.add(false);
}
void dispose() {
_itemsController.close();
_loadNextController.close();
}
}
class ItemsScreen extends StatefulWidget {
#override
_ItemsScreenState createState() => _ItemsScreenState();
}
class _ItemsScreenState extends State<ItemsScreen> {
final _scrollController = ScrollController();
double _prevScrollPos = 0.0;
final _service = ItemService();
_onScroll() {
double maxScroll = _scrollController.position.maxScrollExtent;
double currentScrollPos = _scrollController.position.pixels;
double delta = 100.0;
if (maxScroll - currentScrollPos <= delta && _prevScrollPos - currentScrollPos < 0) {
_service.loadNext();
}
_prevScrollPos = currentScrollPos;
}
#override
void initState() {
_scrollController.addListener(_onScroll);
_service.loadNext();
super.initState();
}
#override
void dispose() {
_scrollController.dispose();
_service.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return CupertinoPageScaffold(
child: CustomScrollView(
controller: _scrollController,
slivers: <Widget>[
/// navbar
CupertinoSliverNavigationBar(
largeTitle: Text('Items'),
automaticallyImplyTitle: false,
previousPageTitle: 'Back',
transitionBetweenRoutes: false,
),
/// items list
StreamBuilder(
stream: _service.items,
builder: (_, snapshot) {
if (snapshot.hasData) {
final items = snapshot.data;
return SliverList(
delegate: SliverChildBuilderDelegate(
(_, int index) {
return Container(
height: 300.0,
margin: const EdgeInsets.only(bottom: 20.0),
color: index % 2 == 0
? CupertinoColors.activeGreen
: CupertinoColors.activeOrange,
child: Text(items[index]),
);
},
childCount: items.length,
),
);
} else {
return SliverFillRemaining(
child: Center(
child: CupertinoActivityIndicator(),
),
);
}
},
),
StreamBuilder(
stream: _service.isLoadingNext,
builder: (_, snapshot) {
if (snapshot.data == true) {
return SliverToBoxAdapter(
child: Container(
// color: Colors.primary,
padding: const EdgeInsets.symmetric(vertical: 10.0),
child: Center(
child: CupertinoActivityIndicator(),
),
),
);
} else {
return SliverToBoxAdapter(
child: Container(height: 0),
);
}
},
),
SliverToBoxAdapter(
child: SafeArea(
child: Container(),
bottom: true,
top: false,
),
)
],
),
);
}
}
main() {
runApp(CupertinoApp(
home: ItemsScreen(),
));
}
UPDATE: kind-of resolved this issue by calling _scrollController.jumpTo(_scrollController.position.pixels); after _service.loadNext()

Answer 1

Just add ClampingScrollPhysics() on CustomScrollView to remove the bounce physics.
CustomScrollView(
physics: const ClampingScrollPhysics(), // Remove bounce physics
controller: _scrollController,
slivers: <Widget>[
/// navbar
const CupertinoSliverNavigationBar(...)
],
),