1# Implicit Animations Reference
2 
3Implicit animations automatically handle animations when widget properties change. No AnimationController or explicit state management needed.
4 
5## Core Concept
6 
7Implicitly animated widgets extend `ImplicitlyAnimatedWidget`. When you change a property (color, size, etc.), the widget automatically animates to the new value using a specified duration and curve.
8 
9## Available Widgets
10 
11### AnimatedContainer
12 
13Animates multiple properties simultaneously.
14 
15```dart
16AnimatedContainer(
17  duration: const Duration(milliseconds: 300),
18  curve: Curves.easeInOut,
19  width: _expanded ? 200 : 100,
20  height: _expanded ? 200 : 100,
21  decoration: BoxDecoration(
22    color: _expanded ? Colors.blue : Colors.red,
23    borderRadius: BorderRadius.circular(_expanded ? 20 : 8),
24  ),
25  child: const FlutterLogo(),
26)
27```
28 
29**Animatable properties:**
30- `width`, `height` - Size
31- `color` - Background color
32- `decoration` - BoxDecoration (includes border, shadow, image, etc.)
33- `padding` - Padding
34- `margin` - Margin (via decoration)
35- `transform` - Matrix4 transformation
36 
37### AnimatedOpacity
38 
39Fades a widget in and out.
40 
41```dart
42AnimatedOpacity(
43  opacity: _visible ? 1.0 : 0.0,
44  duration: const Duration(milliseconds: 500),
45  curve: Curves.easeInOut,
46  onEnd: () => print('Animation complete'),
47  child: const Text('Hello'),
48)
49```
50 
51### AnimatedPadding
52 
53Animates padding changes.
54 
55```dart
56AnimatedPadding(
57  padding: EdgeInsets.all(_padded ? 16.0 : 8.0),
58  duration: const Duration(milliseconds: 300),
59  curve: Curves.ease,
60  child: const Card(child: Text('Padded content')),
61)
62```
63 
64### AnimatedPositioned
65 
66Animates position within a Stack.
67 
68```dart
69Stack(
70  children: [
71    AnimatedPositioned(
72      top: _top ? 0 : 100,
73      left: _left ? 0 : 100,
74      duration: const Duration(milliseconds: 500),
75      curve: Curves.easeInOut,
76      child: const FlutterLogo(),
77    ),
78  ],
79)
80```
81 
82### AnimatedAlign
83 
84Animates alignment changes.
85 
86```dart
87AnimatedAlign(
88  alignment: _aligned ? Alignment.topLeft : Alignment.bottomRight,
89  duration: const Duration(milliseconds: 400),
90  curve: Curves.easeInOut,
91  child: const Text('Align me'),
92)
93```
94 
95### AnimatedContainer (Multiple Properties)
96 
97```dart
98AnimatedContainer(
99  duration: const Duration(milliseconds: 300),
100  curve: Curves.easeInOut,
101  transform: Matrix4.rotationZ(_rotated ? 0.5 : 0),
102  child: const FlutterLogo(),
103)
104```
105 
106### TweenAnimationBuilder
107 
108Custom tween animation without creating a custom widget.
109 
110```dart
111TweenAnimationBuilder<double>(
112  tween: Tween<double>(begin: 0, end: 1),
113  duration: const Duration(seconds: 1),
114  curve: Curves.easeInOut,
115  builder: (context, value, child) {
116    return Opacity(
117      opacity: value,
118      child: Transform.scale(
119        scale: value,
120        child: child,
121      ),
122    );
123  },
124  child: const FlutterLogo(),
125)
126```
127 
128### AnimatedSwitcher
129 
130Cross-fades between two widgets.
131 
132```dart
133AnimatedSwitcher(
134  duration: const Duration(milliseconds: 300),
135  transitionBuilder: (Widget child, Animation<double> animation) {
136    return FadeTransition(
137      opacity: animation,
138      child: child,
139    );
140  },
141  child: _showFirst
142      ? const Text('First')
143      : const Text('Second'),
144)
145```
146 
147With custom size transition:
148```dart
149AnimatedSwitcher(
150  duration: const Duration(milliseconds: 500),
151  transitionBuilder: (Widget child, Animation<double> animation) {
152    return SizeTransition(
153      sizeFactor: animation,
154      axis: Axis.vertical,
155      child: child,
156    );
157  },
158  child: _expanded
159      ? const Text('Expanded content')
160      : const Text('Collapsed content'),
161)
162```
163 
164### AnimatedDefaultTextStyle
165 
166Animates text style changes.
167 
168```dart
169AnimatedDefaultTextStyle(
170  duration: const Duration(milliseconds: 300),
171  style: TextStyle(
172    fontSize: _large ? 32 : 16,
173    color: _colored ? Colors.blue : Colors.black,
174    fontWeight: _bold ? FontWeight.bold : FontWeight.normal,
175  ),
176  child: const Text('Animated text'),
177)
178```
179 
180### AnimatedPhysicalModel
181 
182Animates elevation, color, and shape with physical shadow.
183 
184```dart
185AnimatedPhysicalModel(
186  duration: const Duration(milliseconds: 300),
187  shape: BoxShape.rectangle,
188  elevation: _elevated ? 12 : 0,
189  color: _elevated ? Colors.blue : Colors.grey[300]!,
190  borderRadius: BorderRadius.circular(12),
191  child: const Padding(
192    padding: EdgeInsets.all(16),
193    child: Text('Physical model'),
194  ),
195)
196```
197 
198### AnimatedTheme
199 
200Animates theme changes.
201 
202```dart
203AnimatedTheme(
204  duration: const Duration(milliseconds: 500),
205  data: ThemeData(
206    brightness: _darkMode ? Brightness.dark : Brightness.light,
207    primaryColor: _darkMode ? Colors.blue[700] : Colors.blue,
208  ),
209  child: const MyChildWidget(),
210)
211```
212 
213## Common Parameters
214 
215All implicit animations support these parameters:
216 
217```dart
218AnimatedContainer(
219  duration: Duration(milliseconds: 300),  // Required: Animation duration
220  curve: Curves.easeInOut,                 // Optional: Animation curve
221  onEnd: () {},                           // Optional: Completion callback
222  child: Widget(),                           // The child widget to animate
223)
224```
225 
226### Duration
227 
228```dart
229const Duration(milliseconds: 300)  // 0.3 seconds
230const Duration(seconds: 1)          // 1 second
231const Duration(days: 1)               // 1 day
232```
233 
234### Curves
235 
236Common curves from `Curves` class:
237 
238```dart
239Curves.linear        // Linear (no easing)
240Curves.ease          // Simple ease in and out
241Curves.easeIn        // Slow start, fast end
242Curves.easeOut       // Fast start, slow end
243Curves.easeInOut     // Slow start and end, fast middle
244Curves.easeInCubic   // Cubic ease in
245Curves.easeOutCubic  // Cubic ease out
246Curves.easeInOutCubic // Cubic ease in and out
247Curves.elasticIn     // Bounces in
248Curves.elasticOut    // Bounces out
249Curves.elasticInOut  // Bounces in and out
250Curves.bounceIn      // Bounces in (more subtle)
251Curves.bounceOut     // Bounces out (more subtle)
252```
253 
254Custom curve:
255```dart
256class ShakeCurve extends Curve {
257  @override
258  double transform(double t) => sin(t * pi * 2);
259}
260 
261// Usage
262AnimatedContainer(
263  curve: ShakeCurve(),
264  // ...
265)
266```
267 
268### onEnd Callback
269 
270Trigger action when animation completes:
271 
272```dart
273AnimatedOpacity(
274  opacity: _visible ? 1.0 : 0.0,
275  duration: const Duration(milliseconds: 300),
276  onEnd: () {
277    if (!_visible) {
278      // Animation finished fading out
279      // Remove widget, navigate, etc.
280    }
281  },
282  child: const Text('Hello'),
283)
284```
285 
286## Best Practices
287 
288### DO
289 
290- Use implicit animations for simple, one-off animations
291- Set appropriate durations for natural feel (200-500ms typical)
292- Use curves to make animations feel natural
293- Use `onEnd` callback for post-animation actions
294- Test animations on various devices
295- Consider `MediaQuery.disableAnimations` for accessibility
296 
297### DON'T
298 
299- Use implicit animations for complex, multi-property sequences (use staggered instead)
300- Forget to set duration (defaults to instant change)
301- Use extremely long durations (> 1s) without good reason
302- Animate too many properties simultaneously (performance impact)
303- Nest implicit animations deeply (can cause jank)
304 
305## Performance Tips
306 
307- Implicit animations are optimized but still rebuild during animation
308- Avoid animating complex widget trees
309- Use `RepaintBoundary` around animated children to isolate repaints
310- Test performance with Flutter DevTools Performance overlay
311- Consider using `AnimatedBuilder` for complex widgets to minimize rebuilds
312 
313## Debugging
314 
315### Slow Animations
316 
317```dart
318// Slow all animations by 10x during development
319timeDilation = 10.0;
320```
321 
322### Show Repaint Rainbows
323 
324```dart
325void main() {
326  debugPaintSizeEnabled = true;
327  runApp(MyApp());
328}
329```
330 
331### Performance Overlay
332 
333```dart
334void main() {
335  runApp(MyApp());
336}
337 
338// In debug mode, press 'p' to toggle performance overlay
339```
340 
341## Comparison: Implicit vs Explicit
342 
343| Feature | Implicit | Explicit |
344|---------|----------|-----------|
345| Controller needed | No | Yes (AnimationController) |
346| Setup complexity | Low | Medium/High |
347| Reusability | Widget-based | Controller-based |
348| Multiple properties | AnimatedContainer only | Unlimited |
349| Lifecycle control | Limited | Full |
350| State monitoring | Limited (onEnd) | Full (addStatusListener) |
351| Performance | Good | Excellent (with proper patterns) |
352 
353## When to Use Implicit Animations
354 
355Use implicit animations when:
356- Animating a single property
357- Animation is triggered by state change
358- No need for fine-grained control
359- Want simple, declarative code
360- Animation is one-time or simple toggle
361 
362Use explicit animations when:
363- Need full control over animation lifecycle
364- Animating multiple properties
365- Need to react to animation state
366- Creating reusable animation components
367- Need complex timing or sequencing
368- Performance is critical
369