Bölüm 8 — Konu 39: Rive / Lottie Entegrasyonu

Bölüm 8'in son konusuna geldik. Konu 35-38'de Flutter'ın kendi animasyon araçlarını (implicit, explicit, Hero, Canvas) öğrendik — bu son derste, tasarımcılar tarafından ayrı bir araçla üretilip Flutter'a hazır dosya olarak aktarılan animasyonları nasıl kullanacağını göreceğiz.

#Neden Hazır Animasyon Dosyaları?

Konu 38'de CustomPainter ile elle bir şekil çizmenin ne kadar ayrıntılı olduğunu gördün. Şimdi düşün: bir maskot karakterin zıplayarak selam vermesi, karmaşık bir yüklenme animasyonu, ya da bir onay işaretinin çiziliyormuş gibi belirmesi gibi tasarımcı-üretimi animasyonları Canvas ile elle kodlamak günler sürer. Bunun yerine, tasarımcılar bu animasyonları özel araçlarla (Adobe After Effects, Rive Editor) hazırlar, bir dosya olarak dışa aktarır, sen de bu dosyayı Flutter'da birkaç satır kodla oynatırsın.

İki popüler format var: Lottie (After Effects animasyonlarını JSON'a çeviren, Airbnb'nin açık kaynak formatı) ve Rive (kendi editörüyle gelen, etkileşimli animasyonlara daha uygun daha yeni bir format).

#Lottie — After Effects Animasyonlarını Oynatma

flutter pub add lottie

import 'package:lottie/lottie.dart';

Lottie.asset('assets/animasyonlar/yukleniyor.json')

Bu kadar basit — assets/ klasörüne (Bölüm 3 Konu 12'de öğrendiğimiz asset yönetimini hatırla) bir .json animasyon dosyası koyup pubspec.yaml'da tanımladıktan sonra, Lottie.asset(...), animasyonu otomatik olarak oynatmaya başlar (varsayılan olarak bir kere oynar).

Lottie.asset(
  'assets/animasyonlar/yukleniyor.json',
  repeat: true,        // sürekli tekrar oynat
  animate: true,        // otomatik başlasın
  width: 200,
  height: 200,
  fit: BoxFit.contain,  // Bölüm 3 Konu 12'deki BoxFit kavramını hatırla
)

Ağdan da yükleyebilirsin:

Lottie.network('https://ornek.com/animasyon.json')

Bölüm 3 Konu 12'de Image.asset ile Image.network arasındaki paralel isimlendirmeyi hatırlarsan — Lottie.asset/Lottie.network, aynı tasarım kalıbını takip ediyor.

#LottieBuilder + Kontrol — Konu 36'daki AnimationController ile Birleşim

Lottie animasyonunu, Konu 36'da öğrendiğimiz AnimationController ile elle kontrol edebilirsin — örneğin bir "beğen" butonuna basıldığında animasyonu bir kere oynatmak istiyorsan:

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

  @override
  State<BegenButonu> createState() => _BegenButonuState();
}

class _BegenButonuState extends State<BegenButonu> with SingleTickerProviderStateMixin {
  late final AnimationController _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(vsync: this); // duration, Lottie dosyasından otomatik alınır
  }

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => _controller.forward(from: 0), // baştan bir kere oynat
      child: Lottie.asset(
        'assets/animasyonlar/kalp.json',
        controller: _controller,
        onLoaded: (composition) {
          _controller.duration = composition.duration; // animasyonun gerçek süresini al
        },
      ),
    );
  }
}

Dikkat et: AnimationController'ı burada kendi duration'ını elle belirtmeden oluşturduk — onLoaded callback'i, Lottie dosyası yüklendiğinde çağrılır ve dosyanın kendi doğal süresini (composition.duration) sana verir; bunu _controller.duration'a atayarak, kontrolcünün animasyon dosyasıyla tam senkronize çalışmasını sağlıyoruz.

#Rive — Etkileşimli, Durum Tabanlı Animasyonlar

flutter pub add rive

import 'package:rive/rive.dart';

RiveAnimation.asset('assets/animasyonlar/karakter.riv')

Rive'ın Lottie'den temel farkı: Rive dosyaları, kendi içinde bir State Machine (durum makinesi) taşıyabilir — yani animasyon, tek bir doğrusal oynatım değil, girdilere göre farklı davranan bir sistem olabilir (örneğin bir karakterin "bekleme", "yürüme", "zıplama" durumları arasında, senin kontrolünle geçiş yapması).

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

  @override
  State<EtkilesimliKarakter> createState() => _EtkilesimliKarakterState();
}

class _EtkilesimliKarakterState extends State<EtkilesimliKarakter> {
  StateMachineController? _controller;
  SMIBool? _tiklandiGirdisi; // State Machine'e bağlı bir boolean girdi

  void _onRiveInit(Artboard artboard) {
    final controller = StateMachineController.fromArtboard(artboard, 'Durum Makinesi');
    if (controller != null) {
      artboard.addController(controller);
      _controller = controller;
      _tiklandiGirdisi = controller.findInput<bool>('tiklandi') as SMIBool?;
    }
  }

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        _tiklandiGirdisi?.value = true; // Rive editöründe tanımlı animasyonu tetikle
      },
      child: RiveAnimation.asset(
        'assets/animasyonlar/karakter.riv',
        onInit: _onRiveInit,
      ),
    );
  }
}

Buradaki SMIBool (State Machine Input — Boolean), Dart Bölüm 9'da öğrendiğimiz tip sistemine bir örnek: Rive, State Machine'e bool, double, "trigger" gibi farklı girdi tipleri tanımlamana izin verir; findInput<bool>('tiklandi'), generic bir arama yapıp, Rive editöründe tasarımcının tanımladığı tiklandi adlı girdiye koddan erişim sağlıyor.

Pratik gerçek: Rive dosyalarını kendin tasarlamazsın (Rive Editor ayrı bir araçtır) — genelde bir tasarımcıdan .riv dosyasını State Machine girdi isimleriyle birlikte alırsın (örn. "bu girdinin adı tiklandi, bool tipinde") ve koddan bu isimlere göre bağlarsın.

#Lottie mi, Rive mı?

#Bölüm 8'i Kapatırken — Hangi Aracı Ne Zaman Kullanırsın?

Basit bir değer değişimi (boyut, renk, opaklık)     → Implicit animasyon (Konu 35)
İnce kontrol, birden fazla bağlı animasyon           → Explicit animasyon (Konu 36)
İki ekran arasında ortak bir görselin geçişi         → Hero (Konu 37)
Veriye dayalı özel bir şekil/grafik                  → CustomPainter (Konu 38)
Tasarımcı tarafından hazırlanmış karmaşık animasyon  → Lottie / Rive (Konu 39)

Gerçek bir uygulamada, bu beş aracın hepsini bir arada kullanman gayet normaldir — örneğin bir splash screen'de Rive, kartlar arası geçişte Hero, bir yükleme göstergesinde CustomPainter, ve butonlarda implicit animasyonlar.

#🎯 Bu Dersten Çıkarılması Gerekenler

• Lottie, After Effects kökenli .json animasyonlarını oynatır — Lottie.asset/Lottie.network, Image.asset/Image.network ile aynı tasarım kalıbını takip eder.
• Lottie animasyonları, Konu 36'daki AnimationController ile elle kontrol edilebilir; onLoaded callback'i, dosyanın gerçek süresini vermeni sağlar.
• Rive, .riv dosyaları ve State Machine ile, girdilere göre davranışı değişen etkileşimli animasyonlar sunar — Lottie'nin sunmadığı bir özellik.
• Rive'da StateMachineController + findInput<T>(), koddan tasarımcının tanımladığı girdilere (bool/double/trigger) bağlanmanı sağlar.
• Basit, tek seferlik animasyonlarda Lottie; etkileşimli/durum tabanlı animasyonlarda Rive tercih edilir.
• Bölüm 8'de öğrendiğin beş araç (implicit, explicit, Hero, CustomPainter, Lottie/Rive), gerçek bir uygulamada genelde bir arada kullanılır.

#📝 Ödevler

• [ ] LottieFiles.com'dan ücretsiz bir animasyon (örn. bir "yükleniyor" animasyonu) indir, Lottie.asset ile bir splash screen'de göster.
• [ ] İndirdiğin bir Lottie animasyonunu, AnimationController ile bir butona basıldığında bir kere oynatacak şekilde bağla (onLoaded ile süresini al).
• [ ] Rive'ın örnek dosyalarından (rive.app üzerindeki topluluk dosyaları) birini indir, RiveAnimation.asset ile ekranda göster.
• [ ] Kendi cümlelerinle, "Lottie ile Rive arasındaki temel farkın, State Machine kavramıyla nasıl ilişkili olduğunu" açıkla.

#🎮 Mini Uygulama — Bölüm 8 Checkpoint: Animasyonlu Ürün Vitrini

Bölüm 8'in tamamını (implicit, explicit, Hero, CustomPainter, Lottie/Rive) bir araya getiren bir mini proje:

Gereksinimler:

• Splash screen: Uygulama açılışında 1-2 saniye gösterilen, bir Lottie animasyonu içeren bir ekran (Future.delayed ile Bölüm 5 Konu 18'i hatırlayarak, sonra ana ekrana geç).
• Ürün listesi: ListView.builder ile bir ürün listesi; her ürün kartı, dokunulduğunda AnimatedContainer (Konu 35) ile hafifçe büyüsün (basılı tutma efekti — GestureDetector'ın onTapDown/onTapUp ile).
• Ürün detay geçişi: Listedeki ürün resminden detay ekranına Hero (Konu 37) ile geçiş.
• Yüklenme göstergesi: Detay ekranında, sahte bir yükleme süresi boyunca CustomPainter (Konu 38) ile çizilmiş dairesel bir ilerleme göstergesi.
• Bonus: "Sepete Ekle" butonuna basıldığında, AnimationController (Konu 36) ile bir "başarı" ikonu (veya bir Lottie onay animasyonu) kısaca belirip kaybolsun.

Sıradaki konu: Bölüm 9 — Konu 40: Platform Channels (Native Android/iOS Koduyla Konuşma)