Flutter – PhotoHero Class

In Flutter, a Hero Widget is used to create a hero animation. A hero in this context refers to a widget that moves in between screens. This is one of the most fundamental types of animation used in the application, especially if the app deals with media like images. Simply put, a hero animation is when a hero flies from one screen to another.

The PhotoHero class is an essential element in Hero Animation to move photos from one route (ie, page) to another.

This article explores the process of building PhotoHero animations using a simple app. To build a Hero animation, the following steps need to be followed:

• Use MaterialPageRoute to move the image from one route to another
• Use the Material Design Motion to specify the motion of the image during the transition
• Through all the above into a simple Flutter app structure.

A standard Photo hero class controls the following properties of the image:

1. Hero
2. Size of the hero
3. The behavior of the hero when tapped.

The below diagram depicts the same:

Below is a simple example of the PhotoHero animation:

Dart

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

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

  final String photo;
  final VoidCallback onTap;
  final double width;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: width,
      child: Hero(
        tag: photo,
        child: Material(
          color: Colors.transparent,
          child: InkWell(
            onTap: onTap,
            child: Image.asset(
              photo,
              fit: BoxFit.contain,
            ),
          ),
        ),
      ),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    timeDilation = 10.0;

    return Scaffold(
      appBar: AppBar(
        title: const Text('GeeksForGeeks'),
        backgroundColor: Colors.green,
      ),
      body: Center(
        child: PhotoHero(
          photo: 'assets/images/aquaman.png',
          width: 300.0,
          onTap: () {
            Navigator.of(context)
                .push(MaterialPageRoute<void>(builder: (BuildContext context) {
              return Scaffold(
                appBar: AppBar(
                  title: const Text('Aquaman transition'),
                  backgroundColor: Colors.green,
                ),
                body: Container(
                  // background of 2nd route
                  color: Colors.purple,
                  padding: const EdgeInsets.all(16.0),
                  alignment: Alignment.topLeft,
                  child: PhotoHero(
                    photo: 'assets/images/aquaman.png',
                    width: 100.0,
                    onTap: () {
                      Navigator.of(context).pop();
                    },
                  ),
                ),
              );
            }));
          },
        ),
      ),
    );
  }
}

void main() {
  runApp(const MaterialApp(home: HeroAnimation()));
}

Output:

Let’s analyze the above example:

• On tapping the hero image inside the Inkwell widget the MaterialPageRoute creates a destination route. As the destination route is pushed using the Navigator, it triggers the animation.
• The container with the image is then pushed to the top left of the app just below the appbar.
• The tapping the same Hero again the materialPageRoute pushes back to its original position using the same route and opposite animation motion.
• The time delay is used to slow the animation for better viewing.