Flutter: DropdownButton Kullanımı ve Özellikleri

DropdownButton, Android'de Spinner olarak bilinen, tıkladığımızda bir liste görebildiğimiz seçim yapısıdır. Kullanıcıya birden fazla seçenek sunmak ve tek bir seçim yaptırmak için idealdir.

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

DropdownButton, bir liste içinden seçim yapmak için kullanılır.

String? selectedValue;

DropdownButton<String>(
  value: selectedValue,
  hint: Text('Seçim yapın'),
  items: ['Seçenek 1', 'Seçenek 2', 'Seçenek 3'].map((String value) {
    return DropdownMenuItem<String>(
      value: value,
      child: Text(value),
    );
  }).toList(),
  onChanged: (String? newValue) {
    setState(() {
      selectedValue = newValue;
    });
  },
)

Önemli Özellikler

Özellik	Açıklama
value	Seçili olan değer
hint	Seçim yapılmadığında gösterilen widget
items	DropdownMenuItem listesi
onChanged	Seçim değiştiğinde çağrılan fonksiyon
isExpanded	Genişliği parent'a göre ayarlar
underline	Alt çizgi widget'ı
icon	Açılır ok ikonu
dropdownColor	Açılan listenin arka plan rengi

DropdownButtonFormField

Form içinde kullanım için DropdownButtonFormField tercih edilmelidir. Validasyon desteği sunar.

DropdownButtonFormField<String>(
  value: selectedValue,
  decoration: InputDecoration(
    labelText: 'Kategori',
    border: OutlineInputBorder(),
    prefixIcon: Icon(Icons.category),
  ),
  items: categories.map((String category) {
    return DropdownMenuItem<String>(
      value: category,
      child: Text(category),
    );
  }).toList(),
  onChanged: (String? newValue) {
    setState(() {
      selectedValue = newValue;
    });
  },
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Lütfen bir kategori seçin';
    }
    return null;
  },
)

Özelleştirilmiş DropdownMenuItem

Her bir item'ı özelleştirebilirsiniz:

DropdownMenuItem<String>(
  value: 'premium',
  child: Container(
    padding: EdgeInsets.symmetric(vertical: 8),
    child: Row(
      children: [
        Icon(Icons.star, color: Colors.amber),
        SizedBox(width: 10),
        Text('Premium Üyelik'),
        Spacer(),
        Container(
          padding: EdgeInsets.symmetric(horizontal: 8, vertical: 2),
          decoration: BoxDecoration(
            color: Colors.green,
            borderRadius: BorderRadius.circular(10),
          ),
          child: Text('Önerilen', style: TextStyle(color: Colors.white, fontSize: 10)),
        ),
      ],
    ),
  ),
)

Özet

• DropdownButton: Android Spinner'ın Flutter karşılığı
• DropdownMenuItem: Liste elemanlarını temsil eder
• DropdownButtonFormField: Form validasyonu için kullanılır
• isExpanded: Genişliği kontrol eder
• onChanged: Seçim değişikliğini yakalar

DropdownButton, kullanıcıdan tek seçim almak için en yaygın kullanılan widget'lardan biridir.