How do you build interactive animations based on physics simulation, such as springs?

Short answer

Using AnimationController.animateWith() and passing a physics simulation derived from Simulation such as SpringSimulation, specifying the mass, stiffness, and damping ratio.

Explanation

Unlike animations that rely on a predefined duration, physics animations end when they lose energy and settle physically. SpringSimulation lets you specify mass, stiffness (spring stiffness), and damping. This pattern is the basis for realistic touch experiences that mimic physics and respond to the velocity of the user's finger drag (fling velocity).

Code example

void _runSpring(double velocity) {
  final spring = SpringDescription(mass: 1.0, stiffness: 100.0, damping: 10.0);
  final simulation = SpringSimulation(spring, _controller.value, 1.0, velocity);
  _controller.animateWith(simulation);
}

Common mistakes

• Trying to simulate a realistic bounce through fixed curves such as Curves.bounceOut instead of using real physics that takes the instantaneous drag velocity into account.

Follow-up questions

• What is the role of the Ticker and the TickerProvider (vsync) in running animations in Flutter?

Sources

• Flutter cookbook — Animate a widget using a physics simulation