Flutter: SnackBar ve SnackBarAction Kullanımı

SnackBar, kullanıcıya yaptığı işlemler hakkında kısa süreli geri bildirim veren bir görsel nesnedir. Ekranın alt kısmında belirir ve belirli bir süre sonra otomatik olarak kaybolur. SnackBarAction ise SnackBar üzerinde tıklanabilir bir buton ekler.

Canlı Demo

Aşağıdaki interaktif örnekte bu widget'ı deneyebilirsiniz:

💡 Eğer yukarıdaki örnek açılmazsa, DartPad linkine tıklayarak yeni sekmede çalıştırabilirsiniz.

Temel Kullanım

SnackBar göstermek için ScaffoldMessenger kullanılır:

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Mesajınız burada'),
  ),
);

SnackBarAction Kullanımı

Kullanıcının etkileşime geçebileceği bir buton ekler:

ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(
    content: Text('Öğe silindi'),
    action: SnackBarAction(
      label: 'GERİ AL',
      onPressed: () {
        // Geri alma işlemi
      },
    ),
  ),
);

Önemli Özellikler

Özellik	Açıklama
content	SnackBar içeriği (genellikle Text)
action	Tıklanabilir buton (SnackBarAction)
duration	Görünme süresi
backgroundColor	Arka plan rengi
behavior	fixed veya floating
shape	Şekil (köşe yuvarlaklığı vb.)
margin	Floating modda kenar boşlukları

Floating SnackBar

Ekranın altından biraz yukarıda, yüzen bir görünüm:

SnackBar(
  content: Text('Floating SnackBar'),
  behavior: SnackBarBehavior.floating,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10),
  ),
  margin: EdgeInsets.all(16),
)

İkonlu SnackBar

SnackBar(
  content: Row(
    children: [
      Icon(Icons.info, color: Colors.white),
      SizedBox(width: 10),
      Text('Bilgilendirme mesajı'),
    ],
  ),
  backgroundColor: Colors.blue,
)

SnackBar'ı Programatik Kapatma

final snackBar = ScaffoldMessenger.of(context).showSnackBar(
  SnackBar(content: Text('Yükleniyor...')),
);

// İşlem tamamlandığında kapat
await someAsyncOperation();
snackBar.close();

Özet

• SnackBar: Kullanıcıya kısa süreli geri bildirim verir
• SnackBarAction: SnackBar üzerinde tıklanabilir buton
• ScaffoldMessenger: SnackBar göstermek için kullanılır
• behavior: floating ile modern görünüm elde edilir
• duration: Görünme süresini kontrol eder

SnackBar, kullanıcı deneyimini iyileştirmek için vazgeçilmez bir araçtır.