Flutter: Creating a scroll view that contracts center item before allowing the list to scroll

Question

I'm creating a scroll view that pads that center item with some extra space vertically. I want to accomplish two things:

1- Shrink the center item's padding at the same rate the user is moving his finger. For example, if the padding of the center item is 50 pixels and the user moved his finger for 10 pixels then I would like to decrement the padding to 40.

2- I would like to stop the list view from actually scrolling until the padding for the center item is 0. The list view should scroll as normal once the center item's padding is 0.

I'm a little lost here. I've been trying playing around with implementing my own ScrollController and ScrollPhysics but I haven't been able to achieve exactly what I'm looking for. I also saw that there was a class in Flutter called ScrollPosition that controls the position for each scrolling widget but I haven't been able to figure out how to use these to accomplish the behavior I'm looking for.

Could someone point me in the right direction?

Answer 1

Change the physics property of the ListView, NeverScrollablePhysics() doesn't allow scrolling.

Maybe use a GestureDetector for detecting the swipes.

Be careful of the placement of this widget though. It can interfere with the normal scrolling of the listView.

Try experimenting with the animationController instead of calling setState() multiple times, it's wasteful to refresh the screen multiple times just to change the padding.