Springster

Spring animations and simulations, simplified.

Features 🎯

• 🎨 Simple spring-based animations with customizable bounce and duration
• 🔄 Spring-based draggable widgets with smooth return animations
• 🎯 Spring curves for use with standard Flutter animations
• 📱 2D spring animations for complex movements

Try it out

Open Example

Installation 💻

❗ In order to start using Springster you must have the Dart SDK installed on your machine.

Add to your pubspec.yaml:

dependencies:
  springster: ^latest_version

Or install via dart pub:

dart pub add springster

Usage 💡

Simple Spring Animation

Use SpringBuilder for basic spring animations:

SpringBuilder(
  spring: Spring.bouncy,
  value: targetValue, // Changes trigger smooth spring animation
  builder: (context, value, child) {
    return Container(
      width: value,
      height: value,
      color: Colors.blue,
    );
  },
)

If you want a simple two-dimensional spring animation, you can use SpringBuilder2D:

SpringBuilder2D(
  spring: Spring.bouncy,
  value: (100, 100), // Changes trigger smooth spring animation and redirect dynamically
  builder: (context, value, child) {
    return Transform.translate(
      offset: Offset(value.x, value.y),
      child: child,
    );
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

Spring Draggable

springster comes with a SpringDraggable widget that allows you to drag a widget around the screen with a spring return animation. It works just like the Draggable widget in Flutter and supports native Flutter DragTargets, however it comes with a few sensible defaults and extra features.

SpringDraggable(
  spring: Spring.bouncy,
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
  data: 'my-draggable-data',
)

Low-level Spring Simulation

If you need more control over the spring simulation, you can use the SpringSimulationController and SpringSimulationController2D classes.

final controller = SpringSimulationController(
  spring: Spring.bouncy,
  vsync: this,
);

They work similarly to the AnimationController class in Flutter and allow you to drive the spring simulation with a target value, while maintaining velocity between target changes.

Predefined Springs 🎯

Springster comes with several predefined spring configurations:

• const Spring() - Smooth spring with no bounce
• Spring.instant - An effectively instant spring
• Spring.defaultIOS - iOS-style smooth spring with no bounce
• Spring.bouncy - Spring with higher bounce
• Spring.snappy - Snappy spring with small bounce
• Spring.interactive - Lower response spring for interactive animations

You can also create custom springs:

const mySpring = Spring(
  duration: 0.5, // Settling duration
  bounce: 0.2,   // Bounce amount (-1 to 1)
);

// Or using damping fraction
const mySpring = Spring.withDamping(
  dampingFraction: 0.7,
  duration: 0.5,
);

---

Acknowledgements

Springster was partially adapted from and heavily inspired by fluid_animations.