Hero animation
- Flutter course
- Advanced
- Lesson 58/69
- 4 min
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.
Practice Create a Hero widget
In main, create a Hero widget with tag 'logo' and child Text('Logo'), and print its type.
Starter code
import 'package:flutter/material.dart';
void main() {
// tag 'logo' ve child Text('Logo') olan Hero oluştur ve tipini yazdır
}Sample solution
import 'package:flutter/material.dart';
void main() {
final hero = Hero(
tag: 'logo',
child: Text('Logo'),
);
print(hero.runtimeType);
}Expected output
Hero
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 Which parameter of the Hero widget enables matching across two screens?
- color
- tag Correct answer
- child
- title
Explanation: Hero widgets must have the same tag value; Flutter matches widgets across two screens based on this tag.
2 Give Hero a tag
Hero(
____: 'avatar',
child: CircleAvatar(),
)Hero(
tag: 'avatar',
child: CircleAvatar(),
)Explanation: To match Hero widgets, the same value is given to the tag parameter; key or id are not used.
3 Hero matches
| Term | Meaning |
|---|---|
Hero |
Cross-screen transition widget |
tag |
Matching key |
child |
Widget being moved |
transition |
Transition animation |