How do I use AnimatedPositioned for a trackball of a video player?

Viewed 16

Let's say I have an AnimatedPositioned widget like this:

double ballPosition = 0;
double startPosition = 0;
double endPosition = 10;

AnimatedPositioned(
    duration: const Duration(seconds: videoDuration),    // I grab the video's duration and have that as the duration for the animation.
    top: ballPosition,
    child: Ball(),
)

Then to animate this as the video starts playing, I do:

ballPosition = endPosition;
setState((){});

This will have a YouTube style trackball go from the start to the end of the video seek bar.

My problem:

I have multiple videos listed in one page, which I switch from using a PageView swipe. What happens is, when you swipe, the current video pauses, and the new video that comes into view plays.

Now I want the trackball to remember the previous video's trackball location (how do I get this value? AnimatedPositioned uses the final value and animates according to duration, how do I get the current location of the trackball?) so that when I come back to this video, the trackball location is in the same place, not the starting or the ending position.

Secondly, when the new video comes into view, how do I set the trackball to the startPosition without triggering the duration of AnimatedPositioned? As if I don't override the animation, it will try to animate backwards instead of immediately jumping to the start position as desired.

To summarize:

  • Problem 1: How do I retrieve the current top value of the AnimatedPositioned widget while it is being animated, and how do I pause the animation if possible so I can resume it once I come back to the same video?

  • Problem 2: How do I set the top value of the AnimatedPositioned widget and have it go there immediately, skipping the animation? Since it needs to start from the beginning immediately as it comes to a new video.

0 Answers
Related