Exposing onDrag callback

[grzegorzlapuszek]

I'm wondering about new "onDrag" feature to track the current position of thumb. Right now we can get the final position of the thumb after stop dragging it (onSeek callback).
In other words: I'm looking for a solution to dynamically get the position of thumb - let's say from 0...to 1 , recalculate the time based on that and finally display it (like on YouTube)

It could be accessed like onSeek callback:

[grzegorzlapuszek]

In addition probably it would also good to have: onStartDragging, and onEndDragging

[suragch]

I was looking at the Slider API yesterday.

• onChanged → ValueChanged?
• onChangeEnd → ValueChanged?
• onChangeStart → ValueChanged?

Where the return double is the slider value between the slider's min and max. Slider also shows a label above the thumb if label is specified. At first I was thinking Slider had a way to listen to continuous drag updates, but I don't see a way to do that.

Right now for ProgressBar the onSeek performs a similar function to Slider's onChanged.

It makes sense to add a drag update callback for people like you who want to add a label and video preview above the thumb while dragging.

Here are some questions I have:

• What value should the drag callback provide? You suggested double from 0 to 1 indicating the percentage of the whole. In that case you would need to recalculate your own duration for the label. So another option would be to provide the duration directly. You could then calculate the percentage by dividing the drag milliseconds by the total milliseconds (and remembering that total can be zero sometimes).
• How are you going to place the drag label and video preview? For your use case you're using TimeLabelLocation.none so you can get the width of the widget and then use your drag percentage to calculate the x value. However, some users might use TimeLabelLocation.sides, in which case the drag duration or percentage would no longer tell you the x value of the thumb because you would also have to know the width of the left label plus any padding between the label and the start of the progress bar.
• Do you actually need onStartDragging and onEndDragging for your use case? My thought is let's not add these until someone actually needs them.

What if there were a callback like this:

onDragUpdate: (Duration duration, double dx) {},

• The duration would be the current drag duration that would be easy to convert to a label string.
• The dx would be the x value of the thumb as measured from the left side of the ProgressBar widget, no matter whether there are side labels or not.

[grzegorzlapuszek]

What value should the drag callback provide? You suggested double from 0 to 1 indicating the percentage of the whole. In that case you would need to recalculate your own duration for the label. So another option would be to provide the duration directly. You could then calculate the percentage by dividing the drag milliseconds by the total milliseconds (and remembering that total can be zero sometimes).
I think duration may be more convenient for users.

How are you going to place the drag label and video preview? For your use case you're using TimeLabelLocation.none so you can get the width of the widget and then use your drag percentage to calculate the x value. However, some users might use TimeLabelLocation.sides, in which case the drag duration or percentage would no longer tell you the x value of the thumb because you would also have to know the width of the left label plus any padding between the label and the start of the progress bar.
Yep, I could probably recalculate it based on the drag percentage.

Do you actually need onStartDragging and onEndDragging for your use case? My thought is let's not add these until someone actually needs them.
Actually I'm listening to some time events on EventChannel. I was thinking of stop the listening for the moment while dragging, so that these callback could be helpful for me;)

Btw. great idea with dx value -> probably it will resolve other scenarios as well.

[suragch]

Check out the latest commit. I haven't published it yet but you should be able to test it either by copying the file into your project or referring to the git repo in your pubspec.yaml file.

Rather than follow the API I proposed above, I made a new details class to pass in to the callbacks:

/// Data to pass back on drag callback events
class ThumbDragDetails {

  /// The duration position of the thumb on the progress bar
  final Duration timeStamp;

  /// The global position of the drag event moving the thumb on the progress bar.
  final Offset globalPosition;

  /// The local position of the drag event moving the thumb on the progress bar.
  final Offset localPosition;
}

Let me know if the API works for your use case and then I'll publish it.

[grzegorzlapuszek]

I've tested these callbacks and works like a charm for my use case;) I believe you can publish it.
Thank you

[suragch]

Ok, great. I published this as version 0.8.0. If you have any open source links to an example of adding a thumb label and/or video preview, that would be very helpful to others who are trying to do the same thing, I'm sure.