1# Curves Reference
2 
3Curves define the easing function for animations, controlling how values interpolate from start to end.
4 
5## Core Concept
6 
7A curve takes an input `t` (0.0 to 1.0, representing time) and outputs a value (typically 0.0 to 1.0, representing progress).
8 
9## Built-in Curves
10 
11### Linear
12 
13```dart
14Curves.linear
15```
16 
17No easing - straight line from 0 to 1. Use when you want constant speed.
18 
19### Ease (Sigmoid)
20 
21```dart
22Curves.ease
23Curves.easeIn
24Curves.easeOut
25Curves.easeInOut
26```
27 
28**Curves.ease** - Slow start and end, fast middle (most common)
29 
30**Curves.easeIn** - Slow start, fast end (accelerating)
31 
32**Curves.easeOut** - Fast start, slow end (decelerating)
33 
34**Curves.easeInOut** - Slow start and end, fast middle (combination)
35 
36### Cubic (Stronger Ease)
37 
38```dart
39Curves.easeInCubic
40Curves.easeOutCubic
41Curves.easeInOutCubic
42```
43 
44Stronger easing than basic ease. More dramatic slow/fast zones.
45 
46### Elastic (Bouncy)
47 
48```dart
49Curves.elasticIn
50Curves.elasticOut
51Curves.elasticInOut
52```
53 
54**Curves.elasticIn** - Bounces in (starts behind, shoots forward)
55 
56**Curves.elasticOut** - Bounces out (goes past, comes back)
57 
58**Curves.elasticInOut** - Bounces in and out
59 
60Example: Good for playful UI, notifications
61 
62### Bounce
63 
64```dart
65Curves.bounceIn
66Curves.bounceOut
67Curves.bounceInOut
68```
69 
70**Curves.bounceIn** - Bounces in (less bouncy than elastic)
71 
72**Curves.bounceOut** - Bounces out (less bouncy than elastic)
73 
74**Curves.bounceInOut** - Bounces in and out
75 
76Example: Good for feedback animations
77 
78### Back (Overshoot)
79 
80```dart
81Curves.backIn
82Curves.backOut
83Curves.backInOut
84```
85 
86**Curves.backIn** - Backs up before going in
87 
88**Curves.backOut** - Backs up before coming out
89 
90**Curves.backInOut** - Backs up on both ends
91 
92Example: Good for revealing content
93 
94### Decelerate (Fast then Slow)
95 
96```dart
97Curves.decelerate
98```
99 
100Fast start, very slow end. Similar to easeOut but more dramatic.
101 
102### Fast Out Slow In
103 
104```dart
105Curves.fastOutSlowIn
106```
107 
108Very fast start, very slow middle, very fast end. Dramatic.
109 
110### Custom Curves in Flutter API
111 
112Flutter includes specialized curves:
113 
114```dart
115// Material design curves
116Curves.fastLinearToSlowEaseIn
117Curves.slowMiddle
118 
119// Specific curves for certain transitions
120Curves.ease
121```
122 
123## Using Curves
124 
125### With Implicit Animation
126 
127```dart
128AnimatedContainer(
129  duration: const Duration(milliseconds: 300),
130  curve: Curves.easeInOut,
131  width: _expanded ? 200 : 100,
132  child: const FlutterLogo(),
133)
134```
135 
136### With Explicit Animation (CurvedAnimation)
137 
138```dart
139animation = CurvedAnimation(
140  parent: _controller,
141  curve: Curves.easeInOut,
142);
143```
144 
145### With Interval
146 
147```dart
148animation = CurvedAnimation(
149  parent: _controller,
150  curve: const Interval(
151    0.0,
152    0.5,
153    curve: Curves.easeIn,
154  ),
155);
156```
157 
158### With Curves.elasticOut
159 
160```dart
161AnimatedContainer(
162  duration: const Duration(milliseconds: 1000),
163  curve: Curves.elasticOut,
164  transform: Matrix4.rotationZ(_rotated ? 0.5 : 0),
165  child: const FlutterLogo(),
166)
167```
168 
169## Custom Curves
170 
171### Creating a Custom Curve
172 
173```dart
174import 'dart:math' as math;
175 
176class CustomCurve extends Curve {
177  @override
178  double transform(double t) {
179    // t is 0.0 to 1.0
180    // Return 0.0 to 1.0
181    return math.pow(t, 2);  // Quadratic ease in
182  }
183}
184```
185 
186**Usage:**
187```dart
188AnimatedContainer(
189  curve: CustomCurve(),
190  duration: const Duration(milliseconds: 300),
191  width: _expanded ? 200 : 100,
192  child: const FlutterLogo(),
193)
194```
195 
196### Shake Curve
197 
198```dart
199class ShakeCurve extends Curve {
200  @override
201  double transform(double t) {
202    return sin(t * pi * 2);
203  }
204}
205```
206 
207### Smooth Step Curve
208 
209```dart
210class SmoothStep extends Curve {
211  final double steps;
212 
213  const SmoothStep({this.steps = 5});
214 
215  @override
216  double transform(double t) {
217    return (t * steps).floor() / steps;
218  }
219}
220```
221 
222### Exponential Curve
223 
224```dart
225class ExponentialCurve extends Curve {
226  final double exponent;
227 
228  const ExponentialCurve({this.exponent = 2});
229 
230  @override
231  double transform(double t) {
232    return math.pow(t, exponent);
233  }
234}
235```
236 
237## Curve Composition
238 
239### Cubic Bezier
240 
241Flutter doesn't have built-in cubic bezier, but you can approximate:
242 
243```dart
244class CubicBezier extends Curve {
245  final double p0x, p0y, p1x, p1y, p2x, p2y, p3x, p3y;
246 
247  const CubicBezier({
248    required this.p0x,
249    required this.p0y,
250    required this.p1x,
251    required this.p1y,
252    required this.p2x,
253    required this.p2y,
254    required this.p3x,
255    required this.p3y,
256  });
257 
258  @override
259  double transform(double t) {
260    // Simplified cubic bezier formula
261    final u = 1 - t;
262    return (u * u * u * p0y +
263            3 * u * u * t * p1y +
264            3 * u * t * t * p2y +
265            t * t * t * p3y);
266  }
267}
268```
269 
270### Combining Curves
271 
272```dart
273class CombinedCurve extends Curve {
274  final Curve first;
275  final Curve second;
276  final double threshold;
277 
278  const CombinedCurve({
279    required this.first,
280    required this.second,
281    required this.threshold,
282  });
283 
284  @override
285  double transform(double t) {
286    if (t < threshold) {
287      return first.transform(t / threshold) * threshold;
288    }
289    return threshold +
290        second.transform((t - threshold) / (1 - threshold)) * (1 - threshold);
291  }
292}
293```
294 
295**Usage:**
296```dart
297AnimatedContainer(
298  curve: CombinedCurve(
299    first: Curves.easeIn,
300    second: Curves.easeOut,
301    threshold: 0.5,
302  ),
303  duration: const Duration(milliseconds: 500),
304  width: _expanded ? 200 : 100,
305  child: const FlutterLogo(),
306)
307```
308 
309## Choosing the Right Curve
310 
311### Motion Design Guidelines
312 
313| Animation Type | Recommended Curve | Why |
314|---------------|-------------------|-----|
315| Fade in/out | easeInOut | Natural opacity change |
316| Size change | easeOut | Decelerate feels natural for growth |
317| Position slide | easeInOut | Smooth start and stop |
318| Rotation | easeInOut | Natural angular acceleration |
319| Color change | linear | Uniform color transition |
320| Scale | elasticOut | Playful, bouncy feel |
321| Reveal | backOut | Dramatic reveal effect |
322| Loading | linear or ease | Consistent speed |
323| Success | elasticOut | Celebratory feel |
324 
325### Platform Conventions
326 
327**iOS:**
328- Prefers subtle curves (ease, easeInOut)
329- Limited use of elastic/bounce
330- Consistent with system animations
331 
332**Android:**
333- Wider variety of curves
334- More use of elastic/bounce for feedback
335- Material design curves (easeIn, fastOutSlowIn)
336 
337**Web:**
338- CSS-like curves (ease, ease-in, ease-out, ease-in-out)
339- Limited use of complex curves
340 
341## Curve Combinations
342 
343### Multi-Stage Animation
344 
345```dart
346// Stage 1: Ease in (0.0 - 0.5)
347// Stage 2: Ease out (0.5 - 1.0)
348 
349animation1 = CurvedAnimation(
350  parent: _controller,
351  curve: const Interval(0.0, 0.5, curve: Curves.easeIn),
352);
353 
354animation2 = CurvedAnimation(
355  parent: _controller,
356  curve: const Interval(0.5, 1.0, curve: Curves.easeOut),
357);
358```
359 
360### Staggered with Different Curves
361 
362```dart
363// Item 1: Bouncy
364item1Animation = CurvedAnimation(
365  parent: _controller,
366  curve: const Interval(0.0, 0.3, curve: Curves.elasticOut),
367);
368 
369// Item 2: Smooth
370item2Animation = CurvedAnimation(
371  parent: _controller,
372  curve: const Interval(0.1, 0.4, curve: Curves.easeInOut),
373);
374 
375// Item 3: Linear
376item3Animation = CurvedAnimation(
377  parent: _controller,
378  curve: const Interval(0.2, 0.5, curve: Curves.linear),
379);
380```
381 
382## Performance Considerations
383 
384### Curve Complexity
385 
386Simple curves (linear, ease) are faster:
387- Fewer calculations
388- Less GPU work
389- Consistent timing
390 
391Complex curves (elastic, bounce) are slower:
392- More calculations
393- Potential for frame drops
394- Variable timing
395 
396### Optimization Tips
397 
398- Use simpler curves on low-end devices
399- Cache curve calculations if needed
400- Test performance on target devices
401- Profile with Flutter DevTools
402 
403## Debugging Curves
404 
405### Visualize Curve
406 
407```dart
408class CurveVisualizer extends StatelessWidget {
409  final Curve curve;
410 
411  const CurveVisualizer({super.key, required this.curve});
412 
413  @override
414  Widget build(BuildContext context) {
415    return CustomPaint(
416      painter: _CurvePainter(curve: curve),
417    );
418  }
419}
420 
421class _CurvePainter extends CustomPainter {
422  final Curve curve;
423 
424  const CurvePainter({required this.curve});
425 
426  @override
427  void paint(Canvas canvas, Size size) {
428    final paint = Paint()
429      ..color = Colors.blue
430      ..strokeWidth = 2
431      ..style = PaintingStyle.stroke;
432 
433    final path = Path();
434    for (double t = 0; t <= 1; t += 0.01) {
435      final x = t * size.width;
436      final y = size.height - (curve.transform(t) * size.height);
437      if (t == 0) {
438        path.moveTo(x, y);
439      } else {
440        path.lineTo(x, y);
441      }
442    }
443    canvas.drawPath(path, paint);
444  }
445 
446  @override
447  bool shouldRepaint(_CurvePainter oldDelegate) => false;
448}
449```
450 
451### Print Curve Values
452 
453```dart
454void printCurveValues(Curve curve) {
455  print('Curve: $curve');
456  for (double t = 0; t <= 1; t += 0.1) {
457    print('t=$t, output=${curve.transform(t)}');
458  }
459}
460 
461// Usage
462printCurveValues(Curves.easeInOut);
463```
464 
465## Accessibility
466 
467### Respecting User Preferences
468 
469```dart
470Curve getAdaptiveCurve(BuildContext context) {
471  if (MediaQuery.of(context).disableAnimations) {
472    return Curves.linear;  // No easing when animations disabled
473  }
474  return Curves.easeInOut;
475}
476```
477 
478### Reduced Motion
479 
480```dart
481AnimatedContainer(
482  duration: MediaQuery.of(context).disableAnimations
483      ? Duration.zero
484      : const Duration(milliseconds: 300),
485  curve: getAdaptiveCurve(context),
486  width: _expanded ? 200 : 100,
487  child: const FlutterLogo(),
488)
489```
490 
491## Common Patterns
492 
493### Loading Spinner
494 
495```dart
496_animation = CurvedAnimation(
497  parent: _controller,
498  curve: Curves.linear,  // Constant speed
499);
500```
501 
502### Success Checkmark
503 
504```dart
505_animation = CurvedAnimation(
506  parent: _controller,
507  curve: Curves.elasticOut,  // Bouncy celebration
508);
509```
510 
511### Page Transition
512 
513```dart
514_enterAnimation = CurvedAnimation(
515  parent: _controller,
516  curve: Curves.easeIn,  // Accelerate in
517);
518 
519_exitAnimation = CurvedAnimation(
520  parent: _controller,
521  curve: Curves.easeOut,  // Decelerate out
522);
523```
524 
525### Modal Popup
526 
527```dart
528_animation = CurvedAnimation(
529  parent: _controller,
530  curve: Curves.easeOutBack,  // Dramatic reveal
531);
532```
533 
534## Curve Comparison
535 
536| Curve | Start | Middle | End | Feel |
537|-------|-------|--------|-----|------|
538| linear | Fast | Fast | Fast | Mechanical |
539| ease | Slow | Fast | Slow | Natural |
540| easeIn | Slow | Fast | Fast | Accelerating |
541| easeOut | Fast | Slow | Slow | Decelerating |
542| easeInOut | Slow | Fast | Slow | Smooth |
543| elasticIn | Back | Fast | Normal | Bouncy start |
544| elasticOut | Normal | Fast | Back | Bouncy end |
545| bounceIn | Bounce | Fast | Normal | Bouncy start |
546| bounceOut | Normal | Fast | Bounce | Bouncy end |
547| backIn | Back | Fast | Normal | Overshoot start |
548| backOut | Normal | Fast | Back | Overshoot end |
549 
550## Best Practices
551 
552### DO
553 
554- Use appropriate curves for animation type
555- Test on real devices
556- Consider platform conventions
557- Respect accessibility settings
558- Profile performance with DevTools
559 
560### DON'T
561 
562- Use elastic/bounce for everything (distracting)
563- Over-combine curves (confusing motion)
564- Ignore device performance
565- Use same curve for all animations (boring)
566- Forget to handle edge cases (t < 0 or t > 1)
567