Row ve Column nasıl kullanılır?

Row ve Column widget'ları, Flutter uygulamalarında görsel öğelerin düzenlenmesinde önemli bir rol oynar. Bu iki widget, kullanıcı arayüzünü oluştururken elementleri yatay veya dikey bir düzende sıralamanıza olanak tanır. Geliştiriciler, bu yapı taşları sayesinde kullanıcı deneyimini zenginleştirirken, uygulama tasarımında esneklik sağlar. Özellikle karmaşık arayüzlerde, Row ve Column'un etkili kullanımı, düzenin daha akıcı ve estetik olmasına yardımcı olur.

Row ve Column widget'ları, Flutter'da öğeleri dikey ve yatay olarak sıralamak için kullanılır.

• Column Kullanımı:

  • children Parametresi: Column,

    children

    parametresine sahip olup, bu parametreye bir Widget listesi alır.
  • mainAxisAlignment Parametresi: Bu parametre, Column içindeki widget'ları yukarıdan aşağıya hizalar. Örneğin,

    mainAxisAlignment: MainAxisAlignment.center

    olarak ayarlanırsa, Column'a eklenen tüm widget'lar yukarıdan aşağıya hizada ortalanır.
  • crossAxisAlignment Parametresi: Bu parametre, sağdan sola hizalama yapar. Örneğin,

    crossAxisAlignment: CrossAxisAlignment.start

    olarak ayarlanırsa, Column içindeki tüm widget'lar en sağa gelecek şekilde hizalanır.

• Row Kullanımı:

  • children Parametresi: Row da Column gibi,

    children

    parametresine sahiptir ve bu parametreye bir Widget listesi alır.
  • mainAxisAlignment Parametresi: Bu parametre, Row içinde kullanıldığında, sağdan sola hizalama yapar.
  • crossAxisAlignment Parametresi: Column'daki gibi, Row'da da bu parametre, yukarıdan aşağıya hizalama yapar.

Örnek Kullanım: Column ve Row'un nasıl kullanıldığını daha iyi anlamak için, aşağıdaki kod örneği incelenebilir :

Column(
  children: [
    Button(),
    Button(),
    Button(),
  ],
)
Kopyala

Bu kod,

Button

Row kullanımı için ise, aşağıdaki kod örneği verilebilir :

Row(
  children: [
    Button(),
    Button(),
    Button(),
  ],
)
Kopyala

Bu kod,

Button