Tween and CurvedAnimation
- Flutter course
- Advanced
- Lesson 57/69
- 4 min
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.
Practice 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.
Starter code
import 'package:flutter/material.dart';
// _EmptyVsync sınıfını tanımla (TickerProvider uygular)
void main() {
// ctrl oluştur, CurvedAnimation ile sar (curve easeIn),
// Tween ile 0-100 dönüşümü yapıp transform değerini yazdır
}Sample 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();
}Expected output
0.0
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does CurvedAnimation do?
- Stops the animation
- Cleans memory
- Sets widget color
- Smooths linear progress with a curve Correct answer
Explanation: CurvedAnimation converts the controller's linear 0.0-1.0 progress with a Curves curve to provide smooth motion.
2 Pass parent to CurvedAnimation
final curved = CurvedAnimation(
____: ctrl,
curve: Curves.easeInOut,
);final curved = CurvedAnimation(
parent: ctrl,
curve: Curves.easeInOut,
);Explanation: The parent parameter of CurvedAnimation takes the source animation (usually AnimationController).
3 Tween and CurvedAnimation matches
| Term | Meaning |
|---|---|
Tween |
Start and end values |
CurvedAnimation |
Smooths with a curve |
Curves.easeInOut |
Slow start and end curve |
parent |
Source animation |