Flutter: PopupMenuButton Kullanımı ve Menü Yapıları

PopupMenuButton, kullanıcıya kolaylık sağlayan ve bir eylem sonucu görünür hale gelen menü yapısıdır. Menüler item'lardan oluşur ve her bir item'ın value'su olmalıdır. Aksi takdirde tıklanma işlemini yakalayamayız.

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

PopupMenuButton<String>(
  onSelected: (String value) {
    print('Seçilen: $value');
  },
  itemBuilder: (BuildContext context) => [
    PopupMenuItem<String>(
      value: 'edit',
      child: Text('Düzenle'),
    ),
    PopupMenuItem<String>(
      value: 'delete',
      child: Text('Sil'),
    ),
  ],
)

Enum ile Kullanım

Tip güvenliği için enum kullanımı önerilir:

enum MenuAction { edit, delete, share }

PopupMenuButton<MenuAction>(
  onSelected: (MenuAction action) {
    switch (action) {
      case MenuAction.edit:
        // Düzenleme işlemi
        break;
      case MenuAction.delete:
        // Silme işlemi
        break;
      case MenuAction.share:
        // Paylaşma işlemi
        break;
    }
  },
  itemBuilder: (context) => [
    PopupMenuItem(value: MenuAction.edit, child: Text('Düzenle')),
    PopupMenuItem(value: MenuAction.delete, child: Text('Sil')),
    PopupMenuItem(value: MenuAction.share, child: Text('Paylaş')),
  ],
)

İkonlu Menü Öğeleri

PopupMenuItem<String>(
  value: 'settings',
  child: Row(
    children: [
      Icon(Icons.settings),
      SizedBox(width: 10),
      Text('Ayarlar'),
    ],
  ),
)

PopupMenuDivider

Menü öğeleri arasına ayırıcı eklemek için:

itemBuilder: (context) => [
  PopupMenuItem(value: 'edit', child: Text('Düzenle')),
  PopupMenuItem(value: 'copy', child: Text('Kopyala')),
  PopupMenuDivider(), // Ayırıcı çizgi
  PopupMenuItem(value: 'delete', child: Text('Sil')),
]

Önemli Özellikler

Özellik	Açıklama
onSelected	Öğe seçildiğinde çağrılır
itemBuilder	Menü öğelerini oluşturur
icon	Menü butonu ikonu
child	Özel buton widget'ı
offset	Menü konumu ofseti
shape	Menü şekli
color	Menü arka plan rengi
enabled	Menü aktif/pasif durumu

Özel Buton ile Kullanım

PopupMenuButton<String>(
  child: Container(
    padding: EdgeInsets.all(12),
    decoration: BoxDecoration(
      color: Colors.blue,
      borderRadius: BorderRadius.circular(8),
    ),
    child: Row(
      children: [
        Text('Menü', style: TextStyle(color: Colors.white)),
        Icon(Icons.arrow_drop_down, color: Colors.white),
      ],
    ),
  ),
  itemBuilder: (context) => [...],
)

Özet

• PopupMenuButton: Açılır menü oluşturur
• PopupMenuItem: Menü öğelerini temsil eder
• value: Her öğenin benzersiz değeri (zorunlu)
• onSelected: Seçim yapıldığında tetiklenir
• PopupMenuDivider: Öğeler arası ayırıcı

PopupMenuButton, kullanıcıya bağlamsal seçenekler sunmak için idealdir.