Implementing Animations in Flutter: From Animatable and Tween to a Custom Bezier Curve Motion

Animation Implementation Approach

In Flutter, calling setState() triggers a new frame render, so continuously updating position information while calling this method creates a translation animation; the same principle applies to other animation types.

Flutter's Core Classes

Animatable

The Animatable class controls the type of animation by defining how values such as x , y , or color change over time. For a translation animation it manipulates x and y , while for a color animation it manipulates the color components.

Animation

The Animation class controls the animation’s progress (forward, reverse, easing) without caring about the animation type. To animate from 0 to 200 you first create an appropriate Animatable (Flutter already provides many, e.g., Tween ).

T lerp(double t) {
  return begin + (end - begin) * t;
}

assert(begin != null);
assert(end != null);
return begin + (end - begin) * t;

After creating an Animatable , you call animate() with an Animation (usually an AnimationController ) to start the animation; the callback runs on every frame.

AnimationController Role

AnimationController represents the animation as a value that linearly progresses from 0.0 to 1.0 (forward) or from 1.0 to 0.0 (reverse). It receives vertical‑sync signals via a Ticker , updates the value each tick, and notifies listeners.

void _tick(Duration elapsed) {
  _lastElapsedDuration = elapsed;
  final double elapsedInSeconds = elapsed.inMicroseconds / Duration.microsecondsPerSecond;
  assert(elapsedInSeconds >= 0.0);
  _value = _simulation.x(elapsedInSeconds).clamp(lowerBound, upperBound);
  if (_simulation.isDone(elapsedInSeconds)) {
    _status = (_direction == _AnimationDirection.forward)
        ? AnimationStatus.completed
        : AnimationStatus.dismissed;
    stop(canceled: false);
    _checkStatusChanged();
  }
  notifyListeners();
}

Calling forward() stops any current animation, starts the ticker, and drives the value from the current position toward the upper bound.

TickerFuture forward({double from}) {
  _direction = _AnimationDirection.forward;
  if (from != null) value = from;
  return _animateToInternal(upperBound);
}

Tween Role

A Tween maps the controller’s 0‑1 range to a concrete range (e.g., 0 → 200). Its lerp method implements a simple linear interpolation:

T lerp(double t) {
  return begin + (end - begin) * t;
}

For multi‑dimensional values (e.g., a Rect ) you would implement a custom tween such as RectTween .

Custom BezierTween

To animate along a quadratic Bézier curve you create a class extending Animatable<_Point> and override transform() with the Bézier formula.

class _Point {
  const _Point({this.x, this.y});
  final double x;
  final double y;
}

class _BezierTween extends Animatable<_Point> {
  _BezierTween({required this.p0, required this.p1, required this.p2})
      : assert(p0 != null),
        assert(p1 != null),
        assert(p2 != null);

  final _Point p0; // start
  final _Point p1; // control
  final _Point p2; // end

  @override
  _Point transform(double t) {
    double x = (1 - t) * (1 - t) * p0.x +
        2 * t * (1 - t) * p1.x +
        t * t * p2.x;
    double y = (1 - t) * (1 - t) * p0.y +
        2 * t * (1 - t) * p1.y +
        t * t * p2.y;
    return _Point(x: x, y: y);
  }
}

Usage Example

In a StatefulWidget you create an AnimationController , define three points, build a _BezierTween , and animate it. The listener updates the UI on each frame.

class _SimpleRouteState extends State
with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late _Point _p0, _p1, _p2;
  late Animation<_Point> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(duration: Duration(seconds: 2), vsync: this);
    _p0 = _Point(x: 30, y: 30);
    _p1 = _Point(x: 30, y: 200);
    _p2 = _Point(x: 200, y: 200);
    _animation = _BezierTween(p0: _p0, p1: _p1, p2: _p2).animate(_controller)
      ..addListener(() {
        setState(() {});
      });
  }
}

Running this code moves a widget along the defined Bézier curve, demonstrating how Flutter’s animation system can be extended with custom interpolations.