Summary - Advanced animation
- Flutter course
- Advanced
- Lesson 60/69
- 4 min
Combine AnimationController and Hero for a transition.
Combining AnimationController and Hero
During a screen transition handled by Hero, you can run an additional animation in the background with AnimationController. While Hero moves the widget via its tag, the controller can drive a size change via a Tween or a direct value.
Hero(
tag: 'photo',
child: Container(
width: 50 + ctrl.value * 50,
height: 50,
),
)Practice Hero and AnimationController together
Define the _EmptyVsync class. In main, create an AnimationController named ctrl (vsync: _EmptyVsync(), duration 1 second). Also create a Hero widget with tag 'photo' and child Container(width: 50), and print the Hero's type.
Starter code
import 'package:flutter/material.dart';
// _EmptyVsync sınıfını tanımla (TickerProvider uygular)
void main() {
// ctrl ve tag 'photo' olan Hero oluştur, hero tipini yazdır
}Sample solution
import 'package:flutter/material.dart';
class _EmptyVsync implements TickerProvider {
@override
Ticker createTicker(TickerCallback onTick) => Ticker(onTick);
}
void main() {
final ctrl = AnimationController(
vsync: _EmptyVsync(),
duration: Duration(seconds: 1),
);
final hero = Hero(
tag: 'photo',
child: Container(width: 50),
);
print(hero.runtimeType);
ctrl.dispose();
}Expected output
Hero
Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What do you get by using Hero and AnimationController together?
- Widget counter
- Additional animation during screen transition Correct answer
- Only text color
- Memory cleanup
Explanation: While Hero manages the screen transition, AnimationController can run sub-animations (size, color, etc.); together they produce rich transitions.
2 Add the duration parameter
final ctrl = AnimationController(
vsync: this,
____: const Duration(seconds: 2),
);final ctrl = AnimationController(
vsync: this,
duration: const Duration(seconds: 2),
);Explanation: The duration of AnimationController is set by passing a Duration object to the duration parameter.
3 Animation combination matches
| Term | Meaning |
|---|---|
AnimationController |
Duration and progress control |
Hero |
Cross-screen widget movement |
Tween |
Intermediate value generator |
tag |
Value that matches Heroes |