To make the animations look good, it's critical that the widget tree for the hero in both locations be essentially identical. The widget of the target is, by default, used to do the transition: when going from route A to route B, route B's hero's widget is placed over route A's hero's widget. If a flightShuttleBuilder is supplied, its output widget is shown during the flight transition instead.

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart' show timeDilation;

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(primaryColor: Colors.white),
      home: new HeroAnimation(),
    );
  }
}

class HeroAnimation extends StatelessWidget {
  Widget build(BuildContext context) {
    timeDilation = 4.0;
    return Scaffold(
      appBar: AppBar(
        title: const Text('Screen 1'),
      ),
      body: Container(
        child: PhotoHero(
          photo:
          'https://www.emanprague.com/en/wp-content/uploads/2018/05/flutter_eman_blog.png',
          width: 400.0,
          height: 500.0,
          fit: BoxFit.cover,
          onTap: () {
            Navigator.of(context).push(MaterialPageRoute<Null>(
              builder: (BuildContext context) {
                return Scaffold(
                  appBar: AppBar(
                    title: const Text('Screen 2'),
                  ),
                  body: Center(
                    child: PhotoHero(
                      photo:
                      'https://www.emanprague.com/en/wp-content/uploads/2018/05/flutter_eman_blog.png',
                      fit: BoxFit.contain,
                      onTap: () {
                        Navigator.of(context).pop();
                      },
                    ),
                  ));
              },
              fullscreenDialog: true));
          },
        ),
      ),
    );
  }
}

class PhotoHero extends StatelessWidget {
  const PhotoHero(
    {Key key, this.photo, this.onTap, this.width, this.height, this.fit})
    : super(key: key);

  final String photo;
  final VoidCallback onTap;
  final double width;
  final double height;
  final BoxFit fit;

  Widget build(BuildContext context) {
    return SizedBox(
      width: width,
      height: height,
      child: Hero(
        flightShuttleBuilder: (
            BuildContext flightContext,
            Animation<double> animation,
            HeroFlightDirection flightDirection,
            BuildContext fromHeroContext,
            BuildContext toHeroContext,
          ) {
          final Hero hero = flightDirection == HeroFlightDirection.push ? fromHeroContext.widget : toHeroContext.widget;
          return hero.child;
        },
        tag: photo,
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: onTap,
            child: Image.network(
              photo,
              fit: fit,
            ),
          ),
        ),
      ),
    );
  }
}