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:



PhotHeroWidgetTree

Below is a simple example of the PhotoHero animation:

Dart

filter_none

edit
close

play_arrow

link
brightness_4
code

import 'package:flutter/material.dart';
import 'package:flutter/scheduler.dart' show timeDilation;
  
class PhotoHero extends StatelessWidget {
  const PhotoHero({ Key key, this.photo, this.onTap, this.width }) : super(key: key);
  
  final String photo;
  final VoidCallback onTap;
  final double width;
  
  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 {
  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(MaterialApp(home: HeroAnimation()));
}

chevron_right


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.



My Personal Notes arrow_drop_up


If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.