Flutter’da Column
widget’i, dikey yönde sıralı bir dizi widget oluşturmak için kullanılır. Row
widget’i ile benzer şekilde, Column
widget’i de çocuk widget’lerini yatayda hizalayabilir ve farklı özelliklerle şekillendirebilirsiniz. Bu makalede, Column
widget’i hakkında daha fazla bilgi edineceksiniz ve birkaç örnek göreceksiniz.
Column Widget’i Nasıl Kullanılır?
Column
widget’i, children
özelliğine geçirilen widget’leri dikey olarak sıralar. Column
widget’ı genellikle Expanded
veya Flexible
widget’leri ile birlikte kullanılır, böylece widget’lerin boyutu ve boyutlandırması yönetilebilir.
Örneğin, bir Column
widget’i oluşturup içine iki Container
widget’i ekleyelim:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Column( children: <Widget>[ Container( width: 200.0, height: 200.0, color: Colors.blue, ), Container( width: 200.0, height: 200.0, color: Colors.green, ), ], ) |
Bu kodda, Expanded
widget’leri, her Container
widget’ını ekranda aynı miktarda yer kaplaması için esnetir. Bu, her iki Container
widget’ının ekranda aynı genişlikte ve yükseklikte olmasını sağlar.
Column Widget’ına Kenarlık Ekleme
Bir Column
widget’i oluştururken, Container
widget’larına ek olarak, Column
widget’ına kenarlık da ekleyebilirsiniz. Bu, decoration
özelliğini kullanarak yapılır. Örneğin, aşağıdaki kodda, Column
widget’ına yatay bir çizgi ekliyoruz:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
Column( children: <Widget>[ Container( width: 200.0, height: 200.0, color: Colors.blue, ), Container( width: 200.0, height: 200.0, color: Colors.green, ), ], decoration: BoxDecoration( border: Border( left: BorderSide( color: Colors.red, width: 2.0, ), ), ), ) |
Bu, Column
widget’ının sol tarafında kırmızı bir çizgi ekler.
Column Widget’ına Boşluk Eklemek
Bir ‘Column’ widget’i oluştururken, aralara boşluk eklemek de mümkündür. SizedBox
veya Expanded
widget’lerini kullanarak, aradaki boşluğu belirleyebilirsiniz.
Örneğin, SizedBox
widget’ini kullanarak aradaki boşluğu belirleyelim:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Column( children: <Widget>[ Container( width: 200.0, height: 200.0, color: Colors.blue, ), SizedBox(height: 20.0), Container( width: 200.0, height: 200.0, color: Colors.green, ), ], ) |
Bu, iki Container
widget’ı arasına 20.0 yükseklikte bir boşluk ekler.
Column Widget’ında Çocukları Hizalama
Column
widget’ında, çocukları yatayda hizalamak için crossAxisAlignment
özelliğini kullanabilirsiniz. Bu özellik, start
, end
, center
, stretch
gibi değerler alır.
Örneğin, aşağıdaki kodda, çocukları merkezde hizalayalım:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Container( width: 200.0, height: 100.0, color: Colors.blue, ), Container( width: 200.0, height: 100.0, color: Colors.green, ), ], ) |
Bu, iki Container
widget’ını dikey olarak ortalamaya ve yatayda merkezlemeye yarar.
Column Widget’ında Çocukların Genişliklerini Ayarlama
Column
widget’i, çocukların genişliklerini ayarlamak için mainAxisSize
özelliğini kullanır. Bu özellik, MainAxisSize.max
ve MainAxisSize.min
gibi değerler alır. MainAxisSize.max
, tüm mevcut alanı kullanırken, MainAxisSize.min
sadece çocukların ihtiyaç duyduğu alanı kullanır.
Örneğin, aşağıdaki kodda, Column
widget’ının genişliği, çocuklarının genişliklerine göre ayarlanır:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Column( mainAxisSize: MainAxisSize.min, children: <Widget>[ Container( width: 100.0, height: 100.0, color: Colors.blue, ), Container( width: 200.0, height: 100.0, color: Colors.green, ), ], ) |
Bu, ilk Container
widget’ının genişliği 100.0 ve ikinci Container
widget’ının genişliği 200.0 olarak ayarlanır. Column
widget’i, genişliğini bu iki değere göre ayarlar.
Column Widget’ında Çocukların Ağırlığını Ayarlama
Column
widget’ında, çocukların ağırlığını ayarlamak için Flexible
veya Expanded
widget’leri kullanabilirsiniz. Bu, çocukların mevcut alanı nasıl paylaşacağını belirler.
Örneğin, aşağıdaki kodda, iki Container
widget’ının da yüksekliği Expanded
widget’i kullanılarak ayarlanır:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
Column( children: <Widget>[ Expanded( child: Container( color: Colors.blue, ), ), Expanded( child: Container( color: Colors.green, ), ), ], ) |
Bu, Column
widget’inin tüm alanını kaplayacak şekilde, iki Container
widget’ının yüksekliğini eşit olarak paylaştırır.
Column Widget’ında Çocukların Sıralamasını Değiştirme
Column
widget’ı, çocukların sıralamasını değiştirmek için children
özelliğine ek olarak, reversed
özelliğini de kullanabilirsiniz. Bu özellik, true
olarak ayarlanırsa, çocukları ters sıraya sokar.
Örneğin, aşağıdaki kodda, çocukların sıralaması tersine çevrilecek:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
Column( crossAxisAlignment: CrossAxisAlignment.start, children: <Widget>[ Container( width: 200.0, height: 100.0, color: Colors.blue, ), Container( width: 200.0, height: 100.0, color: Colors.green, ), ].reversed.toList(), ) |
Bu, iki Container
widget’ını ters sırada yani yeşil önce mavi olarak gösterir.
Sonuç
Bu makalede, Flutter’da Column
widget’ı kullanarak dikey olarak düzenlenmiş bir liste veya form gibi UI öğeleri oluşturmanın temellerini öğrendiniz. Ayrıca, çocukların arasındaki boşlukları, hizalamayı, genişliği, ağırlığı ve sıralamayı nasıl ayarlayacağınızı da öğrendiniz. Bu özellikler, kompleks UI öğeleri oluşturmanız için çok önemlidir. Flutter’ın güçlü widget yapısı sayesinde, farklı özellikler kullanarak çok çeşitli UI öğeleri oluşturabilirsiniz.
İlk Yorumu Siz Yapın