Flutter Padding Widgeti Kullanımı

Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda Padding widgetini ve kullanımını anlatacağım. Hadi başlayalım !

Flutter’da, arayüz tasarımı yaparken en sık kullanılan widgetlerden biri olan Padding widgeti, bir çocuk widgetin çevresine boşluk eklemek için kullanılır. Bu widget, bir kenardan diğerine kadar olan boşluğu belirleyen padding özelliği ile özelleştirilebilir.

Padding Widgeti Özellikleri

Padding widgetinin bazı özellikleri şunlardır:

• padding: Widgetin çocukları ile arasında bırakılacak boşluğu belirler. Bu özellik, EdgeInsets sınıfından bir nesne olarak belirtilir. EdgeInsets sınıfı, left, right, top ve bottom özellikleri ile birlikte kullanılır ve istenilen kenarlara özel boşluk tanımlamaya olanak sağlar. Örneğin, EdgeInsets.all(8.0) ile tüm kenarlara 8 piksel boşluk bırakabilirsiniz.
• child: Padding widgetinin içine yerleştirilecek widgeti belirler. Bu özellik zorunlu bir özelliktir.

Padding Widgeti Kullanımı

Padding widgeti, aşağıdaki gibi kullanılabilir:

Padding(
  padding: EdgeInsets.all(16.0),
  child: Text('Bu bir metin widgetidir.'),
)

Yukarıdaki örnekte, Padding widgeti, içindeki Text widgetine tüm kenarlarda 16 piksel boşluk bırakır.

Padding Widgetini Özelleştirme

Aşağıdaki örnek, EdgeInsets sınıfının farklı özelliklerini kullanarak Padding widgetini özelleştirmenin birkaç yolunu gösterir:

Padding(
  padding: EdgeInsets.only(left: 16.0, right: 16.0),
  child: Text('Bu bir metin widgetidir.'),
)

Padding(
  padding: EdgeInsets.symmetric(horizontal: 16.0),
  child: Text('Bu bir metin widgetidir.'),
)

Padding(
  padding: EdgeInsets.fromLTRB(8.0, 16.0, 8.0, 16.0),
  child: Text('Bu bir metin widgetidir.'),
)

Yukarıdaki örnekte, EdgeInsets.only(), EdgeInsets.symmetric() ve EdgeInsets.fromLTRB() yöntemleri kullanılarak farklı boşluk tanımlamaları yapılmıştır. İlk örnek, sadece sol ve sağ kenarlara 16 piksel boşluk bırakırken, ikinci örnek, yatay yönde (sol ve sağ kenarlarda) 16 piksel boşluk bırakır. Üçüncü örnek ise, sırasıyla sol, üst, sağ ve alt kenarlarda 8, 16, 8 ve 16 piksel boşluk bırakır.

Örnek Kodlar

Aşağıdaki örnek, Padding widgetini kullanarak iki adet butonu yatayda hizalamayı ve aralarında 16 piksel boşluk bırakmayı gösterir:

Padding(
  padding: EdgeInsets.symmetric(horizontal: 16.0),
  child: Row(
    mainAxisAlignment: MainAxisAlignment.spaceBetween,
    children: [
      ElevatedButton(
        onPressed: () {},
        child: Text('Buton 1'),
      ),
      ElevatedButton(
        onPressed: () {},
        child: Text('Buton 2'),
      ),
    ],
  ),
)

Yukarıdaki örnekte, Padding widgeti, Row widgetinin içinde yer alır ve symmetric() yöntemi kullanılarak yatay yönde 16 piksel boşluk bırakılır. Row widgetinin mainAxisAlignment özelliği, çocuk widgetleri yatayda hizalamak için kullanılır ve spaceBetween değeri, butonları eşit aralıklarla hizalar. Sonuç olarak, iki buton yatayda hizalanır ve aralarında 16 piksel boşluk bırakılır.

Sonuç

Flutter’da, Padding widgetinin kullanımı oldukça basit ve özelleştirilebilirdir. padding özelliği ve EdgeInsets sınıfı, widgetin çocukları ile arasında bırakılacak boşluğu ayarlamanıza olanak sağlar. Ayrıca, birden fazla widgeti gruplamak ve onları bir arada tutmak için de kullanılabilir. Padding widgeti, Flutter’da arayüz tasarımı yaparken sıkça kullanılan ve çok işlevsel bir widgettir.

Evet Padding widgeti ve kullanımı bu şekilde olmakta. Tüm Flutter yazılarımıza buraya tıklayarak ulaşabilirsiniz. Herkese hayırlı günler.