Flutter'da Uygulama İkonu Oluşturma

Uygulamanızı mağazaya yüklemeden önce mutlaka yapmanız gereken şey: Güzel bir ikon eklemek! Varsayılan Flutter ikonu ile yayınlamak... pek profesyonel görünmüyor açıkçası.

İlk başta "Ne kadar zor olabilir ki?" diye düşünmüştüm. Sonra Android için 5 farklı boyut, iOS için 10 farklı boyut gerektiğini görünce biraz ürktüm. Ama meğer çok kolaymış!

Platform Bazlı Icon Boyutları

Her platform kendi kuralları ile geliyor tabii. Android ve iOS farklı boyutlar istiyor.

Android İkon Boyutları

Android çeşitli ekran yoğunlukları için farklı boyutlar kullanır:

mdpi: 48x48 px
hdpi: 72x72 px
xhdpi: 96x96 px
xxhdpi: 144x144 px
xxxhdpi: 192x192 px

Play Store için ise minimum 512x512 px gerekli.

iOS İkon Boyutları

iOS daha da detaylı:

20x20 (2x, 3x)
29x29 (2x, 3x)
40x40 (2x, 3x)
60x60 (2x, 3x)
76x76 (2x)
83.5x83.5 (2x)
1024x1024 (App Store için)

App Store için minimum 1024x1024 px şart.

En Kolay Yol: flutter_launcher_icons Paketi

Tüm bu boyutları manuel oluşturmak çok zahmetli. İyi ki flutter_launcher_icons paketi var!

1. Paketi Projeye Ekleyin

pubspec.yaml dosyasını açın ve dev_dependencies kısmına ekleyin:

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.13.1

2. İkon Konfigürasyonu

Aynı dosyanın altına icon ayarlarını ekleyin:

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/app_icon.png"

Bu, hem Android hem iOS için aynı ikonu kullanır.

3. İkon Resmini Hazırlayın

Projenize assets/icon/ klasörü oluşturun ve ikon resminizi buraya koyun.

Önemli:

Minimum boyut: 1024x1024 px (Her iki platform için ideal)
Format: PNG (şeffaf arka plan olabilir)
Kare olmalı: Kenar oranı 1:1

Neden bu kadar büyük? Çünkü paket bu resmi küçülterek tüm boyutları otomatik oluşturacak. Küçük bir resimden büyük boyut oluşturmak kalite kaybına yol açar, ama büyükten küçüğe sorun yok.

4. İkonları Oluşturun

Terminal'de şu komutu çalıştırın:

flutter pub get
flutter pub run flutter_launcher_icons:main

Veya kısaca:

flutter pub run flutter_launcher_icons

Komut çalışınca şöyle bir çıktı göreceksiniz:

Creating default icons Android
Creating default icons iOS
Overwriting default iOS launcher icon with new icon

Tebrikler! İkonunuz her iki platformda da ayarlandı.

Platform Bazlı Farklı İkonlar

Bazen Android ve iOS için farklı ikonlar kullanmak istersiniz. Mesela iOS köşeleri yuvarlak istiyor, Android'de kare daha güzel duruyor.

flutter_launcher_icons:
  android: true
  ios: true
  image_path_android: "assets/icon/android_icon.png"
  image_path_ios: "assets/icon/ios_icon.png"

Adaptive Icon (Android)

Android 8.0 (API 26) ve üstü için adaptive icon kullanabilirsiniz:

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/app_icon.png"
  
  # Adaptive icon için
  adaptive_icon_background: "assets/icon/background.png"
  adaptive_icon_foreground: "assets/icon/foreground.png"

Adaptive icon, farklı launcher'larda (Nova, OneUI, Pixel) farklı şekillerde görünebilir.

İpucu: Foreground için şeffaf PNG kullanın, background için düz renk veya pattern.

Manuel Kurulum (Gerekirse)

Eğer paket kullanmak istemezseniz manuel de yapabilirsiniz (ama tavsiye etmem).

Android Manuel Kurulum

İkonları şu klasöre koyun:

android/app/src/main/res/
  ├── mipmap-mdpi/ic_launcher.png (48x48)
  ├── mipmap-hdpi/ic_launcher.png (72x72)
  ├── mipmap-xhdpi/ic_launcher.png (96x96)
  ├── mipmap-xxhdpi/ic_launcher.png (144x144)
  └── mipmap-xxxhdpi/ic_launcher.png (192x192)

AndroidManifest.xml dosyasında:

<application
    android:icon="@mipmap/ic_launcher"
    ...>

iOS Manuel Kurulum

Xcode'da ios/Runner/Assets.xcassets/AppIcon.appiconset/ klasörüne ikonları ekleyin.

Contents.json dosyasını da güncellemeniz gerekir. Karmaşık, değmez!

Pratik İpuçları

1. İkon Tasarım Kuralları

Basit tutun: Küçük boyutlarda karmaşık detaylar kaybolur
Belirgin renkler: Göze çarpan, kontrast yüksek renkler
Metin kullanmayın: Çok küçük boyutlarda okunamaz
Merkezde tutun: Kenarlar bazı launcher'larda kesilir

2. Test Edin

İkonları ekledikten sonra mutlaka test edin:

# Android
flutter run

# iOS
flutter run -d ios

Uygulamayı tamamen kaldırıp yeniden kurun. Bazen cache yüzünden eski ikon görünür.

3. Transparent PNG mı, Solid mı?

Android: Şeffaf arka plan kullanabilirsiniz (adaptive icon ile)
iOS: Şeffaf kullanabilirsiniz ama Apple solid öneriyor

4. Icon Generator Araçları

Manuel boyutlandırma için:

Bu sitelere 1024x1024 resim yüklersiniz, size tüm boyutları hazır indirir.

pubspec.yaml Tam Örnek

name: my_awesome_app
description: Harika bir Flutter uygulaması

flutter:
  uses-material-design: true
  
  assets:
    - assets/icon/

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_launcher_icons: ^0.13.1

flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/icon/app_icon.png"
  
  # Özel ayarlar (opsiyonel)
  adaptive_icon_background: "#FFFFFF"
  adaptive_icon_foreground: "assets/icon/foreground.png"
  
  # Platform bazlı
  # image_path_android: "assets/icon/android.png"
  # image_path_ios: "assets/icon/ios.png"
  
  # Sadece belirli platformlar için
  # android: "launcher_icon"
  # ios: true

Sık Karşılaşılan Sorunlar

"Icon değişmedi"

Çözüm:

flutter clean
flutter pub get
flutter pub run flutter_launcher_icons
flutter run

"iOS'ta icon kare görünüyor"

iOS otomatik olarak köşeleri yuvarlar. Endişelenmeyin.

"Adaptive icon çalışmıyor"

Android 8.0 altı cihazlarda adaptive icon çalışmaz. Normal icon görünür.

Özet

Flutter'da ikon eklemek:

flutter_launcher_icons paketini ekleyin
1024x1024 px PNG resim hazırlayın
pubspec.yaml dosyasında ayarlayın
flutter pub run flutter_launcher_icons komutunu çalıştırın

Önemli Noktalar:

Android minimum: 512x512 px (önerilen 1024x1024)
iOS minimum: 1024x1024 px
Her iki platform için aynı resmi kullanabilirsiniz
Büyük boyutlu resim kullanın (küçülme kaliteli, büyütme değil)
Adaptive icon Android 8.0+ için modern görünüm sağlar

İlk uygulamanızda kendi ikonunuzu görünce çok hoş bir his oluyor. Artık gerçekten "benim" uygulamam gibi hissettiriyor!

Uygulama geliştirme sürecinizde yardım mı lazım?

Bir sonraki yazıda görüşmek üzere! 🚀

Flutter'da Uygulama İkonu Oluşturma ve Ayarlama