fluid_animations 1.0.0

Create effortlessly smooth and responsive animations inspired by SwiftUI's spring animations.

Fluid Animations

Create effortlessly smooth and responsive animations in your Flutter apps inspired by Apple's SwiftUI spring animations.

Features

• ⚡️ Effortlessly create smooth and responsive spring animations
• 🎨 Choose from preset animation styles (bouncy, smooth, snappy, interactive, ...)
• 🔧 Easily create your own springs

Usage

The simplest way of creating a spring is using the prebuilt ones. For example:

final mySpring = FluidSpring.bouncy;

You can also create custom springs. FluidSpring has two properties: duration and bounce.

final mySpring = FluidSpring(bounce: 0.4, duration: 0.5);

Duration: Defines the pace of the spring. This is approximately equal to the settling duration.

Bounce: How bouncy the spring should be. A value of 0 indicates no bounces, positive values indicate increasing amounts of bounciness up to a maximum of 1.0 (corresponding to undamped oscillation), and negative values indicate overdamped springs with a minimum value of -1.0.

Animating

The simplest way to animate your widgets with a spring is using the FluidTransitionBuilder. It animates all changes of value using a spring.

FluidTransitionBuilder<double>(
  value: isHovered ? 200.0 : 100.0,
  spring: FluidSpring.bouncy, // Use a bouncy spring animation
  builder: (animation, child) {
    return Container(
      width: animation.value,
      height: animation.value,
      child: child,
    );
  },
  child: const FlutterLogo()
);

When you need more control over your animation you can also use a AnimationController and run a spring simulation.

final spring = FluidSpring.smooth;

final simulation = SpringSimulation(spring, 0, 1, 0);

_controller.animateWith(simulation);

See the flutter example on how to animate a widget using a physics simulation.

2D Spring animations

For 2D animations (e.g. animating positions like those seen in the demo video), use the SpringSimulation2D class. Refer to the example implementation for guidance.

Acknowledgements

The math used is based on this amazing article.

Values for the prebuilt springs are from the Apple Documentation on animation.