Flutter: AlertDialog Kullanımı ve Özelleştirme

AlertDialog, kullanıcıya uyarı mesajı verebildiğimiz veya onay alabileceğimiz bir popup yapısıdır. Kullanıcı dialog'u kapatmadığı sürece ekranda kalır ve arka plandaki içerikle etkileşimi engeller.

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

AlertDialog göstermek için showDialog fonksiyonu kullanılır:

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text('Başlık'),
      content: Text('İçerik metni'),
      actions: [
        TextButton(
          onPressed: () => Navigator.of(context).pop(),
          child: Text('TAMAM'),
        ),
      ],
    );
  },
);

Onay Dialog'u

Kullanıcıdan onay almak için:

Future<void> _showConfirmDialog() async {
  final result = await showDialog<bool>(
    context: context,
    builder: (context) => AlertDialog(
      title: Text('Silme Onayı'),
      content: Text('Bu öğeyi silmek istiyor musunuz?'),
      actions: [
        TextButton(
          onPressed: () => Navigator.pop(context, false),
          child: Text('HAYIR'),
        ),
        TextButton(
          onPressed: () => Navigator.pop(context, true),
          child: Text('EVET'),
        ),
      ],
    ),
  );
  
  if (result == true) {
    // Silme işlemi
  }
}

Girdi Alma

TextField ile kullanıcıdan veri almak:

final controller = TextEditingController();

showDialog(
  context: context,
  builder: (context) => AlertDialog(
    title: Text('İsim Girin'),
    content: TextField(
      controller: controller,
      decoration: InputDecoration(hintText: 'Adınız...'),
    ),
    actions: [
      TextButton(
        onPressed: () => Navigator.pop(context),
        child: Text('İPTAL'),
      ),
      TextButton(
        onPressed: () => Navigator.pop(context, controller.text),
        child: Text('KAYDET'),
      ),
    ],
  ),
);

Önemli Özellikler

Özellik	Açıklama
title	Dialog başlığı
content	Dialog içeriği
actions	Alt kısımdaki butonlar
shape	Dialog şekli
backgroundColor	Arka plan rengi
barrierDismissible	Dışına tıklayınca kapansın mı

barrierDismissible

Dialog dışına tıklandığında kapanmasını engellemek için:

showDialog(
  context: context,
  barrierDismissible: false, // Dışına tıklayınca kapanmaz
  builder: (context) => AlertDialog(
    title: Text('Zorunlu Seçim'),
    content: Text('Bir seçenek seçmelisiniz'),
    actions: [...],
  ),
);

Özet

• AlertDialog: Modal popup penceresi
• showDialog: Dialog göstermek için kullanılır
• Navigator.pop(): Dialog'u kapatır ve değer döndürür
• barrierDismissible: Dışına tıklama davranışını kontrol eder
• actions: Dialog butonlarını içerir

AlertDialog, kullanıcı onayı ve bilgilendirme için temel bir araçtır.