Implicit animations

What are implicit animations?

Example: Fade-in text effect

Fade-in (starter code)
Animate opacity with AnimatedOpacity widget

1. Pick a widget property to animate
2. Initialize a state variable for the animated property
3. Set the duration of the animation
4. Set up a trigger for the animation, and choose an end value


Fade-in (complete)
Putting it all together

Example: Shape-shifting effect

Shape-shifting (starter code)
Animate color, borderRadius, and margin with AnimatedContainer

1. Add an implicit animation
2. Set starting values for animated properties
3. Set up a trigger for the animation
4. Set duration


Shape-shifting (complete)
Using animation curves
Putting it all together

What’s next?