Flame flutter interpolate between multiple vector2

I've just started the flame, and I'd like to move a component from this position to a list of positions progressively over 7 seconds.

What I've managed to do so far has a latency of between the different points, I'd like something fluid.

void animate({
required PositionComponent component,
required List<Vector2> newPositions,
required double duration,
void Function()? onComplete,
}) async {
    int index = 0;

    while (index < newPositions.length) {
      Vector2 newPosition = newPositions.elementAt(index);
      double progress = 0.0;

      while (progress <= 1.0) {
        component.position.lerp(newPosition, progress);

        await Future.delayed(const Duration(milliseconds: 100));

        progress += (1.0 / duration);



Flame version (1.10.0).

Thanks in advance!


  • You can use a MoveAlongPathEffect for that:

    // Starts at the components position, you can also use `absolute: false`
    // in the `EffectController` if you want to define the points relative
    // to the component.
    final path = Path.moveTo(position.x, position.y);
    for (final point in newPositions) {
      path.lineTo(point.x, point.y);
    final moveEffect = MoveAlongPathEffect(
      EffectController(duration: 7),
      absolute: true,

    Or if you don't want to use an effect you can use the moveToTarget (or lerp) method which is in the Flame extension of Vector2:

      /// Smoothly moves this [Vector2] in the direction [target] by a displacement
      /// given by a distance [ds] in that direction.
      /// It does not goes beyond target, regardless of [ds], so the final value
      /// is always [target].
      /// Note: [ds] is the displacement vector in units of the vector space. It is
      /// **not** a percentage (relative value).
      void moveToTarget(
        Vector2 target,
        double ds,