Introduction
Animation can make your Flutter app feel polished, responsive, and modern—but too much of it can slow things down, drain batteries, or distract users from their goals. The difference between amateur and professional Flutter apps often comes down to animation quality: subtle, purposeful motion versus chaotic, overwhelming effects. Apps like those from Google, Airbnb, and Stripe demonstrate how thoughtful animation guides users, provides feedback, and creates delightful experiences without becoming the center of attention. In this comprehensive guide, you’ll learn how to animate your Flutter app like a pro by using smart animations that enhance your UI without overkill. We’ll cover implicit animations for simple cases, explicit animations for complex scenarios, performance optimization techniques, and real-world patterns used in production apps.
When to Use Animations in Flutter
Not everything needs to move. The best animations serve a purpose—they guide attention, provide feedback, or smooth transitions. Here are the scenarios where animation adds genuine value:
Screen transitions: Help users understand spatial relationships between screens using Hero animations or custom page transitions.
Interactive feedback: Buttons, icons, and tappable elements should respond visually to touch, confirming the user’s action was registered.
State changes: When data updates—counts change, items appear/disappear, or content loads—animation helps users track what changed.
Loading states: Skeleton screens, shimmer effects, and progress indicators keep users engaged while waiting.
Error and success feedback: Shake animations for errors, checkmarks for success, and color transitions communicate outcomes clearly.
Implicit Animations: The Easy Path
Flutter’s implicit animation widgets handle the complexity for you. Just change a value and the widget animates to the new state automatically.
AnimatedContainer
The workhorse of implicit animations. It animates changes to size, color, padding, margin, decoration, and more.
class ExpandableCard extends StatefulWidget {
@override
State createState() => _ExpandableCardState();
}
class _ExpandableCardState extends State {
bool _isExpanded = false;
@override
Widget build(BuildContext context) {
return GestureDetector(
onTap: () => setState(() => _isExpanded = !_isExpanded),
child: AnimatedContainer(
duration: const Duration(milliseconds: 300),
curve: Curves.easeInOut,
width: _isExpanded ? 300 : 150,
height: _isExpanded ? 200 : 100,
padding: EdgeInsets.all(_isExpanded ? 24 : 16),
decoration: BoxDecoration(
color: _isExpanded ? Colors.blue : Colors.grey.shade300,
borderRadius: BorderRadius.circular(_isExpanded ? 16 : 8),
boxShadow: _isExpanded
? [BoxShadow(color: Colors.blue.withOpacity(0.3), blurRadius: 20, offset: Offset(0, 10))]
: [BoxShadow(color: Colors.black12, blurRadius: 4)],
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Tap to ${_isExpanded ? 'collapse' : 'expand'}',
style: TextStyle(
color: _isExpanded ? Colors.white : Colors.black87,
fontWeight: FontWeight.bold,
),
),
if (_isExpanded) ...[
const SizedBox(height: 12),
Text(
'Additional content appears here with a smooth animation.',
style: TextStyle(color: Colors.white70),
),
],
],
),
),
);
}
} AnimatedOpacity and AnimatedScale
Combine multiple implicit animations for richer effects:
class FadeScaleWidget extends StatefulWidget {
final bool isVisible;
final Widget child;
const FadeScaleWidget({
required this.isVisible,
required this.child,
});
@override
State createState() => _FadeScaleWidgetState();
}
class _FadeScaleWidgetState extends State {
@override
Widget build(BuildContext context) {
return AnimatedOpacity(
duration: const Duration(milliseconds: 200),
opacity: widget.isVisible ? 1.0 : 0.0,
child: AnimatedScale(
duration: const Duration(milliseconds: 200),
scale: widget.isVisible ? 1.0 : 0.8,
child: widget.child,
),
);
}
}
// Usage
FadeScaleWidget(
isVisible: _showContent,
child: Card(
child: Padding(
padding: EdgeInsets.all(16),
child: Text('This fades and scales in/out'),
),
),
) AnimatedSwitcher for Content Changes
When swapping one widget for another, AnimatedSwitcher provides smooth transitions:
class CounterWithAnimation extends StatefulWidget {
@override
State createState() => _CounterWithAnimationState();
}
class _CounterWithAnimationState extends State {
int _count = 0;
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
transitionBuilder: (child, animation) {
// Slide up and fade in
return SlideTransition(
position: Tween(
begin: const Offset(0, 0.5),
end: Offset.zero,
).animate(animation),
child: FadeTransition(opacity: animation, child: child),
);
},
child: Text(
'$_count',
key: ValueKey(_count), // Key is required for AnimatedSwitcher
style: const TextStyle(fontSize: 48, fontWeight: FontWeight.bold),
),
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: () => setState(() => _count++),
child: const Text('Increment'),
),
],
);
}
} Explicit Animations: Full Control
When you need precise control over animation timing, sequencing, or complex choreography, explicit animations with AnimationController are the answer.
Basic AnimationController Pattern
class PulsingButton extends StatefulWidget {
final VoidCallback onPressed;
final Widget child;
const PulsingButton({required this.onPressed, required this.child});
@override
State createState() => _PulsingButtonState();
}
class _PulsingButtonState extends State
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late Animation _scaleAnimation;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: const Duration(milliseconds: 1000),
vsync: this,
)..repeat(reverse: true);
_scaleAnimation = Tween(begin: 1.0, end: 1.1).animate(
CurvedAnimation(parent: _controller, curve: Curves.easeInOut),
);
}
@override
void dispose() {
_controller.dispose(); // Always dispose controllers!
super.dispose();
}
@override
Widget build(BuildContext context) {
return ScaleTransition(
scale: _scaleAnimation,
child: ElevatedButton(
onPressed: widget.onPressed,
child: widget.child,
),
);
}
} Staggered Animations
Create choreographed sequences where multiple elements animate with different timings:
class StaggeredListAnimation extends StatefulWidget {
final List items;
const StaggeredListAnimation({required this.items});
@override
State createState() => _StaggeredListAnimationState();
}
class _StaggeredListAnimationState extends State
with SingleTickerProviderStateMixin {
late AnimationController _controller;
late List> _itemAnimations;
@override
void initState() {
super.initState();
_controller = AnimationController(
duration: Duration(milliseconds: 300 * widget.items.length),
vsync: this,
);
// Create staggered intervals for each item
_itemAnimations = List.generate(widget.items.length, (index) {
final start = index / widget.items.length;
final end = (index + 1) / widget.items.length;
return Tween(begin: 0, end: 1).animate(
CurvedAnimation(
parent: _controller,
curve: Interval(start, end, curve: Curves.easeOut),
),
);
});
_controller.forward();
}
@override
void dispose() {
_controller.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: widget.items.length,
itemBuilder: (context, index) {
return AnimatedBuilder(
animation: _itemAnimations[index],
builder: (context, child) {
return Transform.translate(
offset: Offset(50 * (1 - _itemAnimations[index].value), 0),
child: Opacity(
opacity: _itemAnimations[index].value,
child: child,
),
);
},
child: ListTile(
title: Text(widget.items[index]),
leading: const Icon(Icons.star),
),
);
},
);
}
} Hero Animations for Screen Transitions
Hero animations create seamless transitions between screens by animating shared elements:
// Source screen - list of products
class ProductListScreen extends StatelessWidget {
final List products;
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: products.length,
itemBuilder: (context, index) {
final product = products[index];
return GestureDetector(
onTap: () => Navigator.push(
context,
MaterialPageRoute(
builder: (_) => ProductDetailScreen(product: product),
),
),
child: Card(
child: Row(
children: [
Hero(
tag: 'product-image-${product.id}',
child: Image.network(
product.imageUrl,
width: 80,
height: 80,
fit: BoxFit.cover,
),
),
const SizedBox(width: 16),
Expanded(
child: Hero(
tag: 'product-title-${product.id}',
child: Material(
color: Colors.transparent,
child: Text(
product.name,
style: Theme.of(context).textTheme.titleMedium,
),
),
),
),
],
),
),
);
},
);
}
}
// Destination screen - product detail
class ProductDetailScreen extends StatelessWidget {
final Product product;
@override
Widget build(BuildContext context) {
return Scaffold(
body: CustomScrollView(
slivers: [
SliverAppBar(
expandedHeight: 300,
flexibleSpace: FlexibleSpaceBar(
background: Hero(
tag: 'product-image-${product.id}',
child: Image.network(
product.imageUrl,
fit: BoxFit.cover,
),
),
),
),
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.all(16),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Hero(
tag: 'product-title-${product.id}',
child: Material(
color: Colors.transparent,
child: Text(
product.name,
style: Theme.of(context).textTheme.headlineMedium,
),
),
),
// More content...
],
),
),
),
],
),
);
}
} Custom Page Transitions
Create distinctive navigation experiences with custom route transitions:
class SlideUpRoute extends PageRouteBuilder {
final Widget page;
SlideUpRoute({required this.page})
: super(
pageBuilder: (context, animation, secondaryAnimation) => page,
transitionsBuilder: (context, animation, secondaryAnimation, child) {
const begin = Offset(0.0, 1.0);
const end = Offset.zero;
const curve = Curves.easeOutCubic;
var tween = Tween(begin: begin, end: end).chain(
CurveTween(curve: curve),
);
var fadeTween = Tween(begin: 0.0, end: 1.0).chain(
CurveTween(curve: curve),
);
return SlideTransition(
position: animation.drive(tween),
child: FadeTransition(
opacity: animation.drive(fadeTween),
child: child,
),
);
},
transitionDuration: const Duration(milliseconds: 400),
);
}
// Usage
Navigator.push(context, SlideUpRoute(page: DetailsScreen())); Animation Performance Optimization
Smooth animations run at 60fps (or 120fps on ProMotion displays). Here’s how to achieve that:
// Use RepaintBoundary to isolate animated widgets
class OptimizedAnimation extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
// Static content - not affected by animation
const Text('This content stays still'),
// Animated content isolated with RepaintBoundary
RepaintBoundary(
child: AnimatedWidget(...),
),
// More static content
const Text('Also unaffected'),
],
);
}
}
// Prefer Transform over changing layout properties
// GOOD - GPU accelerated
Transform.scale(
scale: _animation.value,
child: widget,
)
// AVOID - triggers layout recalculation
SizedBox(
width: 100 * _animation.value,
child: widget,
)Common Mistakes to Avoid
Forgetting to dispose AnimationController: Memory leaks occur when controllers aren’t disposed. Always override dispose() and call controller.dispose().
Missing vsync: Without vsync (from TickerProviderStateMixin), animations consume resources even when the app is in the background.
Animating layout instead of transforms: Changing width/height triggers expensive layout passes. Use Transform.scale or Transform.translate for smooth 60fps animations.
Forgetting ValueKey in AnimatedSwitcher: Without a key that changes, AnimatedSwitcher can’t detect that it should animate.
Too many simultaneous animations: Running many complex animations simultaneously causes frame drops. Prioritize the most important animations.
Ignoring reduced motion preferences: Some users have vestibular disorders. Respect their accessibility settings:
final reduceMotion = MediaQuery.of(context).disableAnimations;
AnimatedContainer(
duration: reduceMotion
? Duration.zero
: const Duration(milliseconds: 300),
// ...
)Conclusion
Great Flutter animations share common traits: they’re purposeful, performant, and polished. Start with implicit animations like AnimatedContainer and AnimatedSwitcher for simple cases—they handle the complexity automatically. Graduate to explicit animations with AnimationController when you need precise control over timing, sequencing, or complex choreography. Always optimize by using Transform instead of layout changes, isolating animations with RepaintBoundary, and disposing controllers properly. Most importantly, animate with purpose—every animation should guide users, provide feedback, or smooth transitions. If an animation doesn’t serve a clear purpose, it probably shouldn’t exist. Your users will notice the difference between apps that move thoughtfully and those that move chaotically. For more on building performant Flutter apps, check out our guide on Flutter Performance Optimization Tips. To dive deeper into advanced animation patterns, explore the official Flutter animations documentation.
