AnimatedContainer: Simple UI Animations Without Controllers
AnimatedContainer is a 'fire-and-forget' animation widget. It automatically animates its own properties like size and color when they change. Use it for simple UI state changes, like a button that grows when tapped. It only animates itself, not its child.
Why it exists
Many UI animations involve simple changes to a widget's size, color, or position. Managing an AnimationController for these basic cases adds unnecessary boilerplate code. AnimatedContainer was created to provide a simple, declarative way to achieve these common animations implicitly.
The mental model
Think of AnimatedContainer as a regular Container with a built-in animator. When you change its properties (like width or color) inside a StatefulWidget's setState, it doesn't just snap to the new values. Instead, it smoothly transitions from the old state to the new state over a specified duration.
How it works
AnimatedContainer is an ImplicitlyAnimatedWidget. When Flutter rebuilds it with new property values, the widget compares the new values to the old ones. For any properties that have changed (and are not null), it automatically creates and runs an animation using the provided duration and curve to interpolate between the start and end values. You don't manage any controllers; you just declare the end state.
When to use it
Use it for basic, state-driven animations of a container's appearance. This is perfect for making a button grow or change color on tap, smoothly adjusting layout padding, or animating a background based on a selection. It's the go-to for simple, implicit transitions where you don't need fine-grained control.
When not to use it
For complex sequences or when you need to pause, reverse, or link multiple animations, use an explicit AnimationController. Crucially, AnimatedContainer does not animate its child widget. To animate the transition between different children, use a widget like AnimatedSwitcher or AnimatedCrossFade.
One canonical example
A common use is a box that changes size and color when tapped. You would have a StatefulWidget with a _tapped boolean. The AnimatedContainer's width, height, and color properties would be determined by this boolean. In an onTap callback, you call setState to toggle _tapped, and the AnimatedContainer automatically animates the transition to the new dimensions and color over its specified duration.
Interview question
Which scenario best highlights the primary advantage of using an AnimatedContainer?
- a.Smoothly transitioning a widget's background color and size based on a state change.Correct
- b.Animating the appearance and disappearance of different child widgets inside a container.
- c.Synchronizing animations across multiple, independent UI elements on the screen.
- d.Creating a complex animation sequence that needs to be paused and resumed.
Why? this is the answer
AnimatedContainer is ideal for 'fire-and-forget' animations of its own properties like color and size, automatically handling transitions when its state changes. Scenarios requiring pausing, resuming, or animating child widgets (A, C) demand explicit AnimationControllers or other specialized widgets.
Just read this? Test yourself on what you have been reading.
Read the original → api.flutter.dev
- #flutter
- #animation
- #ui
- #widget
Put your scrolling time to good use
Learn one idea, try a quiz and save useful cards for revision. Tezvyn makes it easy to learn and stay current in your tech field, a few minutes at a time.
The iPhone app is on the way
We are building it. Until it lands, nothing here is held back from you: every interview card, your saved cards, streaks and the job board all work in Safari, plus hundreds of free practice quizzes of thirty questions each. Sign in and it all carries over to the app the day it arrives.
Want it as an icon? Tap Share at the bottom of Safari, then Add to Home Screen. It opens full screen and the cards you have read stay available offline.
We are hiring for this. Open roles that interview on flutter — each one lists the topics its interview covers.
See open roles