audio_video_progress_bar
audio_video_progress_bar copied to clipboard
suragch
Increase the clickable area without visually increasing the progress bar?
Is it possible to increase the clickable area/hitbox of the ProgressBar widget, without increasing barHeight or thumbRadius?
It might be possible. Can you describe more about your current pain point that caused to you request this?
I need this feature badly. When it comes to Video Apps, that the progress bar is too large will effect users' watching experience as a result of it blocks some part of the video. At the same time, user maybe like to jump to the different part of the video by dragging the progress bar. So it would be perfect that the progress bar is small with a larger draggable area or tappable area.
Can you show me an image or screenshot where the progress bar is too big and blocks the video?
Like the image shows. The height of the progress bar is 5px. It's not easy for user to interact with the progress bar. It would be better if it has a large touchable area while the size remains the same.
I'm just brainstorming a hack. What if you made the thumb radius larger (half of the desired height) and then set its color to transparent? Would that work?
I'm just brainstorming a hack. What if you made the thumb radius larger (half of the desired height) and then set its color to transparent? Would that work?
You're right. It works.🥳
I also feel that the touchable area could be larger or customizable, as sometimes the slider doesn't react when the user touches slightly next to it. I'd like to keep the thumb radius as is.
Another option might be to use a Stack with an invisible layer above the progress bar. Add a gesture detector to the invisible layer and then use that input to update the progress bar.
Hmm, but now that I think about it, I'm not sure if that would work for updating the thumb position without continuously triggering the update callback. I suppose you could ignore any callbacks until your own gesture recognizer is finished. It might work.