Flutter Butonlar

Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda Flutter’daki butonları anlatacağım. Hadi başlayalım !

Flutter’da butonlar, kullanıcının uygulamanızda bir işlemi başlatmasına veya bir eylemi gerçekleştirmesine izin veren en temel kullanıcı arayüzü bileşenlerinden biridir. Bu makalede, Flutter’da kullanabileceğiniz farklı türlerde butonları tanıtacağım ve her biri için örnek kodlar sunacağım.

MaterialButton

MaterialButton, özelleştirilebilir dokunmatik düğmeleri oluşturmak için kullanılan bir widget’tır. MaterialButton’ın varsayılan olarak bir doldurma rengi ve kenarlık kalınlığı vardır, ancak bunları özelleştirebilirsiniz. Ayrıca, MaterialButton’ın şekli, boyutu ve içeriği de özelleştirilebilir.

Örnek kullanım:

MaterialButton(
  onPressed: () {
    // Butona tıklandığında yapılacak işlemler buraya yazılır
  },
  child: Text('MaterialButton'),
  color: Colors.blue,
  textColor: Colors.white,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
    side: BorderSide(color: Colors.blue),
  ),
  padding: EdgeInsets.symmetric(vertical: 12.0, horizontal: 24.0),
)

Yukarıdaki örnekte, MaterialButton’a bir onPressed fonksiyonu verilmiştir. Bu, butona tıklandığında gerçekleşecek eylemi belirler. Ayrıca, MaterialButton’a bir rengi, şekli, kenarlık rengi, dolgu rengi, yazı rengi ve boyutu belirlemek için bir dizi özellik atanmıştır.

RaisedButton

RaisedButton, yükseltilmiş bir düğme oluşturmak için kullanılan bir widget’tır. Bu tür düğmeler genellikle uygulamadaki öncelikli işlemler için kullanılır.

Örnek kullanım:

RaisedButton(
  onPressed: () {
    // Butona tıklandığında yapılacak işlemler buraya yazılır
  },
  child: Text('RaisedButton'),
  color: Colors.blue,
  textColor: Colors.white,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  padding: EdgeInsets.symmetric(vertical: 12.0, horizontal: 24.0),
)

RaisedButton, MaterialButton’dan farklı olarak, düğmenin yükseltilmiş olmasını sağlayan bir gölgeye sahiptir. Ayrıca, RaisedButton’ın şekli, boyutu ve içeriği de özelleştirilebilir.

FlatButton

FlatButton, düz bir düğme oluşturmak için kullanılan bir widget’tır. Bu tür düğmeler genellikle bir arka plan rengi yerine metin ve ikonları vurgulamak için kullanılır.

Örnek kullanım:

FlatButton(
  onPressed: () {
    // Butona tıklandığında yapılacak işlemler buraya yazılır
  },
  child: Text('FlatButton'),
  textColor: Colors.blue,
  padding: EdgeInsets.symmetric(vertical: 12.0, horizontal: 24.0),
)

FlatButton, MaterialButton’dan farklı olarak, gölge veya kenarlık çizgisine sahip değildir. Ayrıca, FlatButton’ın şekli, boyutu ve içeriği de özelleştirilebilir.

OutlineButton

OutlineButton, kenarlık çizgisi ile çevrelenmiş bir düğme oluşturmak için kullanılan bir widget’tır. Bu tür düğmeler, bir arka plan rengi yerine metin ve ikonları vurgulamak için kullanılır.

Örnek kullanım:

OutlineButton(
  onPressed: () {
    // Butona tıklandığında yapılacak işlemler buraya yazılır
  },
  child: Text('OutlineButton'),
  textColor: Colors.blue,
  borderSide: BorderSide(color: Colors.blue),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10.0),
  ),
  padding: EdgeInsets.symmetric(vertical: 12.0, horizontal: 24.0),
)

OutlineButton, bir kenarlık rengi ve kalınlığı belirlemek için borderSide özelliğine sahiptir. Ayrıca, OutlineButton’ın şekli, boyutu ve içeriği de özelleştirilebilir.

IconButton

IconButton, tıklanabilir bir ikon düğmesi oluşturmak için kullanılan bir widget’tır. Bu tür düğmeler, genellikle özellikle mobil cihazlar için uygun olan küçük alanlarda kullanılır.

Örnek kullanım:

IconButton(
  icon: Icon(Icons.add),
  onPressed: () {
    // Butona tıklandığında yapılacak işlemler buraya yazılır
  },
)

IconButton, sadece bir simge içerir ve genellikle bir arka plan rengi veya metin içermez. Ayrıca, IconButton’ın şekli ve boyutu da özelleştirilebilir.

Sonuç

Flutter’da kullanabileceğiniz farklı türlerde butonlar bu kadar. Bu makalede her biri için örnek kullanımlarını gösterdik. İşte, kullanıcıların uygulamanızda bir işlemi başlatmasına veya bir eylemi gerçekleştirmesine izin vermek için bu widget’lardan birini kullanabilirsiniz.

Evet Flutter’da butonlar bu şekilde olmakta. Tüm Flutter yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.