Column Widget’i Nasıl Kullanılır?

Kategori Featured, Flutter
12.03.2023
76 Okunma

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:

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:

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:

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:

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:

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:

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:

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.

Comments of this post

Henüz yorum bulunmuyor!