Flutter 0’dan Mobil Uygulama Geliştirme 27 – Column

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.

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.

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.