Flutter’da Container: Bildiğiniz div değil

Bu yazı ilk olarak Scott Stoll tarafından 8 ocak 2019 tarihinde Flutter Community için yayınlanmıştır. Flutter Türkiye için gerekli izinler alınarak Türkçe’ye çevrilmiştir.

Flutter’s Container: This ain’t your Daddy’s <div>

Yazının orjinal haline bu bağlantıdan ulaşabilirsiniz.

Kenara Çekil <div>, Container( ) geliyor

O bir harika! Herşeyi Yapıyor! Keser! Biçer! Doğrar!

Container bulaşıkları yıkayabilseydi, kız arkadaşım beni evden atıp Container ile evlenirdi. Sana kaç tane ayarlayayım? Yüz tane? Yoksa ikiyüz tane mi almak istersin?

Şaka bir yana Container gerçekten çok yetenekli. Container’ın tüm yetenekleri kullanılmadığı için yazılmak zorunda kalınan, aynı işlevleri yerine getiren çok uzun kodlar görüyorum. Bu yetenekler kullanılmayınca sebepsiz yere kodunuzu kirleten yüzlerce hatta binlerce satır kod oluşuyor.

Kötü yazılımcı, sana kahve yok.

İnanmıyorsanız bazı kodlara bakalım, neredeyse her kod örneğinde sıklıkla constructor üstüne constructor biriktiğini görürüz.

Her bir Widget yeni bir constructor gerektiriyor

Yorum satırlarınızı silerseniz, aşağıdaki senaryo bize normal görünür;

• Container’a padding verip etrafına biraz boşluk oluştur
• Texti ortala
• Text’in etrafına biraz padding koyalım ki Container’ın kenarları ile arasında boşluk olsun
• Text içeriğini ekle

Peki Container ile bu daha iyi nasıl yazılabilir?

Solda 5 Widget, Sağda 2 Widget… Ve ikiside aynı işe yarıyor!

Eğer çok bir kazanç sağlamadığını düşünüyorsanız, bu örneğin sadece bir Container’dan oluştuğunu unutmayın. Flutter uygulamanızda kaç tane Container kullandığınızı düşünün ve o sayıyla fazladan satırları çarpın :).

Bu şekilde kullanım için Container’ın dikkat etmeniz gereken parametreleri şunlardır;

• padding:
• margin:
• alignment:
• transform:
• foregroundDecoration:
• decoration:

Bunu bir adım daha ileri taşıyabiliriz çünkü Container’ın decoration parametresine bir DecoratedBox verebiliriz. DecoratedBox bize bir sürü yeni kullanım imkanı sunar.

Örnek olarak;

• Şekil verebiliriz
• Border ve BorderRadius ile çerçevesini yönetebiliriz
• Gradient ile renk geçişleri ayarlayabiliriz.
• Arka planı içerik ile geçişli birleştirebiliriz
• BoxShadow ile gölge efekti yaratabiliriz
• Arka planı resim olarak verebiliriz.

Yani bizim “basit” Container’ımız Padding, Align, Transform Widget’larımızın yerini alabiliyor ve rengini, boşluklarını kolayca ayarlayabilmemizi sağlıyor. Ayrıca decoration parametresi ile bize Border, Gradient, BoxShadow ve Shape özelliklerini de kullanmamızı sağlıyor.

Yani dediğim gibi, “Flutter’da Container: Bildiğiniz <div> değil”, o zaman bir div’miş gibi kullanmayı bırakalım!

Scott Stoll Freelance Flutter geliştiricisi, yazar ve konuşmacı dır. Freelance iş kabul eder ve konuşma yapmak için seyahat, danışmanlık ve workshop’lar için seyahat etmeye uygundur. GDG Cleveland’ın organizatörü, #HumpDayQandA’ in kurucusu ve Mediumda Flutter Community’in editörüdür.

Twitter: @scottstoll2017 — Email: scottstoll2017@gmail.com — https://scottstoll.me/

Çeviri: Alper Tokcan
Twitter: https://twitter.com/DevAlper
GitHub: https://github.com/m6t