Flutter
Tween and CurvedAnimation
Smooth curves with CurvedAnimation.
Tween and CurvedAnimation
Tween produces intermediate values between a start and end value; it converts the 0.0-1.0 progress from AnimationController into real values. CurvedAnimation smooths this progress with a Curves curve.
final tween = Tween(begin: 0.0, end: 100.0);
final curved = CurvedAnimation(
parent: ctrl,
curve: Curves.easeInOut,
);
final value = tween.transform(curved.value);
Choosing Curves
The Curves class offers different easing curves: Curves.linear is flat, Curves.easeIn starts slowly, Curves.bounceOut bounces. Using CurvedAnimation together with a Tween, you control both the value range and the easing.
Exercise Use Tween and CurvedAnimation
Define the _EmptyVsync class. In main, create an AnimationController named ctrl (vsync: _EmptyVsync(), duration 1 second). Wrap ctrl with CurvedAnimation using Curves.easeIn. Pass curved.value to the transform of Tween(begin: 0.0, end: 100.0) and print the result.
Show example solution
import 'package:flutter/material.dart';
class _EmptyVsync implements TickerProvider {
@override
Ticker createTicker(TickerCallback onTick) => Ticker(onTick);
}
void main() {
final ctrl = AnimationController(
vsync: _EmptyVsync(),
duration: Duration(seconds: 1),
);
final curved = CurvedAnimation(parent: ctrl, curve: Curves.easeIn);
final tween = Tween(begin: 0.0, end: 100.0);
print(tween.transform(curved.value));
ctrl.dispose();
}
Test yourself
-
What does CurvedAnimation do?
- Stops the animation
- Cleans memory
- Sets widget color
- Smooths linear progress with a curve
Show answer
Smooths linear progress with a curve — CurvedAnimation converts the controller's linear 0.0-1.0 progress with a Curves curve to provide smooth motion.
-
Pass parent to CurvedAnimation
final curved = CurvedAnimation(
____: ctrl,
curve: Curves.easeInOut,
);
Show answer
final curved = CurvedAnimation(
parent: ctrl,
curve: Curves.easeInOut,
);
-
Tween and CurvedAnimation matches
- Tween
- Start and end values
- CurvedAnimation
- Smooths with a curve
- Curves.easeInOut
- Slow start and end curve
- parent
- Source animation
Next lesson: Hero animation
