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

Pardus ETAP 23 İçin Flutter ile Dijital "Öğrenci Seçici" Uygulaması

Uygulama: Pardus Logosunu Göster

Pardus ETAP 23 İçin Flutter ile Sanal Laboratuvar