Flutter 4: Animation & Effects - Simple Guide with Examples

Flutter animations make your app feel smooth and alive. This guide covers built-in widgets that help you create beautiful transitions and effects without complex code. Learn how to use AnimatedContainer, AnimatedCrossFade, and more to elevate your UI.

AnimatedContainer – Smooth Property Changes

The AnimatedContainer widget allows you to animate changes to properties like color, size, and padding smoothly over time. It's a simple way to add dynamic effects to your UI without writing complex animation code.

• duration: Specifies the duration of the animation.
• width: The width of the container.
• height: The height of the container.
• color: The background color of the container.
• curve: The easing curve for the animation.

AnimatedCrossFade – Swap Between Two Widgets

The AnimatedCrossFade widget allows you to fade between two different widgets. This is useful for creating transitions between different states of your UI.

• duration: Specifies the duration of the animation.
• firstChild: The first widget to display.
• secondChild: The second widget to display.
• crossFadeState: The current state of the cross-fade.

AnimatedDefaultTextStyle – Animate Text Style Changes

The AnimatedDefaultTextStyle widget lets you animate changes to text styles such as font size, weight, or color smoothly. This adds a touch of elegance to text transitions in your app.

AnimatedIcon – Icon Animation Between States

The AnimatedIcon widget provides built-in icon transitions between states (e.g., play-pause, menu-close). It requires an AnimationController to manage the animation progress.

AnimatedOpacity – Fade In / Fade Out

The AnimatedOpacity widget allows you to smoothly show or hide a widget by changing its opacity. This is a simple way to create fade-in and fade-out effects.

AnimatedRotation – Rotate Smoothly

The AnimatedRotation widget animates a widget’s rotation angle. It's useful for adding subtle animations to icons or other UI elements.

Hero – Shared Element Animation Between Screens

The Hero widget makes a widget "fly" between two screens during navigation. This creates a seamless transition between different parts of your app.