Motor 1.0 is out, and it might be the best way to orchestrate complex animations in Flutter

🚀 Motor: The Unified Motion System Flutter Deserves

Tired of juggling separate APIs for bouncy spring animations and smooth, duration-based curves in your Flutter apps? Say hello to Motor—a powerful, new package that unifies all your motion needs into a single, elegant system.

Motor brings together physics-based springs, duration-based curves, and Flutter's core animation system under one consistent API, making it easier than ever to create expressive, platform-specific, and natural-feeling UI.

💡 Why Motor Changes the Game for Flutter Animation

Motor's core innovation is the Motion class, which acts as a single interface for defining any type of animation. This simple switch is a massive win for consistency and flexibility.

Key Features You'll Love:

• 🎨 Unified Motion API: Use one API for every animation type—spring physics (Motion.bouncySpring()) or traditional duration/curve animations (Motion.curved()).
• 🍎 Platform-Specific Presets:
  
  • CupertinoMotion: Built-in presets that perfectly match Apple's iOS spring animations (e.g., .bouncy()).
  • MaterialSpringMotion: Tokens that adhere to Material Design 3 motion guidelines.
• 📱 Multi-dimensional & Physics Independence: Animate complex types like Offset, Size, and Rect, simulating physics independently for each axis.

🛠 Getting Started is Easy

Add motor to your pubspec.yaml:

YAML

dependencies:
  motor: ^1.0.0-dev.0

Or run: dart pub add motor

🖼️ Simple Animation: Bringing Values to Life

Use SingleMotionBuilder for basic, one-dimensional animations:

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

If you want to animate more complex types, such as Offset, Size, or Rect, you can use MotionBuilder and pass a so-called MotionConverter to it:

MotionBuilder(
  motion: CupertinoMotion.bouncy(),
  value: const Offset(100, 100),
  from: Offset.zero,
  converter: OffsetMotionConverter(),
  builder: (context, value, child) {
    return Transform.translate(
      offset: value,
      child: child,
    );
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
)

For Material Design applications, you can use MaterialSpringMotion tokens:

MotionBuilder(
  motion: MaterialSpringMotion.expressiveSpatialDefault,
  value: const Offset(100, 100),
  from: Offset.zero,
  converter: OffsetMotionConverter(),
  builder: (context, value, child) {
    return Transform.translate(
      offset: value,
      child: child,
    );
  },
  child: Container(
    width: 100,
    height: 100,
    color: Colors.green,
  ),
)

🎨 Expressive, Platform-Consistent Motion

Motor's predefined motions make it trivial to adhere to platform design standards.

CupertinoMotion: The Feel of iOS

Need that distinct iOS bounce? Just use the presets that mirror SwiftUI's animations: .smooth(), .bouncy(), or .snappy().

MaterialSpringMotion: Following MD3 Guidelines

Motor implements the Material Design 3 Motion Tokens for both Spatial (position, size) and Effects (opacity, color) motions.

Motion Draggable: Interactive Physics at Your Fingertips

The MotionDraggable widget is the ultimate showcase for Motor's power.

It works just like Flutter's native Draggable, but when the user stops dragging or cancels the drag, the item doesn't just jump back. It returns to its original position using the physics simulation defined in the motion property. This ensures the return motion feels natural, whether you choose a smooth curve or a bouncy spring.

MotionDraggable(
  motion: CupertinoMotion.bouncy(),
  child: Container(
    width: 100,
    height: 100,
    color: Colors.blue,
  ),
  data: 'my-draggable-data',
)

⚙️ Advanced Control: Multi-Dimensional Motion

Motor uses MotionConverter to allow each dimension (like the X and Y axis of an Offset) to run its physics simulation independently. This is key to realistic, natural animations, especially after user gestures.

🎬 Sequence Animations for Complex Flows

Motor offers powerful MotionSequence capabilities to manage complex, multi-phase animations for state machines or ordered progressions.

Conclusion

Motor provides a robust, flexible, and unified platform for all your Flutter animation needs. By embracing both physics-based springs and traditional curves under one API, it empowers developers to build interfaces that are not just beautiful, but truly responsive and natural.

➡️ Ready to level up your Flutter motion? Check out the full documentation and examples on pub.dev.

‍