Flutter’da Butonlar: Fonksiyonel ve Etkili Kullanım

 Flutter’da en çok kullanılan widget’lardan biri butonlar. Çünkü kullanıcı etkileşimini sağlamak, uygulama içindeki eylemleri tetiklemek ve gezinmeyi kolaylaştırmak için temel bir araç. Flutter’ın esneklik ve özelleştirme yetenekleri sayesinde çok çeşitli ve görsel açıdan çekici butonlar oluşturmak mümkün.

Tasarım kısmına geçmeden önce genel olarak bilgi vermek gerekirse, temelde üç tür buton mevcut: ElevatedButton, TextButton ve OutlinedButton. Bu buton türleri arasındaki temel farkları anlamak, butonlarımızı doğru bir şekilde seçmemize yardımcı olabilir.

ElevatedButton

Varsayılan olarak bir yükseltilmiş efekti vardır, yani arka plan rengi belirgin bir şekilde yükseltilir. Ve arkasında buna bağlı olarak bir gölgelendirme efekti görülür.

ElevatedButton(
              onPressed: () {},
              child: const Text('Elevated Button'),
            ),

TextButton

Metin tabanlı bir düğmeyi temsil eder ve genellikle daha sade bir görünüm sunar. Arka plan rengi ya hiç yoktur ya da hafif bir renge sahiptir.

TextButton(
              onPressed: () {},
              child: const Text('Text Button'),
            ),

OutlinedButton

Kenarları belirgin olan ve içi boş bir düğme gibidir. Dış kenarları çizgili bir çerçeve ile belirginleştirilmiş olduğundan ismi buradan gelir.

OutlinedButton(
              onPressed: () {},
              child: const Text('Outlined Button'),
            ),

IconButton

Yalnızca bir ikon içeren butonlar için kullanırız. Minimal bir görüntü elde ederiz.

IconButton(
              onPressed: () {},
              icon: const Icon(Icons.home),
              iconSize: 32.0,
            ),

Kullanım Özellikleri

Butonların fonksiyonel kullanımını onPressed metoduyla yönetebiliriz. Yukarıdaki örneklerde anonim kullanımına örnek verdiğim butonların onPressed özelliğine null verirsem butonlar görüntülenir ama tıklanamaz olur. Bunu aynı zamanda enabled özelliğine true veya false vererek de yapabiliriz.

Butonlara kullanıcı deneyimini geliştirmek amaçlı animasyonlar ekleyebiliriz. Basit geçiş efektleri ya da dokunma tepkileri olabilir, üzerine gelindiğinde gösterilecek renk seçenekleri olabilir, bu gibi özelleştirmeler yaparak yaratıcı ve atkileyici kullanıcı arayüzleri elde edebiliriz.

onLongPressed özelliği butona uzun süre basıldığında gerçekleşecek eylemleri belirttiğimiz bir diğer özellik.

Stil Özellikleri

Flutter’da butonları “style” özelliği aracılığıyla dilediğimiz gibi özelleştirebiliriz.

ElevatedButton.styleFrom, TextButton.styleFrom ve OutlinedButton.styleFromgibi özel fonksiyonlar aracılığıyla her buton türü için ayrı ayrı style özellikleri belirtebiliriz.

Örneğin;

• shadowColor: gölgelendirme rengi,
• elevation: butonun zeminden yüksekliği,
• textStyle: buton üzerinde görülecek metnin stil özellikleri,
• padding: butonun içeriği ile kenarları arasındaki boşluk,
• shape: butonun şekli, kenarlıkları, köşe yuvarlatma stili,
• duration: animasyon süresi gibi birçok özelleştirilebilir özellik mevcut.

Bunların dışında size özelliği ile buton genişliğini ayarlayabiliriz.

style: ElevatedButton.styleFrom(
    minimumSize: Size(200, 50), // Genişlik ve yüksekliği belirleyin
  ),

Butonun rengini bir şarta bağlayıp, o şart gerçekleştiğinde farklı bir renk alacak şekilde dinamikleştirebiliriz.

style: ElevatedButton.styleFrom(
                backgroundColor: someCondition ? Colors.blue : Colors.red,
              ),

Butonun içeriği kadar geniş olmasını sağlamak için Expanded widget’ı içerisine yerleştirebiliriz.

Expanded(
          child: ElevatedButton(
            onPressed: () {
              // Butona tıklandığında gerçekleşecek eylemler
            },
            child: const Text('Butona İstediğiniz Kadar Tıklayabilirsiniz.'),
          ),
        ),

Butonun içeriğini özellştirmek ve birden fazla öğe eklemek için row ve column widgetlarından yararlanabiliriz.

ElevatedButton(
        onPressed: () {},
        child: const Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Icon(Icons.star),
            SizedBox(width: 8),
            Text('Like'),
          ],
        ),
      ),

Sonuç olarak Flutter’da butonlar kullanıcı arayüzünü etkileşimli ve çekici hale getirmenin kolay ve bence biraz da eğlenceli birer aracı. Bunun yanı sıra doğru buton türünü seçmek, tasarımı özelleştirmek kullanıcı deneyimini iyileştirmemize de olanak sağlıyor. Umarım bu yazımda faydalanabileceğiniz, ilham alabileceğiniz kullanımlar bulabilirsiniz.

Hepimize kolaylıklar diliyorum.

Selin.