Bölüm 8 — Konu 37: Hero Animasyonları

Konu 35-36'da tek bir ekran içindeki animasyonları öğrendik. Bu ders, iki ekran arasındaki en tanıdık geçiş animasyonuna odaklanıyor: bir listedeki küçük bir resmin, detay ekranında büyük haline sorunsuzca dönüşmesi. Bunu muhtemelen Instagram, e-ticaret uygulamaları gibi pek çok yerde görmüşsündür.

#Sorunu Tanımlayalım

Bölüm 3 Konu 14'te öğrendiğimiz Navigator.push()'u hatırla — bir ekrandan diğerine geçerken, yeni ekran genelde sağdan kayarak ya da belirir. Ama bir ürün resmi gibi ortak bir öğe varsa, kullanıcı deneyimi açısından o öğenin aniden kaybolup başka bir yerde aniden belirmesi yerine, akıcı bir şekilde büyüyerek/hareket ederek yeni konumuna gitmesi çok daha doğal hissettirir. İşte "Hero animasyonu" tam olarak bunu yapar.

#Hero Widget'ı — Tek Bir Kural: Aynı tag

// Liste ekranı
class UrunListesi extends StatelessWidget {
  const UrunListesi({super.key});

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: [
        GestureDetector(
          onTap: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => const UrunDetayEkrani()),
            );
          },
          child: Hero(
            tag: 'urun-resmi-1', // ANAHTAR — iki ekranda da AYNI olmalı
            child: Image.asset('assets/urun1.png', width: 80, height: 80),
          ),
        ),
      ],
    );
  }
}

// Detay ekranı
class UrunDetayEkrani extends StatelessWidget {
  const UrunDetayEkrani({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Hero(
          tag: 'urun-resmi-1', // AYNI tag!
          child: Image.asset('assets/urun1.png', width: 300, height: 300),
        ),
      ),
    );
  }
}

Bütün mekanizma, tek bir kurala dayanır: Aynı tag değerine sahip iki Hero widget'ı, farklı ekranlarda (route'larda) bulunuyorsa, Flutter, geçiş sırasında otomatik olarak ilkinin konumundan/boyutundan ikincisinin konumuna/boyutuna animasyonlu bir geçiş oluşturur. Sen width: 80 → width: 300 değişimini elle animasyonlamıyorsun — Flutter, Konu 36'da öğrendiğimiz AnimationController/Tween altyapısını arka planda kendisi kurup çalıştırıyor.

tag neden String yerine Object tipinde de olabilir? Gerçek uygulamalarda genelde 'urun-resmi-1' gibi sabit bir string yerine, ürünün kendi ID'sini kullanırsın (tag: urun.id) — bu sayede her ürün için otomatik olarak benzersiz bir tag üretmiş olursun, elle her birine farklı string yazmana gerek kalmaz.

Hero(
  tag: urun.id, // dinamik, her ürün için otomatik benzersiz
  child: Image.network(urun.resimUrl),
)

#Neden Sadece "Konum ve Boyut"? İçerik de Değişebilir mi?

Hero(
  tag: 'profil-resmi',
  child: CircleAvatar(radius: 30, backgroundImage: AssetImage('assets/profil.png')),
)
// ... diğer ekranda
Hero(
  tag: 'profil-resmi',
  child: Container(
    decoration: BoxDecoration(shape: BoxShape.circle, border: Border.all(width: 4)),
    child: CircleAvatar(radius: 100, backgroundImage: AssetImage('assets/profil.png')),
  ),
)

Hero widget'ının içeriği (child) iki ekranda birebir aynı olmak zorunda değil — burada ikinci ekranda bir border eklendi. Flutter, geçiş sırasında iki child'ı da kullanarak (varsayılan olarak hedef ekranın child'ına geçiş yaparak) bir animasyon oluşturur. Ama pratik tavsiye: en akıcı sonuç için, iki taraftaki içeriği mümkün olduğunca benzer tutmak (örn. ikisi de aynı resim, sadece boyutu farklı) en doğal görüneni verir — çok farklı iki widget arasında Hero denemek garip sonuçlar üretebilir.

#flightShuttleBuilder — Geçiş Sırasındaki Görünümü Özelleştirme

Hero(
  tag: 'urun-resmi-1',
  flightShuttleBuilder: (
    flightContext,
    animation,
    flightDirection,
    fromHeroContext,
    toHeroContext,
  ) {
    return Material(
      color: Colors.transparent,
      child: toHeroContext.widget, // geçiş sırasında hedef widget'ı göster
    );
  },
  child: Image.asset('assets/urun1.png'),
)

Varsayılan davranış çoğu zaman yeterlidir, ama ileri bir özelleştirme olarak, geçiş sırasında (iki ekran arası "uçuş" anında) tam olarak neyin görüneceğini flightShuttleBuilder ile kontrol edebilirsin. animation parametresi, Konu 36'da öğrendiğimiz Animation<double> tipinde — geçişin o anki ilerleme durumunu (0.0–1.0) verir.

#Hero, Neyle Birlikte Çalışır?

Hero animasyonu, sadece Navigator.push()/pop() gibi bir route geçişi sırasında tetiklenir — aynı ekran içinde, setState() ile bir widget'ı büyütmek istiyorsan, bu Hero'nun işi değil, Konu 35-36'da öğrendiğimiz implicit/explicit animasyonların işidir. Bölüm 7'de öğrendiğimiz go_router ile de sorunsuz çalışır — GoRoute'un builder'ı ile açılan her ekran, standart bir MaterialPageRoute gibi davranır, dolayısıyla Hero mekanizması aynen çalışmaya devam eder.

#Yaygın Bir Hata — Aynı Ekranda İki Aynı tag

// ❌ HATA — aynı ekranda AYNI tag'e sahip iki Hero
ListView(
  children: [
    Hero(tag: 'urun', child: Image.asset('assets/a.png')),
    Hero(tag: 'urun', child: Image.asset('assets/b.png')), // ÇAKIŞMA!
  ],
)

Bir ListView.builder ile ürün listesi oluşturuyorsan ve her satıra sabit bir tag ('urun') verirsen, Flutter hangi Hero'nun hangisiyle eşleşeceğini bilemez ve çalışma zamanında hata verir. Bu yüzden yukarıda vurguladığımız gibi, her öğe için benzersiz bir tag (genelde ürünün ID'si) kullanmak zorunludur — sabit bir string sadece tek bir Hero'nun olduğu ekranlarda güvenlidir.

#🎯 Bu Dersten Çıkarılması Gerekenler

• Hero, iki farklı ekran (route) arasında, aynı tag'e sahip widget'lar arasında otomatik bir geçiş animasyonu oluşturur.
• Mekanizma sadece Navigator.push()/pop() (veya go_router gibi bunun üzerine kurulu araçlar) sırasında tetiklenir — aynı ekran içi büyütme/küçültme için implicit/explicit animasyonlar kullanılır.
• tag, listelerde genelde dinamik olmalıdır (örn. urun.id) — sabit bir tag, aynı ekranda birden fazla Hero varsa çakışma hatası verir.
• İki taraftaki child birebir aynı olmak zorunda değil, ama en akıcı sonuç için benzer tutulması önerilir.
• flightShuttleBuilder, geçiş anındaki görünümü özelleştirmek için kullanılan ileri bir seçenektir.

#📝 Ödevler

• [ ] Bir ListView.builder ile en az 5 ürünlük bir liste yap, her ürüne benzersiz bir Hero tag'i (ürün ID'si) ver, tıklandığında detay ekranına Hero animasyonuyla geç.
• [ ] Bilerek iki farklı öğeye aynı sabit tag'i ver, Flutter'ın verdiği hatayı gözlemle ve nedenini kendi cümlelerinle açıkla.
• [ ] Detay ekranındaki Hero'nun child'ını, liste ekranındakinden görsel olarak biraz farklı yap (örn. bir border ekle), geçişin nasıl göründüğünü gözlemle.
• [ ] go_router (Bölüm 7 Konu 30) kullanan bir navigasyon yapısında Hero animasyonunun sorunsuz çalıştığını doğrula.

Sıradaki konu: Bölüm 8 — Konu 38: CustomPainter / Canvas