Hero Animation

 import "package:flutter/material.dart";

void main()
{
  runApp(const MyApp());
}
class MyApp extends StatelessWidget
{
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: "Hero Animation",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.grey,
      ),
      home: const HeroAnimation(),
    );
  }
}
class HeroAnimation extends StatelessWidget
{
  const HeroAnimation({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Hero Animation"),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            ListTile(
              leading: Hero(
                tag: "First",
                child: BoxWidget(size: Size(200.0, 200.0),),
              ),
              title: const Text("Tap on the icon to view hero animation transition"),
              onTap: () {
                return gotoDetailsPage(context);
              },
            ),
          ],
        ),
      ),
    );
  }
}
void gotoDetailsPage(BuildContext context)
{
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) {
        return Scaffold(
          appBar: AppBar(
            title: const Text("Second Page"),
            centerTitle: true,
            backgroundColor: Colors.grey,
          ),
          body: Center(
            child: Hero(
              tag: "First",
              child: BoxWidget(size: Size(200.0, 200.0),),
            ),
          ),
        );
      },
    ),
  );
}

class BoxWidget extends StatelessWidget
{
  const BoxWidget({super.key, required this.size});

  final Size size;

  @override
  Widget build(BuildContext context) {
    return Container(
      width: size.width,
      height: size.height,
      color: Colors.blue,
    );
  }
}