Merhabalar.

Flutter eğitimlerimize Container ile devam ediyoruz.

Container’ı, Flutter’da istediğimiz gibi konumlandırabileceğimiz, şekillendirebileceğimiz ve içerisine nesneler yerleştirebileceğimiz kutular olarak tanımlayabiliriz. child özelliği ile içerisine tanımlanan nesnenin boyutunu otomatik olarak alabileceği gibi width ve height özellikleri ile kendimiz belirli bir boyutta tanımlayabiliriz. Eğer içerisine child özelliğini tanımlamasanız otomatik olarak ekranda verilen alana göre en büyük boyutu alır.

Bir flutter projesi başlattığımızda MaterialApp’in home özelliğine Scaffold nesnesini vermiştik. Çünkü içindeki özellikler bizim uygulamayı çok güzel bir tasarımda yaratmamızı sağlıyordu. Bir Container bir widget olduğu için Widget değer alabilecek her özelliğe verilebilir.

home özelliğine bir container widget’ı verilebilir.

Önce bunun yapılabilirliğini görelim. Sonrasında devam edelim.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Container(
      color: Colors.amber,
    ),
  ));
}

home: Container(
      color: Colors.amber,
    ),

Gördüğünüz gibi ekranı tamamen kapladı.

Artık bu Container’ın içinde bir uygulama yaratabiliriz. Ancak bu hiç akıllı bir davranış olmayacaktır. Çünkü Flutter’ın bize bunları daha kolay yapabilmemiz için sunduğu sınıflar vardır.

Scaffold’un appBar özelliği uygulamanın en üst kısmını belirtir.

body özelliği ise uygulamanın gövdesini belirtir. body özelliğine bir Container widget’ı verilebilir.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Scaffold(
      appBar: AppBar(
        title: Text("Brainy Tech"),
        backgroundColor: Colors.blue,
        centerTitle: true,
      ),
      body: Container(
        color: Colors.amber,
      ),
    ),
  ));
}

body: Container(
        color: Colors.amber,
      ),

Bir container’ın height ve width değerleri belirlenmediyse ve child özelliğine bir nesne atanmadıysa tüm alanı kaplar. Yukarıda gördüğümüz gibi.

Şimdi yükseklik ve genişlik değeri verelim ve nasıl davranacağına bakalım.

body: Container(
        color: Colors.amber,
        height: 200,
        width: 200,
      ),

Aşağıda gördüğünüz gibi Container sol üstten itibaren kenarlarda hiç boşluk bırakmadan yerleşti.

Bu Container’ın çevresindeki nesnelerle, ve uygulamanın kenarlarıyla olan uzaklığını margin özelliği ile ayarlayabiliriz.

Margin şu şekilde değerler alır.

Bir nesnenin kenarları left, right, top, bottom olarak isimlendirilir.

Eğer tek tek değerleri verilecekse

// margin: EdgeInsets.only(left: 5, right: 2, bottom: 3, top: 10),

Bütün kenarlardan eşit uzaklık verilecekse

margin: EdgeInsets.all(5),

Dikey ve Yatay kenarlara aynı anda aynı değerler verilecekse aşağıdaki yöntem kullanılır.

 // margin: EdgeInsets.symmetric(vertical: 5, horizontal: 10),

Eğer margin değerlerini sırası ile left (sol), top (üst), right (sağ) ve bottom (alt) ile belirlemek isterseniz aşağıdaki gibi yazabilirsiniz.

margin: EdgeInsets.fromLTRB(5, 10, 5, 7),

// margin: EdgeInsets.only(left: 5, right: 2, bottom: 3, top: 10),
        // margin: EdgeInsets.all(5),
        // margin: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
        margin: EdgeInsets.fromLTRB(5, 10, 5, 7),

Child Özelliği

Bu özellik sayesinde Container içine bir nesne koyulabilir. Tabii koyulan nesnenin özelliklerine göre içerisine farklı nesnelerde yerleştirilebilir.

Şimdi bu container’ın içine bir text yazdıralım.

body: Container(
        color: Colors.amber,
        height: 200,
        width: 200,
        // margin: EdgeInsets.only(left: 5, right: 2, bottom: 3, top: 10),
        // margin: EdgeInsets.all(5),
        // margin: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
        margin: EdgeInsets.fromLTRB(5, 10, 5, 7),
        child: Text("Brainy Tech", style: TextStyle(color: Colors.black,
            fontSize: 24, fontWeight: FontWeight.bold, fontStyle: FontStyle.italic),),
        
      ),

Text’in konumuyla alakalı hiçbir bilgi verilmediyse sol üstten yazdırıldığı görülebilir.

Padding Özelliği

Container’ın içindeki nesnelerin kenarlara olan uzaklıklarını ayarlamak için padding özelliği kullanılır.

Kullanımı margin ile aynıdır.

// padding: EdgeInsets.only(left: 5, right: 2, bottom: 3, top: 10),
        // padding: EdgeInsets.all(5),
        // padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
        padding: EdgeInsets.fromLTRB(5, 10, 5, 7),

Alignment

Şimdi container içerisine tanımladığımız nesnenin container içerisindeki konumunu değiştirelim. Bunun için alignment özelliğini kullanacağız.

alignment: Alignment.center,

Bir yazıda bir özelliğin bütün durumlarını anlatabilme imkanı yok. O yüzden böyle durumlarda kendiniz diğer durumları denemelisiniz.

alignment özelliğini Alignment.center, Alignment.topCenter , Alignment.bottomCenter vb. gibi hazır parametrelerle belirleyebileceğimiz gibi koordinat düzlemindeki konumunu gösteren x ve y parametrelerini kullanabiliriz.

alignment: Alignment(-0.9,0.9),

Buradaki x ve y parametreleri -1 ve 1 arası bir değer alarak nesnenin düzlemdeki konumunu gösterir. Aşağıdaki şemayı inceleyerek bunu daha iyi anlayabiliriz.

Aklıma bir soru geliyor. Ben oluşturduğum Container’ı oluşturduğum yerde ortalamak istersem ne yapabilirim.

Bunun için Container’ı Center diye bir widget’ın içine alsak yeterli olacaktır.

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: Scaffold(
      appBar: AppBar(
        title: Text("Brainy Tech"),
        backgroundColor: Colors.blue,
        centerTitle: true,
      ),
      body: Center(
        child: Container(
          color: Colors.amber,
          height: 200,
          width: 200,
          // margin: EdgeInsets.only(left: 5, right: 2, bottom: 3, top: 10),
          // margin: EdgeInsets.all(5),
          // margin: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
          margin: EdgeInsets.fromLTRB(5, 10, 5, 7),
          child: Text(
            "Brainy Tech",
            style: TextStyle(
                color: Colors.black,
                fontSize: 24,
                fontWeight: FontWeight.bold,
                fontStyle: FontStyle.italic),
          ),
          padding: EdgeInsets.all(20),
          alignment: Alignment.center,
        ),
      ),
    ),
  ));
}

Center’ın 4 parametresi vardır. child özelliğine istenilen widget verilir.

Container’ın decoration özelliğini ise başka bir yazımızda ele alacağız.

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