Flutter RawMaterialButton Kullanımı

Herkese merhaba. Bu yazımızda RoundIconButton özelliklerini ve neden kullandığımızı öğreneceğiz. Flutterda en çok kullanılan 2 buton türünden biri RoundIconButton , diğeri ise FlatButton’dur.

RawMaterialButton Nedir?

RawMaterialButton, Flutter’da kullanılan bir widget’tır ve kullanıcı etkileşimine olanak tanıyan bir düğme veya buton oluşturmak için kullanılır. Bu widget, düğme özelliklerini ve davranışlarını özelleştirmek için çeşitli seçenekler sunar ve kullanıcıya özgün bir görünüm kazandırmak için tasarım ve stille ilgili tam kontrol sağlar.

RawMaterialButton‘ın bazı önemli özellikleri şunlardır:

1. child: İçeriğini belirlemek için kullanılır, yani düğme üzerinde görünen metin, ikon veya başka bir widget.
2. onPressed: Düğme tıklandığında gerçekleşen işlemi belirlemek için kullanılır, genellikle bir işlevi tetiklemek için kullanılır.
3. elevation: Düğmenin yükselti seviyesini ayarlar, bu düğmenin kabartma efekti gibi görünmesini sağlar.
4. fillColor: Düğmenin arka plan rengini belirler.
5. shape: Düğmenin şeklini belirlemek için kullanılır, örneğin düğmenin köşelerini yuvarlamak veya düğmenin şeklini özelleştirmek için kullanılabilir.

RawMaterialButton, kullanıcı arayüzünüzde interaktif öğeler eklemek ve kullanıcı etkileşimini kolayca işlemek için kullanışlı bir Flutter widget’idir. Tasarım ve işlevsellik açısından geniş bir özelleştirme olanağı sunar ve uygulama geliştiricilerine çeşitli buton stilleri oluşturma özgürlüğü tanır.

RoundIconButton Nedir?

RoundIconButton, muhtemelen özel bir Flutter widget veya kütüphane içinde yer almayan bir spesifik terimdir. Ancak, bu terim genellikle bir yuvarlak ikon düğmesini ifade eden bir terimdir. Yuvarlak bir düğme üzerinde bir ikon veya simge bulunan ve genellikle bir işlemi tetiklemek için kullanılan bir arayüz öğesini tanımlar.

Flutter’da, yuvarlak bir düğme veya yuvarlak ikon düğmesi oluşturmak için IconButton widget’ı kullanılabilir. Bu widget, Icon widget’ını içerebilir ve kullanıcının tıklamasına yanıt veren bir işlevi tetiklemek için onPressed özelliği kullanılır. Bu şekilde, yuvarlak bir ikon düğmesi oluşturabilir ve uygulamanızda çeşitli işlemleri gerçekleştirmek için kullanabilirsiniz.

Şimdi RoundIconButton ile bir değişkeni nasıl değiştirebileceğimizi göreceğiz. Aşağıdaki örnek bir Vücut Kitle Endeksi uygulamasından bir parçadır. Burada , yaşı arttırıp azaltan bir yapı var. (aşağıda)

Burada 2 ayrı butonumuz var. Ben bunları statefull widgetin içine ayrı ayrı koymayı tercih etmedim. Statefullun altına RoundIconButton adıyla yeni bir Stateless Widgetı açıp buton kodlarını buraya yazdım.

class RoundIconButton extends StatelessWidget {
  RoundIconButton({@required this.icon, @required this.onPressed});
  final IconData icon;
  final Function onPressed;
  @override
  Widget build(BuildContext context) {
    return RawMaterialButton(
      child: Icon(icon),
      onPressed: onPressed,
      elevation: 6.0,
      constraints: BoxConstraints.tightFor(width: 56.0, height: 56.0),
      shape: CircleBorder(),
      fillColor: Color(0xFF4C4F5E),
    );
  }
}

Burada butonumuz 2 parametre alıyor. Biri IconData , yani ikonun içeriği ( artı mı , eksi mi ) , diğeri ise fonksiyon. Bu fonksiyonda basınca ne yapacağına karar veriyor.

elevation , öğenin üst yüzeye yerleştiriceği z koordinatı. Contraints boyu ve yüksekliği. fillcolor ise içinin hangi renge sahip olacağını ayarlıyor. Burada shape’mız Circle yani yuvarlak. Bunu değiştirebilirsiniz.

 RoundIconButton(
                            icon: FontAwesomeIcons.minus,
                            onPressed: () {
                              setState(() {
                                age--;
                              });
                            },
                          ),

setState() kullanmamızın nedeni kullanıcı artıya veya eksiye bastığında anlık olarak yansımasını istememiz.

Evet hepsi bu kadar. Birde statefull widget için int age = 20 olarak tanımladım. Ve butonumuz hazır.