Hero Animation

 import "package:flutter/material.dart";

import "package:practice/detail_page.dart";

void main()
{
  runApp(const MyApp());
}
class MyApp extends StatelessWidget
{
  const MyApp({super.key});
  @override
  Widget build(BuildContext context)
  {
    return MaterialApp(
      title: "Hello Flutter",
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const OtherState(),
    );
  }
}

class OtherState extends StatelessWidget
{
  const OtherState({super.key});

  @override
  Widget build(BuildContext context)
  {
    return Scaffold(
      drawer: const Drawer(),
      appBar: AppBar(
        title: const Text("Flutter Hero Animation, (First Page)",
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: Container(
        /*color: Colors.blue.shade100,*/
        child: Center(
          child: InkWell(
            onTap: (){
              Navigator.push(
                  context,
              MaterialPageRoute(
                  builder: (context) {
                    return const DetailPage();
                  }));
            },
            child: Hero(
              tag: "background",/*both "Hero" widgets must have the same tag where we want to apply "Hero" widget*/
              child: Image.asset("assets/images/google_icon.png", width: 150, height: 150,),
            ),
          ),
        ),
      ),
    );
  }
}

import "package:flutter/material.dart";
import "package:practice/animation_hero.dart";

class DetailPage extends StatelessWidget
{
  const DetailPage({super.key});

  @override
  Widget build(BuildContext context)
  {
    return Scaffold(
      appBar: AppBar(
        title: const Text("Hello Hero Animation, (Second Page)",
          style: TextStyle(fontWeight: FontWeight.bold),
        ),
        centerTitle: true,
        backgroundColor: Colors.grey,
      ),
      body: Center(
        child: Container(
          /*color: Colors.blue.shade100,*/
          child: InkWell(
            onTap: (){
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context){
                    return const OtherState();
                  },
                ),
              );
            },
            child: Hero(
              tag: "background",/*both "Hero" widgets must have the same tag where we want to apply "Hero" widget*/
              child: Image.asset("assets/images/google_icon.png"),
            ),
          ),
        ),
      ),
    );
  }
}