Flutter Container Widgeti Kullanımı

Herkese merhaba, Flutter yazılarımıza kaldığımız yerden devam ediyoruz. Bu yazımızda container widgetini anlatacağım. Hadi başlayalım !

Container Widget’inin Özellikleri

width ve height

Container Widget’i, boyutunu ayarlamak için width ve height özelliklerine sahiptir. Bu özellikler, double değerler olarak tanımlanır ve Widget’in boyutunu belirlemek için kullanılır. Örneğin, aşağıdaki kodda, Container Widget’inin genişliği 200 ve yüksekliği 100 olarak belirlenmiştir.

Container(
  width: 200,
  height: 100,
  child: Text('Merhaba Dünya'),
)

margin ve padding

Container Widget’i, margin ve padding özelliklerine de sahiptir. Margin, Container Widget’inin etrafındaki boşluğu belirlerken, padding, Container Widget’i içindeki Widget’lara uygulanacak boşluğu belirler. Margin ve padding, EdgeInsets sınıfı kullanılarak tanımlanır.

Örneğin, aşağıdaki kodda, Container Widget’inin etrafındaki boşluğu belirlemek için margin özelliği kullanılmıştır. Ayrıca, içindeki Text Widget’ına uygulanacak boşluğu belirlemek için padding özelliği de kullanılmıştır.

Container(
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.all(20),
  child: Text('Merhaba Dünya'),
)

decoration

Container Widget’i, arkaplan rengi, border ve shadow gibi dekorasyon özellikleri için decoration özelliğine sahiptir. BoxDecoration sınıfı kullanılarak bu özellikler özelleştirilebilir.

Örneğin, aşağıdaki kodda, Container Widget’inin arkaplan rengi ve border özellikleri için decoration özelliği kullanılmıştır.

Container(
  decoration: BoxDecoration(
    color: Colors.blue,
    border: Border.all(
      color: Colors.red,
      width: 2,
    ),
  ),
  child: Text('Merhaba Dünya'),
)

alignment

Container Widget’i, içindeki Widget’ların hizalanması için alignment özelliğine sahiptir. Alignment sınıfı kullanılarak belirlenebilir. Örneğin, aşağıdaki kodda, Container Widget’i içindeki Text Widget’ı merkezlenmiştir.

Container(
  alignment: Alignment.center,
  child: Text('Merhaba Dünya'),
)

Container Widget’i Örnekleri

Örnek 1: Basit Bir Container Widget’i

Bu örnekte, basit bir Container Widget oluşturulacak. Bu Widget’in boyutu, rengi ve içeriği özelleştirilecektir.

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.blue,
    border: Border.all(
      color: Colors.white,
      width: 2,
    )
  ),
  child: Text(
    'Merhaba Dünya',
    style: TextStyle(
      color: Colors.white,
      fontSize: 24,
    )
  ),
)

Bu kod, bir 200×200 boyutunda mavi bir Container Widget’i oluşturur. Text Widget’ı, Container Widget’inin ortasına yerleştirilir ve beyaz renkte 24 punto büyüklüğünde görüntülenir. Ayrıca, Container Widget’inin etrafına beyaz bir kenarlık çizilir.

Örnek 2: Padding ve Margin Özellikleri

Bu örnekte, bir Container Widget’i oluşturulacak ve bu Widget’in padding ve margin özellikleri ayarlanacaktır.

Container(
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.blue,
  ),
  child: Text(
    'Merhaba Dünya',
    style: TextStyle(
      color: Colors.white,
      fontSize: 24,
    ),
  ),
)

Bu kod, mavi bir Container Widget’i oluşturur. Container Widget’i, etrafında 10 piksel boşluk bırakacak şekilde konumlandırılır ve içindeki Text Widget’ına 20 piksel boşluk uygulanır.

Örnek 3: Image Widget’i İle Birlikte Kullanım

Bu örnekte, bir Image Widget’i oluşturulacak ve bu Widget, bir Container Widget’i içinde görüntülenecektir.

Container(
  width: 200,
  height: 200,
  decoration: BoxDecoration(
    color: Colors.white,
    borderRadius: BorderRadius.circular(10),
    boxShadow: [
      BoxShadow(
        color: Colors.grey.withOpacity(0.5),
        spreadRadius: 2,
        blurRadius: 5,
        offset: Offset(0, 3),
      ),
    ],
  ),
  child: ClipRRect(
    borderRadius: BorderRadius.circular(10),
    child: Image.network(
      'https://picsum.photos/200/200',
      fit: BoxFit.cover,
    ),
  ),
)

Bu kod, beyaz bir arkaplan rengine sahip, yuvarlak kenarları olan bir Container Widget’i oluşturur. Container Widget’i, Image Widget’ı içerecek şekilde tasarlanmıştır. Image Widget’i, network() metodu kullanılarak URL’den yüklenir ve Container Widget’i içinde sığacak şekilde fit edilir. Ayrıca, Container Widget’i, gölgelendirilmiş bir görünüme sahiptir.

Örnek 4: Container Widget’larının Birleştirilmesi

Bu örnekte, iki Container Widget’i bir araya getirilecek ve her biri içinde bir Text Widget’ı olacak şekilde düzenlenecektir.

Container(
  margin: EdgeInsets.all(10),
  padding: EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.blueGrey,
    borderRadius: BorderRadius.circular(10),
  ),
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
        ),
        padding: EdgeInsets.all(10),
        child: Text('Merhaba',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      SizedBox(height: 20),
      Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(10),
        ),
        padding: EdgeInsets.all(10),
        child: Text('Dünya',
          style: TextStyle(
            fontSize: 24,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
    ],
  ),
)

Bu kod, iki adet Container Widget’i içeren bir ana Container Widget’i oluşturur. Her bir içerik, beyaz bir arkaplan rengine ve yuvarlak kenarlara sahip olacak şekilde özelleştirilmiştir. Ayrıca, her bir içerik, içindeki metni vurgulayan bir kalın yazı tipi kullanır.