Merhabalar.

Temel widgetlarımızdan Row ile devam ediyoruz.

Row kelimesi Türkçe’de satır olarak bilinir. Bu widgetın Column’a benzer bir kullanımı vardır. Row için geometrik olarak Column’ın 90 derece tersidir diyebiliriz.

Column, bünyesindeki children widgetları, dik olarak yapılandırırken, Row ise aynı widgetları yatay olarak yapılandırmaya yardımcı olur. Row’un da en önemli üç parametresi, yukarıdaki Column örneğinde verilen parametrelerdir. Kullanımları Column’a göre biraz farklıdır.

Column’daki MainAxisAlignment parametresi, yukarıdan-aşağıya hizalama yaparken, aynı parametre Row içerisinde kullanıldığında, sağdan-sola hizalama yapar. CrossAxisAlignment için de yine Column’a göre tam tersi geçerlidir.

Column’da işlediğimiz özelliklere tekrar bakmayacağız çünkü hepsi aynı.

Sadece burada main ve crosaxis farkını anlamaya çalışacağız.

Row’u oluşturalım ve Children değerlerini verelim.

import 'package:flutter/material.dart';

void main(){
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Scaffold(
      appBar: AppBar(
        title: Text("Brainy Tech"),
        backgroundColor: Colors.black,
      ),
      body: Row(

        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),
        ],
      ),
    ),
  ));
}

Hiçbir değer vermedik nesnelerin sol üstten yerleşmeye başladığını görüyoruz.

Nesnelerin yatay düzlemdeki konumlarını mainAxisAligment ile ayarlarız.

Örneğin ortalayalım.

mainAxisAlignment: MainAxisAlignment.center,

Diğer özelliklerini kendiniz deneyebilirsiniz. Aşağıda kod örnekleri var.

mainAxisAlignment: MainAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisAlignment: MainAxisAlignment.spaceAround,

CrossAxisAligment ise dikeydeki konumu belirler.

Bu row’u bulunduğu widget içinde ortalayalım mesela.

crossAxisAlignment: CrossAxisAlignment.stretch,

Diğer özelliklerin kullanımı aşağıdadır.

crossAxisAlignment: CrossAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.end,

Row bu şekildedir.

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

Bunların tamamını kullanarak bir örnek yapalım.


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.