Skip to content
Related Articles

Related Articles

Improve Article
Flutter – PhotoHero Class
  • Difficulty Level : Expert
  • Last Updated : 16 Oct, 2020

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




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()));
}

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.
Want a more fast-paced & competitive environment to learn the fundamentals of Android?
Click here to head to a guide uniquely curated by our experts with the aim to make you industry ready in no time!



My Personal Notes arrow_drop_up
Recommended Articles
Page :