1. Giriş: Bu Rehber Kimin İçin?
Bu rehber, hiç mobil uygulama geliştirmemiş veya Flutter'ı yeni öğrenmeye başlayan kişiler için hazırlanmıştır. Her terim, her kavram, her adım detaylıca açıklanmıştır.
Tek Kod, İki Platform
Bir kere yaz, hem iPhone hem Android'de çalışsın
Adım Adım Yol Haritası
Nereden başlayacağını bilmek yeter
Copy-Paste Kodlar
Hazır şablonlar ve örnekler
2. Flutter Nedir? Neden Seçiyoruz?
Flutter Ne Demek?
Flutter, Google tarafından geliştirilen ücretsiz bir uygulama geliştirme aracıdır (framework). Tek bir kod yazarak hem iPhone (iOS) hem de Android telefonlar için uygulama yapabilirsiniz. Ayrıca web sitesi ve masaüstü uygulaması da yapabilirsiniz.
Basit Anlatım
Normalde iPhone uygulaması için ayrı kod (Swift), Android için ayrı kod (Kotlin) yazmanız gerekir. Bu hem 2 kat iş demek, hem 2 kat maliyet demek. Flutter ile tek kod yazarsınız, Flutter bu kodu hem iPhone hem Android'in anlayacağı dile çevirir.
Neden Flutter Seçiyoruz?
Maliyet Avantajı
2 ayrı ekip yerine 1 ekip. 2 ayrı kod yerine 1 kod. Bakım maliyeti yarı yarıya düşer.
Hızlı Geliştirme
"Hot Reload" özelliği: Kod değişikliği yaptığınızda uygulamayı kapatmadan anında görürsünüz.
Güzel Tasarımlar
Hazır widget'lar (görsel parçalar) ile profesyonel görünüm. Material Design ve Cupertino stilleri.
Müzik Uygulaması İçin İdeal
just_audio, audio_session gibi güçlü ses kütüphaneleri. HLS streaming, background play desteği.
Kim Flutter Kullanıyor?
Google Pay, Alibaba, BMW, eBay, Nubank, Philips Hue gibi büyük şirketler Flutter kullanıyor. Spotify benzeri müzik uygulamaları için de çok uygun.
3. Kullanılacak Teknolojiler (Stack)
Aşağıda Muzibu mobil uygulaması için kullanılacak tüm teknolojiler ve her birinin ne işe yaradığı açıklanmıştır.
1 Ana Geliştirme Aracı
Flutter 3.x
Google'ın cross-platform framework'ü
Ne işe yarar: Uygulamanın tüm görsel arayüzü (butonlar, listeler, player ekranı) ve mantığı (şarkı çalma, kullanıcı girişi) Flutter ile yazılır.
2 Programlama Dili
Dart Programlama Dili
Flutter'ın kullandığı dil
Ne işe yarar: Tüm kodları Dart dilinde yazarsınız. JavaScript veya Java biliyorsanız kolay öğrenilir. Google tarafından geliştirilmiştir.
void selamVer(String isim) {
print('Merhaba $isim!');
}
3 State Management (Durum Yönetimi)
Riverpod
Modern state management çözümü
Ne işe yarar: Uygulamanın "durumunu" (hangi şarkı çalıyor, kullanıcı giriş yapmış mı, indirme %kaç tamamlandı) yönetir. Bir ekranda değişen bilgi, diğer ekranlara otomatik yansır.
Örnek: Player ekranında "pause" butonuna bastınız. Riverpod sayesinde mini player'daki ikon da otomatik olarak "play" ikonuna döner. Elle güncelleme yapmanıza gerek yok.
4 Ses Çalma (Audio Player)
just_audio + audio_service
Profesyonel ses çalma kütüphaneleri
Ne işe yarar:
- just_audio: Şarkıları çalar, duraklatır, ileri/geri sarar. HLS streaming (kalite otomatik ayarlama) destekler.
- audio_service: Uygulama arka plandayken (başka uygulama açıkken) müziğin çalmaya devam etmesini sağlar.
- audio_session: Telefon geldiğinde müziği otomatik durdurur, kapandığında devam eder.
5 Yerel Veritabanı (Offline Depolama)
Drift (SQLite)
Ana veritabanı
Ne işe yarar: Şarkı listesi, playlist'ler, kullanıcı bilgileri gibi yapılandırılmış verileri telefonun içinde saklar. İnternet olmadan da bu verilere erişebilirsiniz.
Hive
Hızlı key-value depolama
Ne işe yarar: Ayarlar (karanlık mod açık mı?), son dinlenen şarkı, ses seviyesi gibi basit verileri saklar. Çok hızlı okuma/yazma yapar.
6 Sunucu İletişimi (API)
Dio + Retrofit
HTTP istek kütüphaneleri
Ne işe yarar: Muzibu sunucusuyla (Laravel backend) konuşur. Şarkı listesini çeker, kullanıcı girişi yapar, playlist kaydeder.
Basit anlatım: Uygulama "Bana rock şarkılarını ver" der, Dio bu mesajı sunucuya iletir, sunucu JSON formatında şarkı listesi döner, Dio bu listeyi uygulamaya verir.
7 Diğer Önemli Paketler
cached_network_image
Görsel önbellekleme
Albüm kapaklarını bir kez indirir, sonra internetsiz gösterir.
go_router
Sayfa yönlendirme
"Ana sayfa", "Player", "Ayarlar" gibi ekranlar arası geçişi yönetir.
firebase_crashlytics
Hata takibi
Uygulama çökerse hangi satırda hata olduğunu size bildirir.
firebase_messaging
Push notification
"Yeni albüm çıktı!" gibi bildirimler göndermek için.
flutter_secure_storage
Güvenli depolama
Token, şifre gibi hassas bilgileri şifreli saklar.
connectivity_plus
İnternet durumu
WiFi mi, mobil veri mi, internet yok mu kontrol eder.
4. Proje Klasör Yapısı (Detaylı Açıklama)
Aşağıda proje klasörlerinin tam listesi ve her klasörün ne işe yaradığı açıklanmıştır. Bu yapı "Melos Monorepo" + "Clean Architecture" kombinasyonudur.
muzibu_mobile/ ← Ana proje klasörü │ ├── melos.yaml ← Tüm paketleri yöneten ayar dosyası │ (Laravel'deki composer.json gibi) │ ├── apps/ ← Uygulamanın kendisi │ └── muzibu_app/ │ ├── lib/ │ │ ├── main.dart ← Uygulama buradan başlar │ │ ├── app.dart ← Tema, dil, routing ayarları │ │ ├── config/ ← API URL, renkler gibi sabitler │ │ ├── di/ ← Dependency Injection kurulumu │ │ └── routing/ ← Sayfa yönlendirmeleri │ └── test/ ← Otomatik testler │ ├── packages/ ← Paylaşılan yardımcı paketler │ │ │ ├── core/ ← Temel yardımcılar │ │ └── lib/ │ │ ├── constants/ ← Sabit değerler (API_URL, renkler) │ │ ├── extensions/ ← Dart'a eklenen özellikler │ │ ├── utils/ ← Tarih formatlama, para birimi gibi │ │ └── errors/ ← Hata sınıfları │ │ │ ├── network/ ← Sunucu ile iletişim │ │ └── lib/ │ │ ├── api_client.dart ← HTTP istekleri yapan ana sınıf │ │ ├── interceptors/ ← Token ekleme, hata yakalama │ │ └── endpoints/ ← /api/songs, /api/login gibi URL'ler │ │ │ ├── design_system/ ← Görsel bileşenler (UI Kit) │ │ └── lib/ │ │ ├── atoms/ ← Buton, ikon, yazı gibi küçük parçalar │ │ ├── molecules/ ← Kart, liste satırı gibi orta parçalar │ │ ├── organisms/ ← Şarkı kartı, player bar gibi büyük parçalar │ │ └── themes/ ← Karanlık/aydınlık tema renkleri │ │ │ └── local_storage/ ← Telefonda veri saklama │ └── lib/ │ ├── database/ ← SQLite tabloları ve sorguları │ ├── cache/ ← Geçici veri önbellekleme │ └── secure/ ← Şifreli token saklama │ └── features/ ← Özellik modülleri (asıl iş burada!) │ ├── auth/ ← Giriş / Kayıt │ └── lib/ │ ├── data/ ← API'den veri çekme │ │ ├── datasources/ ← Sunucu ve yerel kaynak │ │ ├── models/ ← UserModel (JSON → Nesne) │ │ └── repositories/ ← Veri kaynağı yönetimi │ ├── domain/ ← İş mantığı │ │ ├── entities/ ← User (saf veri sınıfı) │ │ └── usecases/ ← Login, Logout, Register işlemleri │ └── presentation/ ← Ekranlar ve görsel │ ├── screens/ ← LoginScreen, RegisterScreen │ ├── widgets/ ← LoginForm, SocialLoginButtons │ └── providers/ ← Riverpod state yönetimi │ ├── player/ ← Müzik çalar (EN ÖNEMLİ!) │ └── lib/ │ ├── data/ │ │ └── datasources/ │ │ ├── audio_player_datasource.dart ← just_audio kontrolü │ │ └── hls_handler.dart ← Kalite ayarlama │ ├── domain/ │ │ ├── entities/ │ │ │ ├── playback_state.dart ← Çalıyor mu, pozisyon ne │ │ │ └── queue.dart ← Sıradaki şarkılar │ │ └── usecases/ │ │ ├── play_song.dart │ │ ├── pause.dart │ │ ├── next.dart │ │ └── seek.dart ← İleri/geri sarma │ └── presentation/ │ ├── screens/ │ │ └── now_playing_screen.dart ← Tam ekran player │ └── widgets/ │ ├── mini_player.dart ← Alt kısımdaki küçük player │ ├── seek_bar.dart ← İlerleme çubuğu │ └── controls.dart ← Play/Pause/Next butonları │ ├── library/ ← Şarkı/Albüm/Sanatçı listeleri ├── playlist/ ← Playlist oluşturma/düzenleme ├── downloads/ ← Offline indirme ├── search/ ← Arama └── settings/ ← Ayarlar ekranı
Bu Yapının Avantajı
Her özellik (feature) kendi klasöründe bağımsız. "Player" ekibinden biri "Auth" kodlarına karışmaz. Test yazmak kolay. Yeni özellik eklemek mevcut kodu bozmaz.
5. Geliştirme Yol Haritası (Adım Adım)
Aşağıda uygulamayı sıfırdan tamamlamak için takip edilecek adımlar verilmiştir. Her adım sırasıyla yapılmalıdır.
Faz 1: Temel Altyapı
Proje kurulumu ve iskelet
1.1 Geliştirme Ortamı Kurulumu
- • Flutter SDK kurulumu (flutter.dev'den indir)
- • Android Studio veya VS Code kurulumu
- • Xcode kurulumu (Mac'te iOS için)
- •
flutter doctorile kontrol
1.2 Proje Oluşturma
1.3 Paket Kurulumu
melos.yaml'a aşağıdaki paketleri ekle:
Faz 2: Kimlik Doğrulama
Giriş, kayıt, oturum yönetimi
2.1 Auth Feature Modülü
- • features/auth/ klasör yapısını oluştur
- • UserEntity, UserModel sınıfları
- • AuthRepository interface
- • LoginUseCase, LogoutUseCase
2.2 Giriş Ekranları
- • LoginScreen (email/şifre formu)
- • RegisterScreen (kayıt formu)
- • SplashScreen (açılış ekranı)
- • Form validation (boş alan kontrolü)
2.3 Token Yönetimi
- • JWT token saklama (flutter_secure_storage)
- • Token refresh mekanizması
- • Otomatik çıkış (token süresi dolunca)
Faz 3: Player (Müzik Çalar)
En kritik modül - ses çalma sistemi
3.1 just_audio Entegrasyonu
- • AudioPlayerDatasource sınıfı oluştur
- • HLS stream desteği (kalite otomatik)
- • MP3 fallback (HLS başarısız olursa)
- • Gapless playback (şarkılar arası boşluk yok)
3.2 Arka Plan Çalma
- • audio_service ile background play
- • Kilit ekranı kontrolleri
- • Bildirim alanında player
- • Telefon geldiğinde otomatik duraklat
3.3 Player Ekranları
- • NowPlayingScreen (tam ekran player)
- • MiniPlayer (sayfaların altında)
- • QueueScreen (sıradaki şarkılar)
- • SeekBar, VolumeSlider widget'ları
Faz 4: Kütüphane & Playlist
İçerik gösterimi ve yönetimi
4.1 Kütüphane Ekranları
- • Şarkı listesi (SongsScreen)
- • Albüm listesi (AlbumsScreen)
- • Sanatçı listesi (ArtistsScreen)
- • Kategoriler (GenresScreen)
4.2 Playlist Yönetimi
- • Playlist oluşturma
- • Şarkı ekleme/çıkarma
- • Playlist düzenleme (isim, kapak)
- • Sürükle-bırak sıralama
Faz 5: Offline & İndirme
İnternetsiz kullanım
5.1 İndirme Sistemi
- • Download Manager (indirme kuyruğu)
- • AES-256 şifreli saklama (.mzb formatı)
- • İndirme ilerleme göstergesi
- • Maksimum 100 şarkı limiti
5.2 Offline Sync
- • Delta sync (sadece değişenler)
- • Offline indicator (bağlantı yok uyarısı)
- • Optimistic UI (hemen göster, arka planda sync)
Faz 6: Test & Yayın
Kalite kontrolü ve mağaza yayını
6.1 Test
- • Unit testler (iş mantığı)
- • Widget testler (görsel)
- • Integration testler (uçtan uca)
- • 15 saat dayanıklılık testi (memory leak)
6.2 Mağaza Yayını
- • App Store (iOS) - Apple Developer hesabı
- • Google Play (Android) - Play Console hesabı
- • Privacy Policy, App Icons, Screenshots
- • TestFlight / Internal Testing ile beta
6. Tasarım Standartları
Renk Paleti
Tipografi (Yazı Tipleri)
Boşluklar (Spacing)
Tüm boşluklar 4'ün katları olmalı (4px grid system):
Köşe Yuvarlaklığı (Border Radius)
Sonuç: Yapılacaklar Özeti
Framework
- • Flutter 3.x
- • Dart dili
- • Melos monorepo
- • Clean Architecture
Ses Sistemi
- • just_audio
- • audio_service
- • HLS streaming
- • Background play
Veri Saklama
- • Drift (SQLite)
- • Hive (cache)
- • Secure Storage
- • Offline-first
Diğer Raporlar: