Summary - Animation basics
- Flutter course
- Intermediate
- Lesson 80/99
- 4 min
Combine AnimatedContainer and Tween to make an animated card.
Animation combination
By combining AnimatedContainer, Tween, and Curves you create smooth animations. AnimatedContainer takes duration and curve, Tween produces values between begin and end, and Curves shapes the timing.
AnimatedContainer(
duration: const Duration(seconds: 1),
curve: Curves.easeInOut,
width: tween.transform(animasyon.value),
)Together these three parts control both the value transition and the timing curve.
Practice Build a transition card
Define a StatelessWidget named GecisKarti with a required final Animation<double> animasyon field. Its build method should return an AnimatedContainer with duration set to Duration(seconds: 1), curve set to Curves.easeInOut, and width set to animasyon.value. Print 'hazir' in main.
Starter code
import 'package:flutter/material.dart';
class GecisKarti extends StatelessWidget {
final Animation<double> animasyon;
const GecisKarti({super.key, required this.animasyon});
// build metodu AnimatedContainer döndürsün
// duration Duration(seconds: 1) olsun
// curve Curves.easeInOut olsun
// width animasyonun değerini alsın
}
void main() {
// 'hazir' yazdır
}Sample solution
import 'package:flutter/material.dart';
class GecisKarti extends StatelessWidget {
final Animation<double> animasyon;
const GecisKarti({super.key, required this.animasyon});
@override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: const Duration(seconds: 1),
curve: Curves.easeInOut,
width: animasyon.value,
);
}
}
void main() {
print('hazir');
}Expected output
hazir
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which parts work together in the animation combination?
- Provider + ChangeNotifier + setState
- AnimatedContainer + Tween + Curves Correct answer
- GoRouter + GoRoute + context.go
- sqflite + http + jsonDecode
Explanation: AnimatedContainer provides the animated transition, Tween produces values, and Curves shapes the timing; the three work together. The other options concern database/network, state management, and navigation.
2 The Curves value
AnimatedContainer(
duration: const Duration(seconds: 1),
curve: ____,
width: animasyon.value,
)AnimatedContainer(
duration: const Duration(seconds: 1),
curve: Curves.easeInOut,
width: animasyon.value,
)Explanation: The curve parameter takes a value from the Curves class; Curves.easeInOut is a valid curve. There is no Tween.easeInOut, Colors.red is a color, and Duration.zero is a duration; none of these are curve values.
3 Summary parts
| Term | Meaning |
|---|---|
AnimatedContainer |
Animated container |
Tween |
Transition between begin and end |
Curves |
Timing curve |
duration |
Animation duration |