1import 'package:flutter/material.dart';
2 
3/// Staggered animation example with multiple property animations
4///
5/// This example demonstrates:
6/// - Single AnimationController driving multiple animations
7/// - Interval-based timing for sequential/overlapping animations
8/// - Multiple tweens for different properties
9/// - Status monitoring for animation loops
10 
11void main() => runApp(const StaggeredAnimationApp());
12 
13class StaggeredAnimationApp extends StatelessWidget {
14  const StaggeredAnimationApp({super.key});
15 
16  @override
17  Widget build(BuildContext context) {
18    return MaterialApp(
19      title: 'Staggered Animation',
20      theme: ThemeData(
21        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
22      ),
23      home: const StaggeredDemo(),
24    );
25  }
26}
27 
28/// Staggered animation with fade, scale, and color changes
29class StaggeredAnimation extends StatelessWidget {
30  StaggeredAnimation({super.key, required this.animation});
31 
32  late final Animation<double> opacity = Tween<double>(begin: 0.0, end: 1.0)
33      .animate(
34        CurvedAnimation(
35          parent: animation,
36          curve: const Interval(0.0, 0.1, curve: Curves.ease),
37        ),
38      );
39 
40  late final Animation<double> width = Tween<double>(begin: 50.0, end: 150.0)
41      .animate(
42        CurvedAnimation(
43          parent: animation,
44          curve: const Interval(0.125, 0.25, curve: Curves.ease),
45        ),
46      );
47 
48  late final Animation<double> height = Tween<double>(begin: 50.0, end: 150.0)
49      .animate(
50        CurvedAnimation(
51          parent: animation,
52          curve: const Interval(0.25, 0.375, curve: Curves.ease),
53        ),
54      );
55 
56  late final Animation<BorderRadius?> borderRadius =
57      BorderRadiusTween(
58        begin: BorderRadius.circular(4),
59        end: BorderRadius.circular(75),
60      ).animate(
61        CurvedAnimation(
62          parent: animation,
63          curve: const Interval(0.375, 0.5, curve: Curves.ease),
64        ),
65      );
66 
67  late final Animation<Color?> color =
68      ColorTween(begin: Colors.red, end: Colors.orange).animate(
69        CurvedAnimation(
70          parent: animation,
71          curve: const Interval(0.5, 0.625, curve: Curves.ease),
72        ),
73      );
74 
75  final Animation<double> animation;
76 
77  Widget _buildAnimation(BuildContext context, Widget? child) {
78    return Center(
79      child: Opacity(
80        opacity: opacity.value,
81        child: Container(
82          width: width.value,
83          height: height.value,
84          decoration: BoxDecoration(
85            color: color.value,
86            border: Border.all(color: Colors.indigo[300]!, width: 3),
87            borderRadius: borderRadius.value,
88          ),
89        ),
90      ),
91    );
92  }
93 
94  @override
95  Widget build(BuildContext context) {
96    return AnimatedBuilder(animation: animation, builder: _buildAnimation);
97  }
98}
99 
100class StaggeredDemo extends StatefulWidget {
101  const StaggeredDemo({super.key});
102 
103  @override
104  State<StaggeredDemo> createState() => _StaggeredDemoState();
105}
106 
107class _StaggeredDemoState extends State<StaggeredDemo>
108    with SingleTickerProviderStateMixin {
109  late AnimationController _controller;
110 
111  @override
112  void initState() {
113    super.initState();
114    _controller = AnimationController(
115      duration: const Duration(milliseconds: 2000),
116      vsync: this,
117    );
118  }
119 
120  Future<void> _playAnimation() async {
121    try {
122      await _controller.forward().orCancel;
123      await _controller.reverse().orCancel;
124    } on TickerCanceled {
125      // Animation was canceled
126    }
127  }
128 
129  @override
130  void dispose() {
131    _controller.dispose();
132    super.dispose();
133  }
134 
135  @override
136  Widget build(BuildContext context) {
137    return Scaffold(
138      appBar: AppBar(title: const Text('Staggered Animation')),
139      body: GestureDetector(
140        behavior: HitTestBehavior.opaque,
141        onTap: _playAnimation,
142        child: Center(
143          child: Container(
144            width: 300,
145            height: 300,
146            decoration: BoxDecoration(
147              color: Colors.black.withValues(alpha: 0.1),
148              border: Border.all(color: Colors.black.withValues(alpha: 0.5)),
149            ),
150            child: StaggeredAnimation(animation: _controller.view),
151          ),
152        ),
153      ),
154    );
155  }
156}
157 
158/// Staggered menu animation example
159class StaggeredMenuExample extends StatefulWidget {
160  const StaggeredMenuExample({super.key});
161 
162  @override
163  State<StaggeredMenuExample> createState() => _StaggeredMenuExampleState();
164}
165 
166class _StaggeredMenuExampleState extends State<StaggeredMenuExample>
167    with SingleTickerProviderStateMixin {
168  static const _menuTitles = [
169    'Declarative Style',
170    'Premade Widgets',
171    'Stateful Hot Reload',
172    'Native Performance',
173    'Great Community',
174  ];
175 
176  static const _initialDelayTime = Duration(milliseconds: 50);
177  static const _itemSlideTime = Duration(milliseconds: 250);
178  static const _staggerTime = Duration(milliseconds: 50);
179 
180  late AnimationController _controller;
181 
182  final _animationDuration =
183      _initialDelayTime + (_staggerTime * _menuTitles.length) + _itemSlideTime;
184 
185  @override
186  void initState() {
187    super.initState();
188    _controller = AnimationController(
189      duration: _animationDuration,
190      vsync: this,
191    );
192    _controller.forward();
193  }
194 
195  @override
196  void dispose() {
197    _controller.dispose();
198    super.dispose();
199  }
200 
201  @override
202  Widget build(BuildContext context) {
203    return Scaffold(
204      appBar: AppBar(title: const Text('Staggered Menu')),
205      body: ListView.builder(
206        itemCount: _menuTitles.length,
207        itemBuilder: (context, index) {
208          final start =
209              _initialDelayTime.inMilliseconds.toDouble() +
210              (_staggerTime.inMilliseconds.toDouble() * index);
211          final end = start + _itemSlideTime.inMilliseconds.toDouble();
212          final intervalStart =
213              start / _animationDuration.inMilliseconds.toDouble();
214          final intervalEnd =
215              end / _animationDuration.inMilliseconds.toDouble();
216 
217          final animation = CurvedAnimation(
218            parent: _controller,
219            curve: Interval(intervalStart, intervalEnd, curve: Curves.easeOut),
220          );
221 
222          return AnimatedBuilder(
223            animation: _controller,
224            builder: (context, child) {
225              return SlideTransition(
226                position: Tween<Offset>(
227                  begin: const Offset(1, 0),
228                  end: Offset.zero,
229                ).animate(animation),
230                child: FadeTransition(opacity: animation, child: child),
231              );
232            },
233            child: ListTile(title: Text(_menuTitles[index])),
234          );
235        },
236      ),
237    );
238  }
239}
240