Merhabalar.

Temel Widgetlarımızdan olan Column ile devam ediyoruz.

Column kelimesi Türkçe’de kolon olarak adlandırılır.

Column Widget’ı, Container’dan farklı olarak, children: parametresine sahiptir. Children parametresi bir Widget listesi (<Widget>[ , , , ]) alır.

Bu da kolon içerisine birden fazla Widget eklenebileceği anlamına gelmektedir. Eklenen her Widget, üst üste ekleniyor gibi sonuç verir.

Understand Basic Of Row and Column In Flutter | by Bishworaj Poudel | Medium

Column widgetının children parametresinden başka önemli 2 parametresi daha vardır.

Bunlar mainAxisAlignment: ve crossAxisAlignment: parametreleridir.

Column’dan en iyi şekilde faydalanmak için bu parametrelerin nasıl çalıştığını iyi bilmeliyiz.

mainAxisAlignment parametresi, Column içerisinde verilen widgetları yukarıdan-aşağıya hizalamaktadır. Örneğin, mainAxisAlignment: MainAxisAlignment.center olarak ayarlanırsa, Column içerisine eklenen tüm (children) widgetlar, yukarıdan aşağıya hizada ortalanır.

crossAxisAlignment ise, tahmin edebileceğiniz gibi, sağdan-sola hizalama yapar.

Örneğin, crossAxisAlignment: CrossAxisAlignment.start olarak ayarlarsanız, Column içerisindeki tüm widgetları, hepsi en sağa gelecek şekilde hizalamış olursunuz.

import 'package:flutter/material.dart';

void main(){

  runApp(MaterialApp(

    debugShowCheckedModeBanner: false,
    home: Scaffold(
      appBar: AppBar(
        title: Text("Brainy Tech"),
        backgroundColor: Colors.black,
      ),

      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Icon(Icons.add, size: 50),
          Icon(Icons.email, size: 50),
          Icon(Icons.add_moderator, size: 50),
          Icon(Icons.five_g_outlined, size: 50),
          Icon(Icons.airplanemode_active, size: 50),
        ],
      ),
    ),

  ));

}

Column Widget’ını Scaffold’un body özelliğine vereceğiz.

Gördüğünüz gibi sağa yaslı ve center özelliği verdiğimiz içinde tüm nesneler ortada birleşti.

mainAxisAlignment‘ın daha farklı özellikleri vardır.

mainAxisAlignment: MainAxisAlignment.end,

end nesnelerin sonda sıralanmasını sağlar.

start

Başlangıçtan itibaren sıralanmasını sağlar.

mainAxisAlignment: MainAxisAlignment.start,

spaceAround

Nesneleri eşit aralıklarla sıralar. Burada önemli olan baştan ve sondan aynı eşit boşlukların bırakıldığıdır.

 mainAxisAlignment: MainAxisAlignment.spaceAround,

spaceBetween

Bu da aynı şekilde eşit aralıklarla sıralar ama 1. ve son nesneyi en başa ve en sona yerleştirir. Sonraki nesneler arasını eşit aralıklara böler.

mainAxisAlignment: MainAxisAlignment.spaceBetween,

spaceEvenly

Spacearound ile aynı işlevi görür.

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

CrossAxisAligment sağdan sola hizalama yapar. Özellikleri mainAxisAligment gibi vardır. Deneyerek görebilirsiniz.

crossAxisAlignment: CrossAxisAlignment.stretch,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.stretch,

MainAxisAlignment ve CrossAxisAlignment değerlerini değiştirerek, Column içerisine girilen tüm children widgetların durumlarını aşağıdaki GIF resminde görmek mümkündür.

Image for post

mainAxisSize Özelliği

Bu özellik sayesinde oluşturulan Column nesnesinin boyutu belirlenebilir.

max ve min değerleri alır.

Max verirsek bulunduğu yer kaplayabileceği tüm alanı kaplar.

Min verirsek içerisine yerleştirilen nesneler kadar büyür ya da küçülür.

mainAxisSize: MainAxisSize.min,
mainAxisSize: MainAxisSize.max,

verticalDirectory Özelliği

Bu özellik sayesinde nesneler dikeyde en yukarıdan mı yerleştirilecek yoksa aşağıdan mı buna karar verilir.

verticalDirection: VerticalDirection.up,
verticalDirection: VerticalDirection.down, Default değeridir.

textDirection Özelliği

Nesnelerin yatay olarak yerleştirme sırasını ve yatay yönde başlangıç ve bitişin nasıl yorumlanacağını belirler.

textDirection: TextDirection.rtl,
textDirection: TextDirection.ltr,
import 'package:flutter/material.dart';

void main(){

  runApp(MaterialApp(

    debugShowCheckedModeBanner: false,
    home: Scaffold(
      appBar: AppBar(
        title: Text("Brainy Tech"),
        backgroundColor: Colors.black,
      ),

      body: Column(
        //mainAxisAlignment: MainAxisAlignment.center,
        //mainAxisAlignment: MainAxisAlignment.end,
        //mainAxisAlignment: MainAxisAlignment.start,
        //mainAxisAlignment: MainAxisAlignment.spaceAround,
        //mainAxisAlignment: MainAxisAlignment.spaceBetween,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        mainAxisSize: MainAxisSize.min,
        // mainAxisSize: MainAxisSize.max,
        verticalDirection: VerticalDirection.up,
        // verticalDirection: VerticalDirection.down, Default değeridir.
        textDirection: TextDirection.rtl,
        //textDirection: TextDirection.ltr,
        children: [
          Icon(Icons.add, size: 50),
          Icon(Icons.email, size: 50),
          Icon(Icons.add_moderator, size: 50),
          Icon(Icons.five_g_outlined, size: 50),
          Icon(Icons.airplanemode_active, size: 50),
        ],
      ),
    ),

  ));

}

Böylelikle Column widget’ını özellikleri ile beraber bitirdik.

Bir sonraki yazımda görüşmek üzere.


What's Your Reaction?

hate hate
0
hate
fail fail
0
fail
fun fun
0
fun
geeky geeky
0
geeky
love love
0
love
lol lol
0
lol
omg omg
0
omg
win win
0
win
Murat Bilginer
21 Şubat 1992 Doğumlu. Endüstri Mühendisi olarak Lisansını 2016 yılında tamamlamıştır. Industryolog Akademi - NGenius oluşumlarının kurucusudur. Şu anda kendi şirketi Brainy Tech ile hem Yazılım Hizmetleri Sunmakta Hem de Online Eğitimler Vermektedir.