Flutter Container nedir ve nasıl kullanılır?

Kategori Featured, Flutter
09.03.2023
119 Okunma

Flutter, Google tarafından geliştirilen açık kaynaklı bir mobil uygulama geliştirme framework’üdür. Flutter, kullanıcı arayüzü tasarımı için birden fazla widget sağlar ve bunlardan biri de “Container” adlı widget’dır. Container, bir kutu şeklinde bir widget’dır ve diğer widget’leri içerebilir veya onları sarmalayabilir. Bu makalede, Flutter Container widget’i hakkında ayrıntılı bilgi vererek, bazı örnekler sunacağım.

Flutter Container Widget’inin Temel Kullanımı

Container widget’i, genellikle bir widget ağacındaki diğer widget’leri sarmalamak veya bir düzeni ayarlamak için kullanılır. Container widget’i birçok özellik sunar, ancak temel özellikleri şunlardır:

  • “color” özelliği: Container’ın arka plan rengini ayarlar.
  • “padding” özelliği: Container’ın içeriğine eklenen boşlukları belirler.
  • “margin” özelliği: Container’ın diğer widget’lere olan uzaklığını belirler.
  • “alignment” özelliği: Container’ın içindeki widget’ların hizalamasını belirler.

Container’ın diğer özellikleri arasında boyut, kenar boşluğu, şekil, gölge ve dekorasyon yer alır. Bu özelliklerin hepsi, Container’ı diğer widget’lerin yerleştirilmesi ve düzenlenmesi için çok kullanışlı hale getirir.

İşte basit bir örnek:

Yukarıdaki örnekte, bir Container widget’i oluşturuldu ve içine bir metin widget’i yerleştirildi. Container’ın arka plan rengi “blue” olarak ayarlandı ve içeriğe eklenen boşluk “16.0” olarak belirlendi. Sonuç olarak, Container’ın içindeki metin widget’i mavi arka plan üzerinde görünecektir.

Container Widget’inin Diğer Özellikleri

Container widget’i, birçok özellik sunar ve burada bazı örnekler vermek istiyorum:

Boyut

Container widget’i, genişlik ve yükseklik gibi boyut özelliklerini ayarlamak için kullanılır. Bu özellikler, genellikle içeriği saran veya sardığı diğer widget’lerin boyutuna bağlıdır.

Yukarıdaki örnekte, bir Container widget’i oluşturuldu ve genişlik ve yükseklik özellikleri “200.0” olarak ayarlandı. Container’ın arka plan rengi “red” olarak belirlenen ve içinde bir metin widget’i yerleştirildi. Sonuç olarak, Container’ın boyutu 200×200 piksel olarak ayarlandı ve içeriği kırmızı arka plan üzerinde görünecektir.

Şekil

Container widget’i, şekil özelliği ile farklı şekillerde oluşturulabilir. Örneğin, “BoxDecoration” sınıfı ile bir dairesel kutu oluşturabilirsiniz.

Yukarıdaki örnekte, bir Container widget’i oluşturuldu ve “BoxDecoration” sınıfı kullanılarak şekil özelliği “BoxShape.circle” olarak ayarlandı. Container’ın boyutu 150×150 piksel olarak ayarlandı ve içindeki metin widget’i yeşil arka plan üzerinde görünecektir.

Kenar Boşluğu ve Gölge

Container widget’i, kenar boşluğu ve gölge özellikleri ile stilize edilebilir. “BoxDecoration” sınıfı ile kenar boşluğu ve gölge özelliklerini ayarlayabilirsiniz.

Yukarıdaki örnekte, bir Container widget’i oluşturuldu ve “BoxDecoration” sınıfı kullanılarak arka plan rengi “yellow” olarak ayarlandı. Kenar boşluğu “borderRadius” özelliği ile yuvarlatıldı ve gölge “boxShadow” özelliği ile belirlendi. Sonuç olarak, Container’ın boyutu 200×200 piksel olarak ayarlandı ve içindeki metin widget’i sarı arka plan üzerinde görünecektir.

Örnek Proje

Aşağıdaki örnek proje, Container widget’i ile ilgili farklı özellikleri göstermektedir. Projede, Container widget’i kullanılarak bir kart tasarımı oluşturulmuştur. Bu projede, Container widget’i, arka plan rengi, kenar boşluğu, gölge, şekil ve hizalama özellikleri kullanılmıştır.

 

Comments of this post

Henüz yorum bulunmuyor!