I have this UI:
When user taps on right side we go to the next story, left we go to previous and holding down anywhere should stop the automatic loading on top. I am currently using GestureDetector
s and using the three callbacks
onTap
To go to next or previous storyonTapDown
To pause the loaderonTapUp
To resume the loader
The problem is onTap
gets called with onTapUp
so when I try to pause for example by holding down on the right side, it would immediately go to the next story after I lift my finger.
4
Answers
Try to use a combination of onHorizontalDragStart, onHorizontalDragEnd, and onHorizontalDragUpdate instead of onTapDown and onTapUp. This will allow you to differentiate between taps and drags, providing more control over the pause and resume actions.
Let’s try the below solution, I tested it and it works quite well in your case.
Below is a custom
GestureDetector
widget that allows us to set the duration foronLongPressStart
andonLongPressEnd
And the usage of the custom widget
A tap gesture consists of a tap-down followed "immediately" by a tap-up gesture. Consequently, as you indicate, if you combine those callbacks they will overlap each other.
What you are looking:
onLongPressStart
(oronLongPressDown
)onLongPressEnd
(oronLongPressUp
)This will allow differentiating between long-presses and taps.
The more simple and customizable approach is using Timer for delaying tap interaction.
This is the simple workaround to demonstrate:
And this is the result:
You can reusing this widget to achieve the story next-prev navigation by layouting this widget into a row to capture left and right area for story navigation.
Maybe it could be an alternative solution for your problem, Thanks 😉