Hero animasyonu
- Flutter kursu
- İleri seviye
- Ders 58/69
- 4 dk
Hero ile ekranlar arası geçiş animasyonu yapmayı öğrenirsin.
Hero nedir?
Hero, iki ekran arasında paylaşılan bir widget'ın yumuşak geçişini sağlar. Her iki ekrandaki Hero'ya aynı tag verirsin; Navigator geçişinde Flutter otomatik olarak widget'ı büyütüp küçülterek taşır.
Hero(
tag: 'logo',
child: Image.asset('logo.png'),
)Hero transition
Hero, her iki ekrandaki tag değerinin aynı olmasına dikkat eder. child parametresi taşınacak widget'ı belirler. Geçiş sırasında widget, başlangıç ekranındaki konumdan hedef ekrandaki konuma yumuşakça hareket eder.
Uygulama Hero widget'ı oluştur
main içinde tag'i 'logo' ve child'ı Text('Logo') olan bir Hero widget'ı oluştur ve tipini yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
void main() {
// tag 'logo' ve child Text('Logo') olan Hero oluştur ve tipini yazdır
}Örnek çözüm
import 'package:flutter/material.dart';
void main() {
final hero = Hero(
tag: 'logo',
child: Text('Logo'),
);
print(hero.runtimeType);
}Beklenen çıktı
Hero
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 Hero widget'ında iki ekran arası eşleşmeyi sağlayan parametre hangisidir?
- color
- tag Doğru cevap
- child
- title
Açıklama: Hero'ların tag değerleri aynı olmalıdır; Flutter bu tag'e göre iki ekrandaki widget'ı eşleştirir.
2 Hero'ya tag ver
Hero(
____: 'avatar',
child: CircleAvatar(),
)Hero(
tag: 'avatar',
child: CircleAvatar(),
)Açıklama: Hero'ların eşleşmesi için tag parametresine aynı değer verilir; key veya id kullanılmaz.
3 Hero eşleşmeleri
| Kavram | Anlamı |
|---|---|
Hero |
Ekranlar arası geçiş widget'ı |
tag |
Eşleştirme anahtarı |
child |
Taşınan widget |
transition |
Geçiş animasyonu |