Flutter da AnimatedContainer kullanımı

Herkese merhaba, bu yazımda Flutter’ın kolayca animasyon yapmamızı sağlayan widgetlerından biri olan AnimatedContainer hakkında bilgiler verip, nasıl kullandığımdan bahsedeceğim.

AnimatedContainer nedir?

AnimatedContainer, sağlanan eğri ve süre ile değiştirildiğinde eski ve yeni özellik değerleri arasında otomatik olarak hareket eden widgetlardır.

Öncelikle AnimatedContainer yapısı içerisinde hangi özellikler var onları inceleyerek başlayalım.

• Duration : Widgetin parametrelerinin canlandırma süresidir.
• Height : Widgetin uzunluğunu belirlediğimiz özellik.
• Width : Widgetin genişliğini belirlediğimiz özellik.
• Decoration : Arka planının dekorasyonunu yapmamıza yarayan özellik.

Özellikleri hakkında daha fazla bilgi sahip olmak için ;

AnimatedContainer class

Peki, nasıl kullanacağız bu AnimatedContainer’ı? Küçük bir örnek ile açıklayalım.

gis

• Widget ımın height ve width değerlerine cihazımın ekran boyutunu vererek tüm ekranı kaplamasını sağladım.
• Decoration, içerisinde lineargradient yapısını kullandım. FractionalOffset.topCenter ve FractionalOffset.bottomCenter vererek ekranın üst merkezinden, alt merkezine göre listemizdeki renklerinin geçişini sağlıyorum.
• initState içerisinde 12 saniyelik bir timer başlatıp saniyeler arası liste yapımı güncelleyip dekarasyon içerisinde arkaplan rengini değiştiriyorum.
• Timer biterken AnimatedOpacity içerisinde Image ve Text Widgetlarımın görünür yapıyorum.

Uygulamanın Görüntüsü

AnimatedContainer yapısını nasıl kullandığımı küçük bir örnek anlatmaya çalıştım. Umarım yararlı olmuştur.

Sonraki yazılarda görüşmek üzere 🖐🏼