Animation - Hero

 Backdrop

Source Code

import 'package:flutter/material.dart';


void main() {
  runApp(  MaterialApp(
    title:" Animation ",
    home:Scaffold(appBar: AppBar(title: Text(' Animation ',),),
      body: Material(
        child: Center(
          child:
          HeroExample()
          ,
        ),
      ) ,
    ),
  ));
}




class HeroExample extends StatelessWidget {
  const HeroExample({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          const SizedBox(
            height: 20.0,
          ),
          ListTile(
            leading: GestureDetector(
              onTap: () => _showSecondPage(context),
              child: const Hero(
                tag: 'my-hero-animation-tag',
                child: CircleAvatar(
                  backgroundImage:NetworkImage('https://raw.githubusercontent.com/sabirshikh/Flutter-Image/main/images/Screenshot%202021-11-15%20132354.png'),

                ),
              ),
            ),
            title: const Text(
                'Tap on the photo to view the animation transition.'),
          ),
        ],
      ),
    );
  }

  void _showSecondPage(BuildContext context) {
    Navigator.of(context).push(
      MaterialPageRoute(
        builder: (ctx) => Scaffold(
          body: Center(
            child: Hero(
              tag: 'my-hero-animation-tag',
              child: Image.network('https://raw.githubusercontent.com/sabirshikh/Flutter-Image/main/images/Screenshot%202021-11-15%20132354.png'),
            ),
          ),
        ),
      ),
    );
  }
}