Bölüm 8 — Konu 35: Implicit Animasyonlar

Bölüm 7'de mimariyi sağlamlaştırdık — Bölüm 8'de işin görsel tarafına, animasyonlara giriyoruz. Bu bölümü iki gruba ayıracağız: implicit (örtük, bu derste) ve explicit (açık, Konu 36'da) animasyonlar. Aradaki farkı baştan netleştirelim çünkü bu, bölümün tamamının zihinsel çerçevesi.

#Implicit vs Explicit — Temel Ayrım

Implicit animasyon: Sadece hedef değeri değiştirirsin (width: 100 → width: 200), widget kendi kendine aradaki geçişi animasyonlu şekilde yapar. Sen bir AnimationController, bir Tween yönetmezsin — Flutter senin için hallediyor.

Explicit animasyon: Animasyonun her aşamasını (süre, eğri, ne zaman başlayıp durduğu) sen kontrol edersin — bir AnimationController ile (Konu 36'da göreceğiz).

Analoji: Implicit animasyon, Dart Bölüm 5'te öğrendiğimiz yüksek seviye koleksiyon metodlarına (.map(), .where()) benzer — "ne istediğini" söylersin, "nasıl yapılacağını" Flutter halleder. Explicit animasyon ise, aynı işi elle bir for döngüsüyle yazmak gibidir — daha fazla kontrol, daha fazla kod.

#AnimatedContainer — En Sık Kullanılan Implicit Widget

class AnimasyonluKutu extends StatefulWidget {
  const AnimasyonluKutu({super.key});

  @override
  State<AnimasyonluKutu> createState() => _AnimasyonluKutuState();
}

class _AnimasyonluKutuState extends State<AnimasyonluKutu> {
  bool _buyukMu = false;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        setState(() {
          _buyukMu = !_buyukMu; // Bölüm 2 Konu 6 — setState ile rebuild tetikleme
        });
      },
      child: AnimatedContainer(
        duration: const Duration(milliseconds: 300),
        curve: Curves.easeInOut,
        width: _buyukMu ? 200 : 100,
        height: _buyukMu ? 200 : 100,
        decoration: BoxDecoration(
          color: _buyukMu ? Colors.indigo : Colors.blue,
          borderRadius: BorderRadius.circular(_buyukMu ? 40 : 8),
        ),
      ),
    );
  }
}

Nasıl çalıştığını parça parça açalım:

• duration: const Duration(milliseconds: 300) — bu, geçişin ne kadar süreceğini belirtir (Dart Bölüm 1'de öğrendiğimiz Duration sınıfı).
• curve: Curves.easeInOut — animasyonun hızlanma/yavaşlama karakteri. Curves, Flutter'ın hazır sunduğu bir dizi matematiksel eğridir (linear sabit hız, easeIn yavaş başlar hızlanır, bounceOut sekerek biter, vb.). Bunu birazdan detaylandıracağız.
• width/height/decoration — normal bir Container'daki (Bölüm 2 Konu 7) parametrelerin aynısı! Fark şu: AnimatedContainer, bu değerlerden biri değiştiğinde (burada _buyukMu setState ile değiştiğinde), yeni değere anında zıplamak yerine, duration boyunca kademeli olarak geçiş yapar.

Kritik zihinsel model: Sen setState() içinde hedef değeri değiştiriyorsun (_buyukMu = !_buyukMu), AnimatedContainer ise eski değerden yeni değere giden ara kareleri kendisi hesaplayıp çiziyor. Bu, Bölüm 2'de öğrendiğimiz "anında yeniden çizim" modelinden farklı — burada widget, birden fazla frame boyunca kendi kendini günceller.

#Diğer Yaygın Animated* Widget'lar

// Görünürlük/saydamlık
AnimatedOpacity(
  duration: const Duration(milliseconds: 200),
  opacity: _gorunurMu ? 1.0 : 0.0,
  child: const Icon(Icons.star),
)

// Konumlandırma (bir Stack içinde)
AnimatedPositioned(
  duration: const Duration(milliseconds: 400),
  left: _solaMi ? 0 : 200,
  top: 50,
  child: const FlutterLogo(),
)

// Metin stili
AnimatedDefaultTextStyle(
  duration: const Duration(milliseconds: 300),
  style: TextStyle(
    fontSize: _buyukMu ? 32 : 16,
    color: _buyukMu ? Colors.red : Colors.black,
  ),
  child: const Text('Merhaba'),
)

// İçerik değişimi (fade + boyut geçişi ile)
AnimatedSwitcher(
  duration: const Duration(milliseconds: 250),
  child: Text(
    '$_sayac',
    key: ValueKey<int>(_sayac), // ÖNEMLİ — birazdan açıklayacağız
    style: const TextStyle(fontSize: 48),
  ),
)

Deseni fark ettin mi? *Her `Animatedwidget, normal bir widget'ın (Container,Opacity,Positioned,DefaultTextStyle`) "değer değiştiğinde otomatik geçiş yapan" versiyonudur. Bu, Bölüm 3 Konu 13'te öğrendiğimiz kompozisyon prensibinin** Flutter'ın kendi API tasarımında tutarlı şekilde uygulandığını gösteriyor — aynı kalıp, düzinelerce widget için tekrarlanıyor.

#AnimatedSwitcher ve key — Neden Gerekli?

AnimatedSwitcher'daki key: ValueKey<int>(_sayac) satırı, ilk bakışta gizemli görünebilir. Şunu anlaman gerekiyor: Flutter, bir widget'ın "aynı widget mı yoksa yeni bir widget mı" olduğuna, büyük ölçüde tipine ve key'ine bakarak karar verir (Bölüm 1'de değindiğimiz widget ağacı diffing mekanizmasının bir parçası). AnimatedSwitcher, çocuğu değiştiğinde (eski widget'tan farklı bir widget geldiğinde) geçiş animasyonu oynatır — ama sadece Text('$_sayac') yazarsan, Flutter bunu "aynı Text widget'ı, sadece içeriği değişti" olarak görür, yeni bir widget olarak algılamaz, ve animasyon tetiklenmez. ValueKey<int>(_sayac) vererek, Flutter'a "sayaç değeri değiştiğinde, bu artık farklı bir widget'tır" demiş oluyoruz — bu da AnimatedSwitcher'ın geçiş animasyonunu tetiklemesini sağlıyor.

#TweenAnimationBuilder — Implicit Dünyanın "Joker Kartı"

Bazen ihtiyacın olan animasyon, hazır bir Animated* widget'ıyla karşılanmaz (örneğin bir sayının 0'dan 100'e animasyonlu şekilde sayması). TweenAnimationBuilder, implicit animasyon mantığını herhangi bir değere uygulamanı sağlar:

TweenAnimationBuilder<double>(
  tween: Tween<double>(begin: 0, end: 100),
  duration: const Duration(seconds: 2),
  builder: (context, deger, child) {
    return Text('${deger.toInt()}'); // 0'dan 100'e animasyonlu sayma
  },
)

Tween<double>(begin: 0, end: 100) — Dart Bölüm 9'da öğrendiğimiz generic (<double>), burada hangi tip arasında geçiş yapılacağını belirtiyor. Tween ("between" kelimesinden), iki değer arasında ara değerleri hesaplayan bir sınıftır — Konu 36'da explicit animasyonlarda da aynı Tween sınıfını göreceğiz, çünkü implicit ve explicit animasyonlar aynı temel altyapıyı (Konu 36'da tam işleyeceğimiz Animation/AnimationController) paylaşır; TweenAnimationBuilder, bu altyapıyı senin için gizleyen bir implicit sarmalayıcıdır.

builder: (context, deger, child) — Bölüm 3 Konu 11'de öğrendiğimiz builder pattern'in bir başka örneği; her animasyon karesinde, o anki ara değerle (deger) yeniden çağrılır.

#Curves — Animasyonun "Kişiliği"

Curves.linear      // sabit hız — robotik, doğal hissettirmez
Curves.easeIn      // yavaş başlar, hızlanarak biter
Curves.easeOut     // hızlı başlar, yavaşlayarak biter
Curves.easeInOut   // yavaş başlar, ortada hızlanır, yavaş biter (EN yaygın kullanılan)
Curves.bounceOut   // sona doğru seker (sekme efekti)
Curves.elasticOut  // esnek/yaylı bir aşırı-gitme efekti

Gerçek dünyada hiçbir hareket sabit hızda (linear) olmaz — bir araba durmadan önce yavaşlar, bir top zıplarken sekerek durur. curve, animasyonuna bu doğal hissi kazandırır. Pratik tavsiye: emin değilsen Curves.easeInOut ile başla, çoğu UI animasyonu için doğal ve nötr bir seçimdir.

#Ne Zaman Implicit, Ne Zaman Explicit?

Pratik gerçek: implicit animasyonlar, günlük UI işlerinin çoğunu (%80'e yakınını) karşılar — basit, az kod, okunabilir. Explicit animasyonlara, gerçekten ince kontrol gerektiğinde geçersin.

#🎯 Bu Dersten Çıkarılması Gerekenler

• Implicit animasyonlarda sadece hedef değeri değiştirirsin, widget geçişi kendisi yönetir; explicit animasyonlarda (Konu 36) süreci sen kontrol edersin.
• AnimatedContainer/AnimatedOpacity/AnimatedPositioned/AnimatedDefaultTextStyle, normal widget'ların "otomatik geçişli" versiyonlarıdır — hepsi aynı kalıbı (duration + curve + hedef değerler) paylaşır.
• AnimatedSwitcher, çocuk widget değiştiğinde geçiş animasyonu oynatır — Flutter'ın "bu farklı bir widget" diye anlayabilmesi için genelde bir key (örn. ValueKey) vermen gerekir.
• TweenAnimationBuilder, implicit animasyon mantığını herhangi bir değere (sadece widget parametrelerine değil) uygulamanı sağlar; Tween, explicit animasyonlarla paylaşılan temel bir kavramdır.
• Curves, animasyona doğal bir hız karakteri kazandırır; easeInOut güvenli bir varsayılandır.

#📝 Ödevler

• [ ] AnimatedContainer ile, tıklandığında boyutu, rengi VE köşe yuvarlaklığını aynı anda değiştiren bir kutu yap.
• [ ] AnimatedOpacity ile, bir butona basıldığında yavaşça kaybolup tekrar beliren bir widget yap.
• [ ] AnimatedSwitcher kullanarak bir sayaç değerini, key vermeden ve vererek iki şekilde dene — aradaki görsel farkı gözlemle ve nedenini açıkla.
• [ ] TweenAnimationBuilder ile 0'dan istediğin bir sayıya, 2 saniyede animasyonlu şekilde sayan bir "istatistik" widget'ı yap.
• [ ] Aynı AnimatedContainer örneğini, sırasıyla Curves.linear, Curves.bounceOut ve Curves.elasticOut ile dene, aralarındaki "his" farkını kendi cümlelerinle tarif et.

Sıradaki konu: Bölüm 8 — Konu 36: Explicit Animasyonlar (AnimationController, Tween, Curve — Tam Kontrol)