Open In App

Flutter - PhotoHero Class

Last Updated : 04 Mar, 2025
Comments
Improve
Suggest changes
Like Article
Like
Report

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 (i.e. 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:

PhotHeroWidgetTree


Below is a simple example of the PhotoHero animation:

main.dart:

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

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

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,
        foregroundColor: Colors.white,
      ),
      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();
                    },
                  ),
                ),
              );
            }));
          },
        ),
      ),
    );
  }
}

To know more about inkwell , Navigator and Container refer these articles Flutter – InkWell Widget , Routes and Navigator in Flutter and Container class in Flutter

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.

Next Article
Article Tags :

Similar Reads