Merhaba Arkadaşlar, Yeni Bir Bloguma Hoş Geldiniz
Merhaba değerli okuyucular, bugünkü blog yazımızın konusu, Flutter’da sıkça kullanılan bir widget olan Container’ı incelemek olacak. Eğer bu konuda daha önceden bilgi sahibiyseniz önemli degil. Fakat ben, öğrendiğim her konuyu en temelden inceleyerek ilerlemeyi tercih eden biriyim. Bu nedenle sizlere basit bir başlangıç yaparak, Container’ın işlevselliği ve kullanımı hakkında bilgiler sunmak istiyorum. Her türlü öneri ve eleştirinizi bekliyorum. Hadi, hep birlikte bu konuya bir göz atalım.
Container
Şu anda içinde hiçbir şey olmayan boş bir scaffold’a sahibim. Body kısmına bir ‘container’ eklediğimde, bu container’la neler yapabileceğimi birkaç örnekle gösterebilirim. Örneğin, yüksekliği 20, genişliği 20 olacak şekilde bir container yaratabilir ve ona bir renk verebiliriz. Bunun küçük ve köşede durduğunu görüyorsunuz, o zaman onu 200 birim yapalım. Bu container’ı bir ‘center’ widget’ı içine koyarak onu ortaya yerleştirebilirsiniz. 
Container’da belirtebileceğiniz en temel özellikler genellikle yükseklik, genişlik ve renktir. Ancak bir adım daha ileri giderek, ona bazı süslemeler ekleyebilirsiniz. Örneğin, sıklıkla kullandığım bir özellik olan ‘border radius’ özelliğini göstereyim. ‘border.radius.circular’ özelliği, köşelerin keskin olmamasını sağlar. Ayrıca, container’ın şeklinin de bir daire olmasını belirtmek oldukça kullanışlıdır. Eğer bir sınır belirtirsek (örneğin siyah bir çerçeve oluşturalım), çerçevenin kalınlığını belirleyebiliriz.
Fakat eğer dekorasyon belirtiyorsak, rengi dekorasyon içinde belirtmemiz gerekiyor. Bu da başka bir konu. Kendine özgü özelliklerinden dolayı, bir Container’ın içerisinde başka bir widget (child) bulunabilir. Örneğin basit bir ‘text’ widget’ını koyabiliriz.
Widget’nın içindekenin konumu
Bu konumlandırma işlerinin nasıl yapıldığı biraz karmaşık olabilir, ancak genel olarak ‘padding’ kullanılır. Padding, widget’ın çevresine bir boşluk ekler. Ayrıca ‘text’ widget’ını bir ‘center’ widget’ının içerisine koyarsanız, metin ortalanır. Daha özelleştirilmiş bir konumlandırma yapmak istiyorsanız, ‘alignment’ özelliğini kullanabilirsiniz.
Özelleştirilmiş Konumlandırma İle İdeal Tasarım
‘alignment’ özelliğinde, belirli bir x ve y koordinatını belirtmek için iki çift değer girilir. Örneğin, -1, -1 koordinatı sol üst köşedir. Y koordinatını 1 yaparsak, metin altta yer alır. X koordinatını 1 yaparsak, metin sağ altta yer alır. Yani, 0, 0 koordinatı tam orta noktayı ifade eder.
Genellikle, bu koordinatlardan birini seçersiniz, ancak belirli bir tasarım yapmak veya bir oyun oluştururken, çocukların tam olarak nerede olmasını belirtmek için çift değerleri belirleyerek çok daha özelleştirilmiş bir konumlandırma yapabilirsiniz.
Widget Ozelliklerini Çalışırken
Son olarak göstermek istediğim şey, container’a bazı dekorasyonlar ekleyebileceğinizdir. ‘box shadow’ özelliği, biraz geçmişte bahsettiğim minimalist bir tasarım olan ‘neomorphizm’ trendinde olduğu gibi, gölgeler eklemenizi sağlar. İlk örnekte olduğu gibi, bir kutu gölgesi ekleyebilir ve ardından kutunun rengini gri yapabiliriz. Background’ı da gri yaparsak, birkaç farklı gölge kullanarak ‘neomorphic’ bir tasarım elde ederiz.
Bu tasarlanabilir ve estetik görünümlü bir widget, kullanabileceğiniz en temel widget olan bir Container’dan gelir. Bu yüzden Container öğrenmek, çoğu Flutter projeniz boyunca kullanmanız gereken basit bir widget’ı hızla anlamanıza yardımcı olabilir.
