Flutter AlertDialog Widgeti Kullanımı

Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda AlertDialog widgetini ve kullanımını anlatacağım. Hadi başlayalım !

tter’da AlertDialog, kullanıcılara belirli bir mesajı veya uyarıyı göstermek için kullanılan bir widget’tır. Bu widget, uygulamanızda etkileşimli bir iletişim kutusu oluşturmanıza olanak tanır. AlertDialog, kullanıcının bir işlem yapmadan önce bir uyarı veya onay mesajı görüntülemesine yardımcı olabilir. Bu makalede, Flutter’da AlertDialog widgeti hakkında daha fazla bilgi edineceğiz ve örneklerle kullanımını öğreneceğiz.

AlertDialog Widgeti Özellikleri

Flutter’da AlertDialog widgeti, birçok özelleştirilebilir özelliğe sahiptir. Bunlar arasında şunlar yer alır:

• title: AlertDialog’un başlığıdır. Metin veya bir widget olabilir.
• content: AlertDialog’da görüntülenecek içerik. Metin veya bir widget olabilir.
• actions: AlertDialog’da görüntülenecek işlem düğmeleri.
• actionsOverflowDirection: İşlem düğmelerinin dikey taşması durumunda aşırı akış yönünü belirler.
• actionsPadding: İşlem düğmeleri arasındaki boşluğu ayarlar.
• backgroundColor: AlertDialog’un arka plan rengini belirler.
• contentPadding: İçerik alanının çevresindeki dolgu boyutunu ayarlar.
• contentTextStyle: İçerik metninin stili.
• elevation: AlertDialog’un yükseltilmesi.
• insetAnimationCurve: AlertDialog’un açılması sırasında kullanılan animasyon eğrisi.
• insetAnimationDuration: AlertDialog’un açılması için kullanılan animasyon süresi.
• semanticLabel: İşitme engelli kullanıcılar için AlertDialog’a ilişkin açıklama etiketi.

AlertDialog Widgeti Kullanımı

AlertDialog widgeti kullanmak için, öncelikle bir showDialog metodu çağırmamız gerekiyor. Bu metot, AlertDialog’u görüntülememize yardımcı olur. showDialog metodu, birkaç özellik içerir:

• context: Diyalogun nerede görüntüleneceğini belirleyen bir BuildContext nesnesi.
• builder: Diyalog içeriğinin oluşturulmasından sorumlu bir fonksiyon.
• barrierDismissible: Kullanıcının diyalog dışındaki boşluğa tıklayarak diyalogu kapatmasına izin verilip verilmeyeceğini belirler.

showDialog(
  context: context,
  builder: (BuildContext context) {
    return AlertDialog(
      title: Text("Başlık"),
      content: Text("İçerik"),
      actions: [
        FlatButton(
          child: Text("İptal"),
          onPressed: () {
            Navigator.of(context).pop();
          },
        ),
        FlatButton(
          child: Text("Tamam"),
          onPressed: () {
            Navigator.of(context).pop();
          },
        )
      ],
    );
  }
);

Yukarıdaki örnekte, showDialog metodu kullanılarak basit bir AlertDialog oluşturduk. Bu örnekte, “Başlık” ve “İçerik” metinleri görüntüleniyor ve iki işlem düğmesi (“İptal” ve “Tamam”) bulunuyor. İşlem düğmeleri, kullanıcının diyalogu kapatmasına yardımcı olan Navigator.of(context).pop() metodu ile birlikte çalışıyor.

AlertDialog Widgeti Kod Örnekleri

Basit Bir AlertDialog Örneği

RaisedButton(
  child: Text("Uyarı"),
  onPressed: () {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text("Başlık"),
          content: Text("İçerik"),
          actions: [
            FlatButton(
              child: Text("Tamam"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            )
          ],
        );
      }
    );
  },
)

Bu örnekte, bir RaisedButton kullanarak basit bir AlertDialog gösteriyoruz. showDialog metodunu kullanarak AlertDialog’un içeriğini ve işlem düğmelerini belirliyoruz.

İki İşlem Düğmesi Olan Bir AlertDialog Örneği

RaisedButton(
  child: Text("Sil"),
  onPressed: () {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          title: Text("Silme İşlemi"),
          content: Text("Bu öğeyi silmek istediğinizden emin misiniz?"),
          actions: [
            FlatButton(
              child: Text("İptal"),
              onPressed: () {
                Navigator.of(context).pop();
              },
            ),
            FlatButton(
              child: Text("Sil"),
              onPressed: () {
                // Silme işlemi burada gerçekleştirilebilir
                Navigator.of(context).pop();
              },
            )
          ],
        );
      }
    );
  },
)

Bu örnekte, iki işlem düğmesi olan bir AlertDialog gösteriyoruz. Kullanıcının “İptal” düğmesine basması durumunda diyalog kapatılırken “Sil” düğmesine basması durumunda silme işlemi gerçekleştirilir.

Özelleştirilmiş Bir AlertDialog Örneği

RaisedButton(
  child: Text("Özelleştirilmiş"),
  onPressed: () {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        return AlertDialog(
          backgroundColor: Colors.blueGrey[900],
          contentPadding: EdgeInsets.all(20),
          title: Text(
            "Özelleştirilmiş Başlık",
            style: TextStyle(color: Colors.white),
          ),
          content: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Text(
                "Bu bir özelleştirilmiş AlertDialog örneğidir.",
                style: TextStyle(color: Colors.white),
              ),
              SizedBox(height: 10),
              Text(
                "İçerik kısmında birden fazla widget kullanabilirsiniz.",
                style: TextStyle(color: Colors.white),
              ),
              SizedBox(height: 10),
              Row(
                mainAxisAlignment: MainAxisAlignment.end,
                children: [
                  FlatButton(
                    child: Text("Tamam", style: TextStyle(color: Colors.white)),
                    onPressed: () => Navigator.of(context).pop(),
                  ),
                  SizedBox(width: 10),
                  FlatButton(
                    child: Text("İptal", style: TextStyle(color: Colors.white)),
                    onPressed: () => Navigator.of(context).pop()
                  )
                ],
              ),
            ],
          );
        },
      );
    },
)

Bu örnekte, birkaç özellik kullanarak özelleştirilmiş bir AlertDialog örneği gösteriyoruz. backgroundColor özelliği kullanarak arkaplan rengini ayarlıyoruz. contentPadding özelliğiyle içerik kısmının etrafındaki boşluğu ayarlıyoruz. Ayrıca, başlık ve içerik kısımlarının metin rengini style özelliği ile değiştiriyoruz. İşlem düğmelerinin rengini değiştirmek için FlatButton’ların metin stilinde color özelliğini kullanıyoruz.

Sonuç

Bu makalede, Flutter’da AlertDialog widgetinin nasıl kullanılacağı hakkında bilgi verdik ve farklı örneklerle birlikte kullanımını gösterdik. Bu örnekler sayesinde, farklı işlem