🎬 Flutter Motion Lab

Premium Flutter Animasyonları Sergileme Uygulaması

Gerçek dünya uygulamalarından ilham alınmış, prodüksiyon kalitesinde animasyon örnekleri

---

📖 Proje Hakkında

Flutter Motion Lab, Flutter'da yüksek kaliteli animasyonların nasıl oluşturulacağını gösteren bir showcase (sergileme) uygulamasıdır. Bu proje, popüler uygulamalardan (Spotify, Duolingo gibi) ilham alınarak hazırlanmış animasyon demolarını içerir.

🎯 Projenin Amacı

• Flutter'da ileri seviye animasyon tekniklerini öğrenmek ve sergilemek
• Lottie, AnimatedBuilder ve özel animasyon controller'ları kullanımını göstermek
• Clean Architecture prensipleriyle organize edilmiş, genişletilebilir kod yapısı sunmak
• Gerçek uygulama senaryolarında animasyonların nasıl kullanıldığını pratik olarak göstermek

---

✨ Özellikler

🎵 Spotify Now Playing Ekranı

• Lottie ile equalizer animasyonu
• just_audio paketi ile gerçek ses çalma desteği
• Şarkı ileri/geri sarma, oynat/duraklat kontrolleri
• Dinamik progress bar ve süre göstergesi
• Pulse efektli gradient arka plan
• Eurovision Türkiye şarkıları playlist'i

🏆 Duolingo Kutlama Ekranı

• AnimatedBuilder ile ölçekleme ve sallanma animasyonu
• Confetti (konfeti) parçacık animasyonları
• Glow efektli kartlar
• XP kazanım badge'leri
• Bounce ve elastic easing efektleri

🎨 Genel UI/UX Özellikleri

• Modern, koyu tema tasarım
• Material Design 3 uyumlu
• Haptic feedback (dokunsal geri bildirim)
• Smooth sayfa geçiş animasyonları
• Responsive ve modüler widget yapısı

---

🛠️ Kullanılan Teknolojiler ve Paketler

Paket	Versiyon	Kullanım Amacı
flutter	SDK	Temel framework
lottie	^3.1.0	JSON tabanlı vektör animasyonları (After Effects export)
rive	^0.13.0	İnteraktif animasyonlar için (gelecek demolar için)
just_audio	^0.10.5	Cross-platform ses çalma desteği
cupertino_icons	^1.0.6	iOS tarzı ikonlar

---

📁 Proje Yapısı

lib/
├── main.dart                          # Uygulama giriş noktası
├── core/                              # Çekirdek modüller
│   └── theme/
│       └── app_theme.dart             # Uygulama teması ve stil tanımları
└── features/                          # Feature-based mimari
    └── animation_showcase/
        ├── data/
        │   └── demo_animations.dart   # Demo listesi ve metadata
        ├── domain/
        │   └── animation_demo.dart    # AnimationDemo model sınıfı
        └── presentation/
            ├── pages/
            │   ├── home_page.dart                 # Ana sayfa
            │   ├── spotify_now_playing_page.dart  # Spotify demo
            │   └── duolingo_celebration_page.dart # Duolingo demo
            └── widgets/
                └── demo_card.dart     # Demo kartı widget'ı

assets/
├── animations/
│   └── equalizer.json                 # Lottie equalizer animasyonu
└── audio/
    ├── song1.mp3                      # We Could Be the Same - maNga
    ├── song2.mp3                      # Everyway That I Can - Sertab Erener
    └── song3.mp3                      # Düm Tek Tek - Hadise

---

🚀 Kurulum

Gereksinimler

• Flutter SDK: 3.9.2 veya üzeri
• Dart SDK: 3.9 veya üzeri
• IDE: VS Code (önerilen) veya Android Studio
• Desteklenen Platformlar: Android, iOS, Web, Windows, macOS, Linux

Adım Adım Kurulum

1. Projeyi Klonlayın

git clone https://github.com/dusova/motionlab-flutter.git
cd motionlab-flutter

2. Bağımlılıkları Yükleyin

flutter pub get

3. Flutter Ortamınızı Kontrol Edin

flutter doctor

Tüm kontrollerin ✓ işareti ile geçtiğinden emin olun.

---

▶️ Çalıştırma

Android Emulator veya Fiziksel Cihazda

# Debug modda çalıştır
flutter run

# Release modda çalıştır (performans testi için)
flutter run --release

iOS Simulator'da (macOS gerektirir)

flutter run -d ios

Web Tarayıcısında

flutter run -d chrome

Windows Desktop

flutter run -d windows

macOS Desktop

flutter run -d macos

Linux Desktop

flutter run -d linux

Belirli Bir Cihazda Çalıştırma

# Mevcut cihazları listele
flutter devices

# Belirli bir cihazda çalıştır
flutter run -d <device_id>

---

📱 Uygulama Kullanımı

1. Ana Sayfa: Uygulama açıldığında mevcut animasyon demolarını listeleyen ana sayfa görüntülenir
2. Demo Seçimi: Herhangi bir demo kartına tıklayarak ilgili animasyon sayfasına geçiş yapın
3. Spotify Demo: Şarkıları çalın, duraklatın ve playlist'te gezinin
4. Duolingo Demo: Kutlama animasyonunu izleyin ve "Tekrar" butonuyla yeniden oynatın
5. Geri Dönüş: Sayfa üzerindeki geri tuşu veya aşağı ok ile ana sayfaya dönün

---

🏗️ Build & Release

Android APK Oluşturma

# Debug APK
flutter build apk --debug

# Release APK
flutter build apk --release

# APK Split (boyut optimizasyonu)
flutter build apk --split-per-abi

APK dosyası: build/app/outputs/flutter-apk/ klasöründe oluşturulur.

Android App Bundle (Play Store için)

flutter build appbundle --release

iOS Build (macOS gerektirir)

flutter build ios --release

Web Build

flutter build web --release

Build çıktısı: build/web/ klasöründe oluşturulur.

Windows Build

flutter build windows --release

---

🧪 Test

# Tüm testleri çalıştır
flutter test

# Coverage ile test çalıştır
flutter test --coverage

---

📚 Öğrenme Kaynakları

Bu projede kullanılan animasyon tekniklerini öğrenmek için:

AnimatedBuilder

• Özel animasyon controller'ları oluşturma
• Tween ve CurvedAnimation kullanımı
• vsync ve TickerProviderStateMixin

Lottie

• After Effects'ten export edilen JSON animasyonları
• AnimationController ile senkronizasyon
• Performans optimizasyonu

Audio Entegrasyonu

• just_audio ile cross-platform ses çalma
• Stream listener'lar ile durum yönetimi
• Playlist ve şarkı geçişleri

---

🤝 Katkıda Bulunma

1. Bu repository'yi fork edin
2. Feature branch oluşturun (git checkout -b feature/YeniAnimasyon)
3. Değişikliklerinizi commit edin (git commit -m 'Yeni animasyon eklendi')
4. Branch'inizi push edin (git push origin feature/YeniAnimasyon)
5. Pull Request açın

---

📋 Gelecek Planlar

• Rive animasyon demoları eklenmesi
• Hero animasyonları örneği
• Custom painter ile çizim animasyonları
• Implicit animations koleksiyonu
• Physics-based animasyonlar
• Staggered animasyonlar

---

📄 Lisans

Bu proje MIT lisansı altında lisanslanmıştır. Detaylar için LICENSE dosyasına bakınız.

---

👨‍💻 Geliştirici

Mustafa Arda Düşova - Kırklareli Üniversitesi Bilgisayar Programcılığı 2. Sınıf Öğrencisi

---

⭐ Bu projeyi beğendiyseniz yıldız vermeyi unutmayın!

Made with ❤️ and Flutter