Hero Animation in Flutter

What is Hero Animation?

Hero Animation in FLutter is a powerful feature that allows for smooth transitions between screens by animating shared elements.

When navigating from one screen to another, the Hero widget animates the transition of a widget from its position on the first screen to its position on the second screen, creating a visually appealing effect. Examples : Amazon app, Google Photos app.

Main 3 Components of Hero Animation

• To implement Hero Animation in your Flutter app, you need to understand the following main components:

1. Shared Widget: This widget is used to define the shared element that will be animated between screens. It requires a unique tag to identify the Hero across different screens.
2. A Shared Tag: The tag is a unique identifier that links the Hero widgets on different screens. Both Hero widgets must have the same tag for the animation to work.
3. Navigation: You need to navigate between screens using Flutter's Navigator class to trigger the Hero animation.

Implementing Hero Animation

• Look at the example that we are implementing Hero Animation.
• We have 2 Screen in this example:

1. Home Screen
2. Login Screen

• Both Screen have one common Shared Widget (Image) with different height property.

// Home Screen
Hero(
  tag: 'logo',
  child: Image.asset(
    'assets/logo.png',
    height: 60.0, // Different height in Home Screen
  ),
);

// Login Screen
Hero(
  tag: 'logo',
  child: Image.asset(
    'assets/logo.png',
    height: 120.0, // Different height in Login Screen
  ),
);

// Navigate to Login Screen
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => LoginScreen()),
);