Flutter AnimatedContainer Kullanımı #139

Kategori Featured, Flutter
16.03.2023
60 Okunma

Senaryo: Bir kullanıcının profiline tıkladığında, profili genişleyen bir şekilde açılsın ve kapansın.

Bu senaryoyu gerçekleştirmek için AnimatedContainer Widget’ını kullanabiliriz. AnimatedContainer, kendisine verilen özelliklerde (width, height, padding, margin, color vb.) ani bir şekilde geçiş yapabilen bir Container Widget’ıdır. Bu nedenle, genişleyen ve daralan bir profile sahip olmak istediğimizde AnimatedContainer Widget’ını kullanabiliriz.

Örnek Kod:

Burada, AnimatedContainer‘ın width ve height özelliklerini, _isExpanded değişkenine bağlı olarak değiştiriyoruz. _isExpanded true olduğunda, AnimatedContainer’ın boyutları genişleyecek ve profil içeriği görüntülenecektir.

InkWell widget’i, kullanıcının profil resmine tıkladığında _isExpanded değişkeninin değerini değiştirmek için kullanılır. Böylece, profil resmine her tıklandığında, profil genişleyecek veya daralacaktır.

AnimatedContainer ayrıca decoration özelliği aracılığıyla da birçok stil özelliğine sahip olabilir. Bu örnekte, borderRadius özelliği, profil daraldığında dairesel şekli koruyacak şekilde ayarlanmıştır.

Sonuç olarak, AnimatedContainer Widget’ı, herhangi bir Widget’ın animasyonlu bir şekilde genişlemesi ve daralması için kullanılabilir. Bu sayede, kullanıcıların ilgisini çekecek interaktif ve animasyonlu arayüzler tasarlamak daha kolay hale gelir.

 AnimatedContainer‘ın kullanımı sadece boyutu değiştirmekle sınırlı değildir. Aynı zamanda arka plan rengi, border rengi, padding, margin gibi diğer stil özellikleri de animasyonlu bir şekilde değiştirilebilir. Örneğin, bir uygulamada kullanıcının bir butona tıkladığında, butonun rengi değişebilir ve bu renk değişimi animasyonlu bir şekilde gerçekleştirilebilir.

Örnek Kod:

Bu örnekte, AnimatedContainer‘ın boyutu değişmiyor, ancak arka plan rengi, border radius ve gölgelendirme değişiyor. Butona tıklandığında, _isClicked değişkeni değiştirilerek, AnimatedContainer‘ın özellikleri animasyonlu bir şekilde değiştirilir.

BoxDecoration sınıfı, AnimatedContainer‘ın stil özelliklerini ayarlamak için kullanılır. Bu örnekte, borderRadius özelliği butonun tıklanabilir hale geldiğinde 20 olacak şekilde ayarlanmıştır. Ayrıca, boxShadow özelliği de kullanılarak, butonun gölgesi animasyonlu bir şekilde genişleyecektir.

Sonuç olarak, AnimatedContainer Widget’ı, interaktif ve animasyonlu arayüzler tasarlamak için çok kullanışlı bir Widget’tır. Basitçe boyut değişimiyle sınırlı değildir ve diğer stil özelliklerini animasyonlu bir şekilde değiştirerek, uygulamaların kullanıcılar üzerinde daha fazla etkisi olmasını sağlar.

Comments of this post

Henüz yorum bulunmuyor!