1import 'package:flutter/material.dart';
2 
3/// Hero animation example for shared element transitions
4///
5/// This example demonstrates:
6/// - Basic hero animation with matching tags
7/// - Custom PhotoHero widget
8/// - Navigation between screens with hero transition
9/// - MaterialRectCenterArcTween for aspect ratio preservation
10 
11void main() => runApp(const HeroAnimationApp());
12 
13class HeroAnimationApp extends StatelessWidget {
14  const HeroAnimationApp({super.key});
15 
16  @override
17  Widget build(BuildContext context) {
18    return MaterialApp(
19      title: 'Hero Animation',
20      theme: ThemeData(
21        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
22      ),
23      home: const GalleryScreen(),
24    );
25  }
26}
27 
28/// Custom hero widget for images
29class PhotoHero extends StatelessWidget {
30  const PhotoHero({
31    super.key,
32    required this.photo,
33    this.onTap,
34    required this.width,
35  });
36 
37  final String photo;
38  final VoidCallback? onTap;
39  final double width;
40 
41  @override
42  Widget build(BuildContext context) {
43    return SizedBox(
44      width: width,
45      child: Hero(
46        tag: photo,
47        child: Material(
48          color: Colors.transparent,
49          child: InkWell(
50            onTap: onTap,
51            child: Image.asset(
52              photo,
53              fit: BoxFit.contain,
54              errorBuilder: (context, error, stackTrace) {
55                return Container(
56                  width: width,
57                  height: width,
58                  color: Colors.grey,
59                  child: const Icon(Icons.broken_image),
60                );
61              },
62            ),
63          ),
64        ),
65      ),
66    );
67  }
68}
69 
70/// Gallery screen showing multiple hero images
71class GalleryScreen extends StatelessWidget {
72  const GalleryScreen({super.key});
73 
74  static const List<String> _photos = [
75    'images/photo1.png',
76    'images/photo2.png',
77    'images/photo3.png',
78  ];
79 
80  @override
81  Widget build(BuildContext context) {
82    return Scaffold(
83      appBar: AppBar(title: const Text('Hero Gallery')),
84      body: GridView.builder(
85        gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
86          crossAxisCount: 2,
87        ),
88        itemCount: _photos.length,
89        itemBuilder: (context, index) {
90          return Padding(
91            padding: const EdgeInsets.all(8.0),
92            child: PhotoHero(
93              photo: _photos[index],
94              width: 100,
95              onTap: () {
96                Navigator.of(context).push(
97                  MaterialPageRoute<void>(
98                    builder: (context) => DetailScreen(photo: _photos[index]),
99                  ),
100                );
101              },
102            ),
103          );
104        },
105      ),
106    );
107  }
108}
109 
110/// Detail screen showing hero image in fullscreen
111class DetailScreen extends StatelessWidget {
112  const DetailScreen({super.key, required this.photo});
113 
114  final String photo;
115 
116  @override
117  Widget build(BuildContext context) {
118    return Scaffold(
119      appBar: AppBar(title: const Text('Detail')),
120      body: Center(
121        child: PhotoHero(
122          photo: photo,
123          width: MediaQuery.of(context).size.width - 32,
124          onTap: () => Navigator.of(context).pop(),
125        ),
126      ),
127    );
128  }
129}
130 
131/// Example with circular hero (using placeholder instead of asset)
132class CircularHeroExample extends StatefulWidget {
133  const CircularHeroExample({super.key});
134 
135  @override
136  State<CircularHeroExample> createState() => _CircularHeroExampleState();
137}
138 
139class _CircularHeroExampleState extends State<CircularHeroExample> {
140  @override
141  Widget build(BuildContext context) {
142    return Scaffold(
143      appBar: AppBar(title: const Text('Circular Hero')),
144      body: ListView(
145        children: List.generate(3, (index) {
146          final tag = 'circle-$index';
147          return Center(
148            child: Padding(
149              padding: const EdgeInsets.all(16.0),
150              child: Hero(
151                tag: tag,
152                child: Material(
153                  color: Colors.transparent,
154                  child: InkWell(
155                    onTap: () {
156                      Navigator.of(context).push(
157                        MaterialPageRoute<void>(
158                          builder: (context) =>
159                              CircularDetailScreen(tag: tag, index: index),
160                        ),
161                      );
162                    },
163                    child: Container(
164                      width: 80,
165                      height: 80,
166                      decoration: const BoxDecoration(
167                        color: Colors.blue,
168                        shape: BoxShape.circle,
169                      ),
170                    ),
171                  ),
172                ),
173              ),
174            ),
175          );
176        }),
177      ),
178    );
179  }
180}
181 
182class CircularDetailScreen extends StatelessWidget {
183  const CircularDetailScreen({
184    super.key,
185    required this.tag,
186    required this.index,
187  });
188 
189  final String tag;
190  final int index;
191 
192  @override
193  Widget build(BuildContext context) {
194    return Scaffold(
195      appBar: AppBar(title: const Text('Circular Detail')),
196      body: Center(
197        child: Hero(
198          tag: tag,
199          child: Material(
200            color: Colors.transparent,
201            child: InkWell(
202              onTap: () => Navigator.of(context).pop(),
203              child: Container(
204                width: 300,
205                height: 300,
206                decoration: BoxDecoration(
207                  color: Colors.blue.withValues(alpha: 0.8),
208                  borderRadius: BorderRadius.circular(150),
209                ),
210                child: Center(
211                  child: Text(
212                    'Image $index',
213                    style: const TextStyle(color: Colors.white, fontSize: 24),
214                  ),
215                ),
216              ),
217            ),
218          ),
219        ),
220      ),
221    );
222  }
223}
224