How do you implement a custom animation curve in flutter?

Overview

A custom animation curve defines how an animation progresses over time — whether it eases in, bounces, overshoots, or follows any custom mathematical path. Flutter's

Curve

Built-in Curves

dartCopy
// Using built-in curves
CurvedAnimation(
  parent: _controller,
  curve: Curves.easeInOut,    // Smooth start and end
)

// Other built-in options
Curves.linear            // Constant speed
Curves.easeIn            // Slow start, fast end
Curves.easeOut           // Fast start, slow end
Curves.easeInOut         // Slow at both ends
Curves.bounceOut         // Bounces at end
Curves.elasticIn         // Spring effect at start
Curves.elasticOut        // Spring effect at end
Curves.decelerate        // Starts fast, decelerates

Custom Curve (Extending Curve)

dartCopy
class SlowMiddleCurve extends Curve {
  @override
  double transform(double t) {
    // t goes from 0.0 to 1.0
    // Return value also 0.0 to 1.0
    // Custom math: slow down in the middle
    if (t < 0.5) {
      return 2 * t * t; // Ease in
    } else {
      return -1 + (4 - 2 * t) * t; // Ease out
    }
  }
}

// Usage
class _MyState extends State<MyWidget> with SingleTickerProviderStateMixin {
  late AnimationController _controller;
  late Animation<double> _animation;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this, duration: Duration(seconds: 2));
    _animation = CurvedAnimation(
      parent: _controller,
      curve: SlowMiddleCurve(), // Your custom curve!
    );
    _controller.forward();
  }

  @override
  Widget build(BuildContext context) {
    return ScaleTransition(scale: _animation, child: FlutterLogo(size: 100));
  }
}

Cubic Bezier Curve (Most Common)

dartCopy
// Cubic curve takes 4 control points
const myCurve = Cubic(0.25, 0.1, 0.25, 1.0);
// Same as CSS cubic-bezier(0.25, 0.1, 0.25, 1.0)

CurvedAnimation(
  parent: _controller,
  curve: myCurve,
)

Interval Curve (Stagger Animations)

dartCopy
// Play animation only between specific time intervals
_animation1 = CurvedAnimation(
  parent: _controller,
  curve: Interval(0.0, 0.5, curve: Curves.easeOut), // First half
);

_animation2 = CurvedAnimation(
  parent: _controller,
  curve: Interval(0.5, 1.0, curve: Curves.easeIn),  // Second half
);

Reversing a Curve

dartCopy
// FlippedCurve reverses the direction of a curve
CurvedAnimation(
  parent: _controller,
  curve: Curves.easeIn,
  reverseCurve: FlippedCurve(Curves.easeIn), // Use on reverse
)

Popular Curve Visualizations

linear

easeInOut

bounceOut

elasticOut

Cubic(0,0,0.2,1)

Best Practice: Use

textCopy

Curves.easeInOut

for most UI transitions. Use

textCopy

bounceOut

or

textCopy

elasticOut

for playful interactions. Create a custom

textCopy

Curve

subclass when you need precise mathematical control over the animation timing.