AnimatedContainer
- Flutter course
- Intermediate
- Lesson 76/99
- 4 min
Animate property changes with AnimatedContainer.
What is AnimatedContainer?
AnimatedContainer is the animated version of Container. When you change properties like width, height, or color, it animates the change smoothly over the duration. You provide new values and Flutter handles the rest.
class Ornek extends StatelessWidget {
const Ornek({super.key});
@override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: const Duration(seconds: 1),
width: 50,
color: Colors.blue,
);
}
}This widget automatically plays a transition animation when the width and color values change.
The duration parameter
The duration parameter takes a Duration object and sets the total animation time. This parameter is mandatory; without it, AnimatedContainer would not know how fast to transition. Duration(seconds: 1) gives a one-second transition, while Duration(milliseconds: 300) gives 300 milliseconds.
AnimatedContainer(
duration: const Duration(milliseconds: 300),
width: 100,
)Practice Define an AnimatedContainer
Define a StatelessWidget named Ornek. Its build method should return an AnimatedContainer with duration set to Duration(seconds: 1) and width set to 50. Print 'hazir' in main.
Starter code
import 'package:flutter/material.dart';
class Ornek extends StatelessWidget {
const Ornek({super.key});
// build metodu AnimatedContainer döndürsün
// duration Duration(seconds: 1) olsun
// width 50 olsun
}
void main() {
// 'hazir' yazdır
}Sample solution
import 'package:flutter/material.dart';
class Ornek extends StatelessWidget {
const Ornek({super.key});
@override
Widget build(BuildContext context) {
return AnimatedContainer(
duration: const Duration(seconds: 1),
width: 50,
);
}
}
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 parameter of AnimatedContainer determines the animation duration?
- width
- color
- child
- duration Correct answer
Explanation: The duration parameter determines how long the animation takes. width and color are animated properties, and child is the inner widget; none of them control duration.
2 The duration parameter
AnimatedContainer(
____: const Duration(seconds: 1),
width: 50,
)AnimatedContainer(
duration: const Duration(seconds: 1),
width: 50,
)Explanation: duration is the mandatory parameter that sets AnimatedContainer's animation time. time, speed, and delay are not AnimatedContainer parameter names.
3 AnimatedContainer parts
| Term | Meaning |
|---|---|
AnimatedContainer |
Animated container |
duration |
Animation duration |
width |
Width value |
color |
Color value |