Hero animation

Animate transitions between screens with Hero.

What is Hero?

Hero provides a smooth transition for a widget shared between two screens. You give the same tag to the Hero on both screens; during a Navigator transition Flutter automatically moves the widget by scaling it up and down.

Hero(
  tag: 'logo',
  child: Image.asset('logo.png'),
)

Hero transition

Hero requires the same tag value on both screens. The child parameter specifies the widget to be moved. During the transition, the widget smoothly moves from its position on the source screen to its position on the target screen.

Exercise Create a Hero widget

In main, create a Hero widget with tag 'logo' and child Text('Logo'), and print its type.

Show example solution

import 'package:flutter/material.dart';

void main() {
  final hero = Hero(
    tag: 'logo',
    child: Text('Logo'),
  );
  print(hero.runtimeType);
}

Test yourself

Which parameter of the Hero widget enables matching across two screens?
- color
- tag
- child
- title
Show answer

tag — Hero widgets must have the same tag value; Flutter matches widgets across two screens based on this tag.

Give Hero a tag

Hero(
  ____: 'avatar',
  child: CircleAvatar(),
)

Show answer

Hero(
  tag: 'avatar',
  child: CircleAvatar(),
)

Hero matches

Hero

Cross-screen transition widget
tag

Matching key
child

Widget being moved
transition

Transition animation

Next lesson: Stagger animation

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies