Hero Animated

 Hero Animated|Click on image and view:

Video:

Code:

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';

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

class MyApp extends StatelessWidget {
  @override  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HeroAnimation(),
    );
  }
}

class HeroAnimation extends StatefulWidget {
  @override  _HeroAnimationState createState() => _HeroAnimationState();
}

class _HeroAnimationState extends State<HeroAnimation> {
  Widget _img1() {
    return Container(
      child: CircleAvatar(
        radius: 32.0,
        backgroundImage: AssetImage("images/logo.jpg"),
      ),
    );
  }

  Widget _img2() {
    return Container(
      padding: EdgeInsets.all(2.0),
      child: CircleAvatar(
        radius: 32.0,
        backgroundImage: AssetImage("images/p1.jpg"),
      ),
    );
  }

  Widget _img3() {
    return Container(
      padding: EdgeInsets.all(2.0),
      child: CircleAvatar(
        radius: 32.0,
        backgroundImage: AssetImage("images/p2.jpg"),
      ),
    );
  }

  Widget _img4() {
    return Container(
      padding: EdgeInsets.all(2.0),
      child: CircleAvatar(
        radius: 32.0,
        backgroundImage: AssetImage("images/p3.jpg"),
      ),
    );
  }

  Widget _viewpage1() {
    return Container(
      width: 370,
      height: 380,
      child: Image.asset("images/logo.jpg"),
    );
  }

  Widget _viewpage2() {
    return Container(
      width: 460,
      height: 480,
      child: Image.asset("images/p1.jpg"),
    );
  }

  Widget _viewpage3() {
    return Container(
      width: 460,
      height: 480,
      child: Image.asset("images/p2.jpg"),
    );
  }

  Widget _viewpage4() {
    return Container(
      width: 460,
      height: 480,
      child: Image.asset("images/p3.jpg"),
    );
  }

  @override  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Hero Animated"),
        backgroundColor: Colors.deepOrange,
      ),
      backgroundColor: Colors.blueGrey,
      body: buildDemoWidget(context),
    );
  }

  Widget buildDemoWidget(BuildContext context) {
    return Center(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          SizedBox(
            height: 22.0,
          ),
          ListTile(
            leading: GestureDetector(
              child: Hero(
                tag: 'hero1',
                child: _img1(),
              ),
              onTap: () => _gotoDetailsPage1(context),
            ),
            title: Text(
              'Click on Logo Image and View.',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
              ),
            ),
          ),
          ListTile(
            leading: GestureDetector(
              child: Hero(
                tag: 'hero2',
                child: _img2(),
              ),
              onTap: () => _gotoDetailsPage2(context),
            ),
            title: Text(
              'Click on Home Image and View.',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
              ),
            ),
          ),
          ListTile(
            leading: GestureDetector(
              child: Hero(
                tag: 'hero3',
                child: _img3(),
              ),
              onTap: () => _gotoDetailsPage3(context),
            ),
            title: Text(
              'Click on Video Image and View.',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
              ),
            ),
          ),
          ListTile(
            leading: GestureDetector(
              child: Hero(
                tag: 'hero4',
                child: _img4(),
              ),
              onTap: () => _gotoDetailsPage4(context),
            ),
            title: Text(
              'Click on Home About and View.',
              style: TextStyle(
                color: Colors.white,
                fontSize: 20,
              ),
            ),
          ),
        ],
      ),
    );
  }

  void _gotoDetailsPage1(BuildContext context) {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (ctx) => Scaffold(
        backgroundColor: Colors.pinkAccent,
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Hero(
                tag: 'hero1',
                child: _viewpage1(),
              ),
              Text(
                'This is a my channel Logo.',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 25.0,
                ),
              ),
            ],
          ),
        ),
      ),
    ));
  }

  void _gotoDetailsPage2(BuildContext context) {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (ctx) => Scaffold(
        backgroundColor: Colors.pinkAccent,
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Hero(
                tag: 'hero2',
                child: _viewpage2(),
              ),
              Text(
                'This is a my channel Home page.',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 25.0,
                ),
              ),
            ],
          ),
        ),
      ),
    ));
  }

  void _gotoDetailsPage3(BuildContext context) {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (ctx) => Scaffold(
        backgroundColor: Colors.pinkAccent,
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Hero(
                tag: 'hero3',
                child: _viewpage3(),
              ),
              Text(
                'This is a my channel Video page.',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 25.0,
                ),
              ),
            ],
          ),
        ),
      ),
    ));
  }

  void _gotoDetailsPage4(BuildContext context) {
    Navigator.of(context).push(MaterialPageRoute(
      builder: (ctx) => Scaffold(
        backgroundColor: Colors.pinkAccent,
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: <Widget>[
              Hero(
                tag: 'hero4',
                child: _viewpage4(),
              ),
              Text(
                'This is a my channel About page.',
                style: TextStyle(
                  color: Colors.white,
                  fontSize: 25.0,
                ),
              ),
            ],
          ),
        ),
      ),
    ));
  }
}