Tween
- Flutter course
- Intermediate
- Lesson 77/99
- 4 min
Interpolate between begin and end values with Tween.
What is Tween?
Tween is used to transition between a starting (begin) and ending (end) value. The transform method takes a t value between 0.0 and 1.0 and returns the corresponding value between begin and end.
final tween = Tween<double>(begin: 0, end: 100);
print(tween.transform(0.5)); // 50.0t=0.0 returns the begin value and t=1.0 returns the end value.
The transform method
The transform method takes a t value between 0.0 and 1.0. t=0.0 returns the begin value, t=1.0 returns the end value, and t=0.5 returns the midpoint. This way you can compute the appropriate value at each animation frame.
final t = Tween<double>(begin: 0, end: 100);
print(t.transform(0.0)); // 0.0
print(t.transform(1.0)); // 100.0
print(t.transform(0.5)); // 50.0Practice Compute a value with Tween
Define a Tween<double> with begin set to 0 and end set to 100. Compute the midpoint value with transform(0.5) and print it with print.
Starter code
import 'package:flutter/material.dart';
// Tween<double> ile geçiş nesnesi tanımla
// başlangıç değeri 0, bitiş değeri 100 olsun
// t=0.5 için transform çağrısı yap
// sonucu yazdır
void main() {
}Sample solution
import 'package:flutter/material.dart';
void main() {
final tween = Tween<double>(begin: 0, end: 100);
print(tween.transform(0.5));
}Expected output
50.0
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which parameter of Tween specifies the ending value?
- end Correct answer
- t
- begin
- transform
Explanation: The end parameter specifies the ending value. begin is the starting value, transform is the method that computes the value, and t is the 0.0-1.0 fraction passed to transform.
2 Tween definition
final tween = ____<double>(begin: 0, end: 100);final tween = Tween<double>(begin: 0, end: 100);Explanation: Tween is the class that transitions between begin and end values. Animation is an animation object, Container is a widget, and Curve is a timing curve; none of them perform value transitions.
3 Tween parts
| Term | Meaning |
|---|---|
Tween |
Transition class |
begin |
Starting value |
end |
Ending value |
transform |
Value computation method |