Flutter: FloatingActionButton (FAB) Kullanımı ve Özellikleri

FloatingActionButton (FAB), uygulamanızın en temel aksiyonunu (oluşturma, paylaşma, arama vb.) temsil eden, genellikle ekranın sağ alt köşesinde bulunan dairesel bir butondur. Material Design'ın en ikonik öğelerinden biridir.

Canlı Demo

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

Temel Kullanım

FAB genellikle Scaffold widget'ının floatingActionButton parametresine verilir.

Scaffold(
  appBar: AppBar(title: Text('FAB Örneği')),
  body: Center(child: Text('Merhaba Flutter')),
  floatingActionButton: FloatingActionButton(
    onPressed: () {
      print('FAB tıklandı!');
    },
    child: Icon(Icons.add),
  ),
)

Özelleştirme Seçenekleri

FAB'ın rengini, şeklini ve diğer özelliklerini kolayca değiştirebilirsiniz.

FloatingActionButton(
  onPressed: () {},
  child: Icon(Icons.download),
  backgroundColor: Colors.purple, // Buton rengi
  foregroundColor: Colors.white, // İkon rengi
  elevation: 8.0, // Gölge miktarı
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10), // Köşeleri yuvarlatılmış kare
  ),
  tooltip: 'İndir', // Uzun basıldığında çıkan açıklama
)

Mini FAB

Daha küçük bir buton gerektiğinde mini özelliğini kullanabilirsiniz.

FloatingActionButton(
  mini: true, // Küçük boyutlu FAB
  onPressed: () {},
  child: Icon(Icons.reply),
)

FloatingActionButton.extended

Eğer butonun yanında metin de göstermek istiyorsanız extended varyasyonunu kullanmalısınız.

FloatingActionButton.extended(
  onPressed: () {},
  icon: Icon(Icons.add),
  label: Text('Yeni Görev'),
  backgroundColor: Colors.green,
)

Konumlandırma (FloatingActionButtonLocation)

FAB'ın ekrandaki konumunu Scaffold'ın floatingActionButtonLocation parametresi ile değiştirebilirsiniz.

Scaffold(
  floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked, // Alt ortada, BottomNavigationBar ile entegre
  floatingActionButton: FloatingActionButton(
    onPressed: () {},
    child: Icon(Icons.add),
  ),
  bottomNavigationBar: BottomAppBar(
    shape: CircularNotchedRectangle(), // FAB için oyuk oluşturur
    child: Container(height: 50.0),
  ),
  // ...
)

Yaygın konumlar:

• endFloat (Varsayılan: Sağ alt)
• centerFloat (Orta alt)
• startFloat (Sol alt)
• endDocked, centerDocked (BottomAppBar ile kullanım için)

Çoklu FAB Kullanımı

Sayfada birden fazla FAB kullanmanız gerekirse, bunları bir Column veya Row içine alabilirsiniz. Ancak her bir FAB için benzersiz bir heroTag belirtmeniz gerekir, aksi halde hata alırsınız.

Column(
  mainAxisAlignment: MainAxisAlignment.end,
  children: [
    FloatingActionButton(
      heroTag: "btn1",
      onPressed: () {},
      child: Icon(Icons.refresh),
    ),
    SizedBox(height: 10),
    FloatingActionButton(
      heroTag: "btn2",
      onPressed: () {},
      child: Icon(Icons.add),
    ),
  ],
)

Özet

• FloatingActionButton: Birincil aksiyon butonu.
• mini: Boyutu küçültür.
• extended: İkon ve metin içerir.
• heroTag: Birden fazla FAB varsa benzersiz olmalıdır.
• Location: Scaffold üzerinden konumu ayarlanır.

FAB, kullanıcıların en sık yaptığı işlemi vurgulamak için mükemmel bir araçtır.