Uygulama İkonunu Özelleştirme

Bir uygulamanın "amatör" görünümden "profesyonel" görünüme geçişindeki en önemli adım, o mavi varsayılan Flutter logosundan kurtulup kendi markanızı basmaktır.

Linux'ta (Pardus) bu işlem iki aşamalıdır:

  1. Launcher İkonu: Başlat menüsünde ve Görev Çubuğunda (Panel) görünen ikon.

  2. Window İkonu: Çalışan pencerenin sol üst köşesinde ve Alt+Tab geçişlerinde görünen ikon.

Bu işi en temiz ve hatasız yapan yöntem, flutter_launcher_icons paketini kullanmaktır. Bu paket, tek bir yüksek çözünürlüklü görseli alır ve Linux, Windows, Android, iOS için gerekli tüm boyutlara otomatik dönüştürüp yerleştirir.


1. Adım: Paketi Ekleme

Bu paket sadece geliştirme aşamasında lazım olduğu için dev_dependency olarak ekleyeceğiz. Terminali proje klasöründe açın:

Bash:
flutter pub add --dev flutter_launcher_icons

2. Adım: Konfigürasyon (pubspec.yaml)

pubspec.yaml dosyanızı açın. Dosyanın en altına (veya dev_dependencies kısmının altına) şu ayarları ekleyin.

Önemli: image_path kısmında projenizdeki logonun yolunu gösterdiğinizden emin olun. Bizim örneğimizde assets/pardus_logo.png kullanıyorduk.

YAML:
flutter_launcher_icons:
  android: true
  ios: true
  image_path: "assets/pardus_logo.png"
  min_sdk_android: 21 # Zorunlu değil ama önerilir
  web:
    generate: true
    image_path: "assets/pardus_logo.png"
    background_color: "#hex_code"
    theme_color: "#hex_code"
  windows:
    generate: true
    icon_size: 48
  linux:
    generate: true
    icon_size: 48

3. Adım: İkonları Oluşturma

Ayarları kaydettikten sonra terminale şu sihirli komutu yazın:

Bash:
dart run flutter_launcher_icons

Bu komut ne yaptı?

  • Arka planda linux/packaging/data/ klasörüne logonuzu uygun formatta yerleştirdi.

  • linux/runner/ içindeki C++ dosyalarında ikon tanımlarını güncelledi.

  • Android ve iOS klasörlerine de gerekli ikonları attı.


4. Adım: Çalışan Pencere İkonunu Garantiye Alma (Window Manager)

Bazen Linux masaüstü ortamları (XFCE / GNOME), önbellek (cache) nedeniyle ikon değişikliklerini anlık algılayamayabilir veya uygulama çalışırken pencere kenarında (Title Bar) hala eski ikonu gösterebilir.

Bunu kod tarafında zorlamak için, önceki adımda kurduğumuz window_manager paketini kullanabiliriz.

lib/main.dart dosyasında main() fonksiyonunuza şu küçük eklemeyi yapın:

Dart:
void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  await windowManager.ensureInitialized();

  WindowOptions windowOptions = const WindowOptions(
    size: Size(800, 600),
    center: true,
    title: "Pardus Uygulaması", // Pencere başlığı
  );

  await windowManager.waitUntilReadyToShow(windowOptions, () async {
    await windowManager.show();
    await windowManager.focus();
    
    // EKLEME: Çalışan pencerenin ikonunu zorla ayarla
    // Not: Bu işlem için assets klasöründeki dosyanın pubspec.yaml'da 
    // "assets" altında tanımlı olması gerekir (bunu zaten yapmıştık).
    await windowManager.setIcon('assets/pardus_logo.png'); 
  });

  runApp(const PardusUygulamasi());
}

5. Adım: Son Kontrol ve Önbellek Temizliği

Linux ikonları bazen "cache"te tutar. Değişikliği kesin görmek için projeyi temizleyip yeniden derleyin:

Bash:
flutter clean
flutter pub get
flutter run -d linux

Sonuç:

  1. Uygulama açıldığında sol üst köşede (Pencere kenarlığı varsa) Pardus logosunu göreceksiniz.

  2. Alt panele (Görev çubuğu) baktığınızda uygulamanızın kendi logosuyla orada durduğunu göreceksiniz.

  3. Alt + Tab yaptığınızda pencereler arasında yine sizin logonuz görünecek.


⚠️ Paketleme ile İlgili Küçük Bir Not

Daha önce kullandığımız flutter_to_debian paketi ile .deb oluştururken, pubspec.yaml içindeki flutter_to_debian: ayarında icon: kısmını tanımlamıştık.

Eğer uygulamanızı .deb olarak paketleyip kurarsanız, Pardus Başlat Menüsü (Launcher) ikonunu o ayar belirler.

Ancak flutter run ile geliştirme yaparken veya uygulamayı klasörden çift tıklayıp çalıştırırken (portable mod), yukarıda yaptığımız flutter_launcher_icons ve windowManager.setIcon ayarları geçerli olur.

Bu görselleştirme adımıyla uygulamanız artık tam anlamıyla bir "Pardus Sistem Aracı" gibi görünüyor!

Yorumlar

Bu blogdaki popüler yayınlar

Dart Uygulama Sınavı: Pardus ETAP 23 Kurulum Otomasyonu

Dart Programlama Dil Uygulama Sınavı Çalışma Soruları

Pardus Üzerinde Flutter Geliştirme Ortamı Kurulumu