1import 'package:flutter/material.dart';
2 
3/// Explicit animation example using AnimationController
4///
5/// This example demonstrates:
6/// - AnimationController setup and lifecycle
7/// - Tween interpolation
8/// - AnimatedWidget pattern for reusable animations
9/// - AnimatedBuilder pattern for complex widgets
10/// - Animation status monitoring
11 
12void main() => runApp(const ExplicitAnimationApp());
13 
14class ExplicitAnimationApp extends StatelessWidget {
15  const ExplicitAnimationApp({super.key});
16 
17  @override
18  Widget build(BuildContext context) {
19    return MaterialApp(
20      title: 'Explicit Animation',
21      theme: ThemeData(
22        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
23      ),
24      home: const LogoAnimationDemo(),
25    );
26  }
27}
28 
29/// Basic explicit animation with addListener and setState
30class BasicExplicitAnimation extends StatefulWidget {
31  const BasicExplicitAnimation({super.key});
32 
33  @override
34  State<BasicExplicitAnimation> createState() => _BasicExplicitAnimationState();
35}
36 
37class _BasicExplicitAnimationState extends State<BasicExplicitAnimation>
38    with SingleTickerProviderStateMixin {
39  late AnimationController _controller;
40  late Animation<double> _animation;
41 
42  @override
43  void initState() {
44    super.initState();
45    _controller = AnimationController(
46      duration: const Duration(seconds: 2),
47      vsync: this,
48    );
49 
50    _animation = Tween<double>(begin: 0, end: 300).animate(_controller)
51      ..addListener(() {
52        setState(() {});
53      });
54 
55    _controller.forward();
56  }
57 
58  @override
59  void dispose() {
60    _controller.dispose();
61    super.dispose();
62  }
63 
64  @override
65  Widget build(BuildContext context) {
66    return Scaffold(
67      appBar: AppBar(title: const Text('Basic Explicit')),
68      body: Center(
69        child: Container(
70          margin: const EdgeInsets.symmetric(vertical: 10),
71          height: _animation.value,
72          width: _animation.value,
73          child: const FlutterLogo(),
74        ),
75      ),
76    );
77  }
78}
79 
80/// AnimatedWidget pattern - best for reusable animated widgets
81class AnimatedLogo extends AnimatedWidget {
82  const AnimatedLogo({super.key, required Animation<double> animation})
83    : super(listenable: animation);
84 
85  @override
86  Widget build(BuildContext context) {
87    final animation = listenable as Animation<double>;
88    return Center(
89      child: Container(
90        margin: const EdgeInsets.symmetric(vertical: 10),
91        height: animation.value,
92        width: animation.value,
93        child: const FlutterLogo(),
94      ),
95    );
96  }
97}
98 
99class AnimatedWidgetDemo extends StatefulWidget {
100  const AnimatedWidgetDemo({super.key});
101 
102  @override
103  State<AnimatedWidgetDemo> createState() => _AnimatedWidgetDemoState();
104}
105 
106class _AnimatedWidgetDemoState extends State<AnimatedWidgetDemo>
107    with SingleTickerProviderStateMixin {
108  late AnimationController _controller;
109  late Animation<double> _animation;
110 
111  @override
112  void initState() {
113    super.initState();
114    _controller = AnimationController(
115      duration: const Duration(seconds: 2),
116      vsync: this,
117    );
118 
119    _animation = Tween<double>(begin: 0, end: 300).animate(_controller);
120    _controller.forward();
121  }
122 
123  @override
124  void dispose() {
125    _controller.dispose();
126    super.dispose();
127  }
128 
129  @override
130  Widget build(BuildContext context) {
131    return Scaffold(
132      appBar: AppBar(title: const Text('Animated Widget')),
133      body: AnimatedLogo(animation: _animation),
134    );
135  }
136}
137 
138/// AnimatedBuilder pattern - best for complex widgets
139class LogoWidget extends StatelessWidget {
140  const LogoWidget({super.key});
141 
142  @override
143  Widget build(BuildContext context) {
144    return Container(
145      margin: const EdgeInsets.symmetric(vertical: 10),
146      child: const FlutterLogo(),
147    );
148  }
149}
150 
151class GrowTransition extends StatelessWidget {
152  const GrowTransition({
153    required this.child,
154    required this.animation,
155    super.key,
156  });
157 
158  final Widget child;
159  final Animation<double> animation;
160 
161  @override
162  Widget build(BuildContext context) {
163    return Center(
164      child: AnimatedBuilder(
165        animation: animation,
166        builder: (context, child) {
167          return SizedBox(
168            height: animation.value,
169            width: animation.value,
170            child: child,
171          );
172        },
173        child: child,
174      ),
175    );
176  }
177}
178 
179class AnimatedBuilderDemo extends StatefulWidget {
180  const AnimatedBuilderDemo({super.key});
181 
182  @override
183  State<AnimatedBuilderDemo> createState() => _AnimatedBuilderDemoState();
184}
185 
186class _AnimatedBuilderDemoState extends State<AnimatedBuilderDemo>
187    with SingleTickerProviderStateMixin {
188  late AnimationController _controller;
189  late Animation<double> _animation;
190 
191  @override
192  void initState() {
193    super.initState();
194    _controller = AnimationController(
195      duration: const Duration(seconds: 2),
196      vsync: this,
197    );
198 
199    _animation = Tween<double>(begin: 0, end: 300).animate(_controller);
200    _controller.forward();
201  }
202 
203  @override
204  void dispose() {
205    _controller.dispose();
206    super.dispose();
207  }
208 
209  @override
210  Widget build(BuildContext context) {
211    return Scaffold(
212      appBar: AppBar(title: const Text('Animated Builder')),
213      body: GrowTransition(animation: _animation, child: const LogoWidget()),
214    );
215  }
216}
217 
218/// Multiple simultaneous animations with status monitoring
219class MultiPropertyAnimation extends AnimatedWidget {
220  const MultiPropertyAnimation({
221    super.key,
222    required Animation<double> animation,
223  }) : super(listenable: animation);
224 
225  static final _opacityTween = Tween<double>(begin: 0.1, end: 1);
226  static final _sizeTween = Tween<double>(begin: 0, end: 300);
227  static final _colorTween = ColorTween(begin: Colors.red, end: Colors.blue);
228 
229  @override
230  Widget build(BuildContext context) {
231    final animation = listenable as Animation<double>;
232    return Center(
233      child: Opacity(
234        opacity: _opacityTween.evaluate(animation),
235        child: Container(
236          height: _sizeTween.evaluate(animation),
237          width: _sizeTween.evaluate(animation),
238          decoration: BoxDecoration(
239            color: _colorTween.evaluate(animation),
240            borderRadius: BorderRadius.circular(12),
241          ),
242          child: const FlutterLogo(),
243        ),
244      ),
245    );
246  }
247}
248 
249class MultiPropertyDemo extends StatefulWidget {
250  const MultiPropertyDemo({super.key});
251 
252  @override
253  State<MultiPropertyDemo> createState() => _MultiPropertyDemoState();
254}
255 
256class _MultiPropertyDemoState extends State<MultiPropertyDemo>
257    with SingleTickerProviderStateMixin {
258  late AnimationController _controller;
259  late Animation<double> _animation;
260 
261  @override
262  void initState() {
263    super.initState();
264    _controller = AnimationController(
265      duration: const Duration(seconds: 2),
266      vsync: this,
267    );
268 
269    _animation = CurvedAnimation(parent: _controller, curve: Curves.easeIn)
270      ..addStatusListener((status) {
271        if (status == AnimationStatus.completed) {
272          _controller.reverse();
273        } else if (status == AnimationStatus.dismissed) {
274          _controller.forward();
275        }
276      });
277 
278    _controller.forward();
279  }
280 
281  @override
282  void dispose() {
283    _controller.dispose();
284    super.dispose();
285  }
286 
287  @override
288  Widget build(BuildContext context) {
289    return Scaffold(
290      appBar: AppBar(title: const Text('Multi Property')),
291      body: MultiPropertyAnimation(animation: _animation),
292    );
293  }
294}
295 
296/// Main demo widget showing all examples
297class LogoAnimationDemo extends StatelessWidget {
298  const LogoAnimationDemo({super.key});
299 
300  @override
301  Widget build(BuildContext context) {
302    return Scaffold(
303      appBar: AppBar(title: const Text('Explicit Animations')),
304      body: Center(
305        child: Column(
306          mainAxisAlignment: MainAxisAlignment.center,
307          children: [
308            ElevatedButton(
309              onPressed: () => Navigator.of(context).push(
310                MaterialPageRoute<void>(
311                  builder: (context) => const BasicExplicitAnimation(),
312                ),
313              ),
314              child: const Text('Basic Explicit'),
315            ),
316            ElevatedButton(
317              onPressed: () => Navigator.of(context).push(
318                MaterialPageRoute<void>(
319                  builder: (context) => const AnimatedWidgetDemo(),
320                ),
321              ),
322              child: const Text('Animated Widget'),
323            ),
324            ElevatedButton(
325              onPressed: () => Navigator.of(context).push(
326                MaterialPageRoute<void>(
327                  builder: (context) => const AnimatedBuilderDemo(),
328                ),
329              ),
330              child: const Text('Animated Builder'),
331            ),
332            ElevatedButton(
333              onPressed: () => Navigator.of(context).push(
334                MaterialPageRoute<void>(
335                  builder: (context) => const MultiPropertyDemo(),
336                ),
337              ),
338              child: const Text('Multi Property'),
339            ),
340          ],
341        ),
342      ),
343    );
344  }
345}
346