fluid_animations 1.0.0 copy "fluid_animations: ^1.0.0" to clipboard
fluid_animations: ^1.0.0 copied to clipboard

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

Fluid Animations #

style: very good analysis Powered by Mason License: MIT

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

Demo Gif showing 2D Spring based animation

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.

2
likes
160
pub points
0%
popularity

Publisher

verified publisherclevertasks.de

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

Repository (GitHub)
View/report issues

Documentation

API reference

License

MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on fluid_animations