While trying to create a snap effect on the header of a ReorderableListView, I have written below code. But the jobWidgetListener
function is not animating my list items to the required offset.In the State of my StatefulWidget, I have
final ScrollController _reorderScrollController = ScrollController(); static const _processItemWidth = 150.0; void jobWidgetListener() { if (_reorderScrollController.hasClients) { if (_reorderScrollController.position.extentBefore < _processItemWidth * 0.8) { print('this'); _reorderScrollController.animateTo( 0.0, duration: const Duration(milliseconds: 350), curve: Curves.easeOut, ); } else if (_reorderScrollController.position.extentBefore < _processItemWidth) { print('that'); _reorderScrollController.animateTo( _processItemWidth + 8.0, duration: const Duration(milliseconds: 350), curve: Curves.easeOut, ); } } } @override void initState() { super.initState(); WidgetsBinding.instance.addPostFrameCallback((_) => _scrollToIndex(_activeProcessIndex)); // <- this one scrolls to active item in my list on rebuild and is working fine, so not providing details here _reorderScrollController.addListener(jobWidgetListener); // <-- Listener added here }
The print statements in the jobWidgetListener
function are printed in console correctly.In the build function, I have
ReorderableListView.builder( header: Container( width: _processItemWidth, decoration: BoxDecoration(color: Colors.blue)), scrollDirection: Axis.horizontal, scrollController: _reorderScrollController, cacheExtent: _processItemWidth * _activeProcessIndex > 300.0 ? _processItemWidth * _activeProcessIndex : 300.0, onReorder: (int oldIndex, int newIndex) { _updateProcessOrder( oldIndex: oldIndex, newIndex: newIndex, oldProcess: widget.jobs.process, jobID: widget.jobs.jid); }, itemBuilder: (BuildContext context, int index) { return ProcessItemWidget( key: ValueKey(processItem[index].name), width: _processItemWidth, index: index, processItem: processItem, jid: widget.jobs.jid); }, itemCount: widget.jobs.process.length, ),