Hero Animation Example

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hero Animation Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  final List<String> imageUrls = [
    'https://images.unsplash.com/photo-1705736370057-719aaba39839?w=500&auto=format&fit=crop&q=60&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Mnx8ZWZmaWxlJTIwdG93ZXJ8ZW58MHx8MHx8fDA%3D',
    'https://images.unsplash.com/photo-1580274455191-1c62238fa333?q=80&w=1664&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
    'https://images.unsplash.com/photo-1515091943-9d5c0ad475af?q=80&w=1535&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D',
  ];
  
  final List<String> imageDescriptions = [
    'Eiffel Tower Paris, France.',
    'GT3RS PORSCHE 911',
    'Humayun Tomb, New Delhi',
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Screen'),
      ),
      body: Stack(
        children: [
          Column(
            children: [
              Expanded(
                child: Center(
            child: Image.network(
              'https://framerusercontent.com/images/7FsQhboSka0LlvUnxIT89jRvzG4.gif', // Replace with your clipart URL
              width: 200,
              height: 200,
              fit: BoxFit.contain,
            ),
          ), // Empty space to push images to the bottom
              ),
              Text(
                'Tap on the image to see the details',
                style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
              ),
              Container(
                height: 150, // Set the height you want for the image row
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: List.generate(imageUrls.length, (index) {
                    return GestureDetector(
                      onTap: () {
                        Navigator.push(
                          context,
                          MaterialPageRoute(
                            builder: (context) => DetailScreen(
                              imageUrl: imageUrls[index],
                              description: imageDescriptions[index],
                              tag: 'imageHero$index',
                            ),
                          ),
                        );
                      },
                      child: Hero(
                        tag: 'imageHero$index',
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Image.network(
                            imageUrls[index],
                            height: 100.0,
                          ),
                        ),
                      ),
                    );
                  }),
                ),
              ),
            ],
          ),
          
        ],
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  final String imageUrl;
  final String description;
  final String tag;

  DetailScreen({
    required this.imageUrl,
    required this.description,
    required this.tag,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Detail Screen'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            GestureDetector(
              onTap: () {
                Navigator.pop(context);
              },
              child: Hero(
                tag: tag,
                child: Container(
                  width: 300,
                  height: 400,
                  child: Image.network(
                    imageUrl,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
            ),
            SizedBox(height: 20),
            Padding(
              padding: const EdgeInsets.all(16.0),
              child: Text(
                description,
                style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
                textAlign: TextAlign.center,
              ),
            ),
          ],
        ),
      ),
    );
  }
}