Container Widget
Muhtemelen container widget flutter da en çok kullanılan widgetların başında geliyordur. Temel kullanım amacı göstermek istediğiniz veya özellik eklemek istediğiniz bir widget’ ı içine alarak istenilen özellikleri eklemek. Adından da anlaşılacağı gibi, aslında göstermek, koruma altına almak istediğiniz Widget’ i içine koyduğunuz yardımcı bir widget kendileri.
Evet bu kadar teorik konuşup iyice kafa karıştırdığımıza göre artık örnekler ile açıklama yapma zamanı gelmiştir.
Hadi Başlayalım…
Basit bir widget ile başlayalım. Şekil 1-A da olduğu kadar basit
Text widgetınızın arka tarafının yuvarlak ve renginin mavisi olmasını istiyorsunuz. İşte o zaman Text widgetınızı container içine almanın zamanı gelmiş demektir. Lets gooo!!!
Color, Width, Height Özellikleri
Şimdi container içine aldığınız widgetın özelliklerinden faydalanarak color, width, height verelim böylece yazıyı kapsayan ve belirtiğimiz ölçülere riayet eden özellikte bir layerımız var, aynı tabela gibi…
Şimdi kenarlardan radius verme kısmına geldik. Aşağıdaki kod bloğunda da görüldüğü üzere decoration özelliğini kullanarak gerekli gördüğümüz ölçüde radius verebiliyoruz. Decoration çok daha detaylı bir konu olması sebebi ile bu yazımızda ona girmeyeceğiz.
Burada yorum satırına alınmış bir color özelliği var. Bunun sebebi decoration kullandığımız için artık widget bizden decoration içinde color vermemizi bekliyor. Eğer ki ayrı yazarsanız hata alacaksınız. Çünkü containerın dekorasyon özelliğini kullanmaya başladınız da artık color parametresini ayrı bir yerde vermeye ihtiyacınız yok.
Alignment, Padding ve Margin Özellikleri
Öncelikle özelliklerin minik açıklamalarını yapalım.
Alignment özelliği bize container’ ı konumlandırmak istediğimiz yere koymamızı sağlıyor. Örn: Alignment.topleft , Alignment.bottomCenter…
Padding özelliği container ve child’ ı arasındaki sınırları belirliyor.
Margin özelliği container ile parentı olan widgetın arasındaki sınırları belirliyor.
Bu bilgiler ışığında aşağıdaki örneğe bakacak olursak. Center widget ‘ ı kaldırdık ki yazacağımız alignment komutunun çalışmasını görebilelim. container’ ı “Alignment.topleft” yazarak sol üst köşeye konumlandırdık. Text widget ile container arasına her taraftan 5 pixel olacak şekilde padding verdik. Bu örnek için konuşacak olursak appbar arasına her taraftan 30 pixel mesafe koymasını istedik. Buda Iphone13 pro da ortalandırmışız gibi durdu ama sadece bu ekran için öyle olacaktır. Farklı ekran boyutlarında widgetın konumlandırılmasının değişeceğini unutmayın. Center gibi kesin bir widget ile konumlandırmadık sadece sağa sola yukarı aşağı olan mesafesini ayarladık ekran boyutuna göre buda değişiklik gösterecektir.
Transform
Trasnform temel olarak containerınızın ekrandaki konumu matrix düzleminde şekil değiştirmesini sağlar. Alignment , padding ve margin de aynı işe yarıyor diye düşünebilirsiniz. Ama düşündüğünüz şekilde değil örnekte daha net anlaşılacaktır.
Constraints
Container widget’ a ekstra sınırlamalar getirmenizi sağlar. Yukarıdan 30 pixel’ i geçmesin sağdan 20 pixel kalsın gibi.
Evet ufaktan bitirelim artık. Genel hatları ile container widget bu şekilde decoration, transfor ve foreground gibi özelliklerin derinlerine inerek daha fazla şey keşfedebilirsiniz. Orası size kalmış artık.
Github Kodları;
Twitter;
