Flutter Animations [Built-in Animated Widget Types & Hero Animations]

Herkese merhaba, bugünkü yazımızın içeriği ve konusu Flutter Animasyonları. Kapsayıcı bir bakış açısıyla ele alınan bu yazıda, “Explicit” ve “ Implicit“ adını verdiğimiz 2 başlık altında animasyonlarımızı incelemeye çalışacağız. Daha sonrasında “Built-in Animated widgetlarımız” ile “Hero Animations” başlıklarına değinmeye çalışacağız.

Yukarıda da bahsetmiş olduğumuz üzere, Flutter’da animasyonlar “Explicit Animation” ve “Implicit Animation” olarak ikiye ayrılmakta. Bu 2 animasyon türü arasındaki en temel farklılıklara baktığımızda karşımıza çıkan ilk şey Explicit animasyonların bizlere kullanım esnasında daha çok kontrol mekanizması sunması. Daha anlaşılır bir şekilde söylemek gerekirse, bu animasyon türü “animation controllers” adını verdiğimiz yapılar sayesinde daha rahat kontrol edilebiliyor. Ancak, kurulma ve oluşturulma aşaması Implicit Animasyonlara kıyasla daha karmaşık diyebiliriz. Implicit animasyonların kurulma aşamasında daha az kompleks bir yapıya sahip olmasının altında yatan sebepler ise “custom” ya da “built-in” widget yapıları kullanabiliyor olmamızdan gelmekte. Buraya kadar basit hatlarıyla 2 animasyon türümüzü birbirinden ayırdığımızda göre, yazımızın devamında basit bir şekilde ilerleyebilmek adına built-in animasyonlarımızı incelemeye başlayalım.

Built-in Animations

Adım 1:

İlk olarak standart olarak oluşturmuş olduğumuz bir Stateful Widget sınıfımız olduğunu düşünelim. Bu sınıfımız içerisinde basitçe bir Scaffold() tanımladıktan sonra burada “body :” propertyimize AnimatedContainer() widgetimizi assign ediyoruz. Bu widget propertysini kullanarak basitçe şunu yapmak istiyoruz. Benim bir adet “Container” widgetım olsun. Ancak bu Container widget sıradan bir Container’ın sahip olduğu özelliklerden farklı olarak, içerisinde hangi property olursa olsun onları “animate” edebilme özelliği sunsun.

Adım 2:

Bu adımımızda ise ‘animate’ etmek istediğimiz hangi propertyler varsa onları tanımlıyoruz. Buradaki propertylerimiz kod parçamızdan da görüldüğü üzere 4 adet. Daha sonra bu tanımlamış olduğumuz propertyleri AnimatedContainer’ımız içerisine gönderiyoruz.

Adım 3:

Bu kısımda AnimatedContainer’ımıza ait olmazsa olmaz property’lerden birini ekliyoruz. “Duration” yani animasyonumuzun devamlılık süresini belirleyecek olan parametremiz. Burada farklı süre zarflarını (saniye, milisaniye, dakika vb.) kullanabiliriz. Biz, bu örnekte, 1 saniyelik bir animasyon devamlılık süresi tanımladık.

Kodumuzu çalıştırdığımızda aşağıda, AnimatedContainer widgetimizi belirtmiş olduğumuz propertyler ile birlikte görmekteyiz.

Adım 4:

Bundan sonraki adımda ise yapabileceğimiz şeyler arasında elimizde bulunan ‘default’ parametrelerle oynarak animasyonlar oluşturmak kalıyor. Örneğin, aşağıda AnimatedContainer() widget’ımıza Column widget’ı ile sarmalanmış bir RaisedButton widget’ı ekliyoruz. Daha sonra butonumuzun onPressed(){} methodu içerisinde setState() methodunu çağırıyoruz ve bu method içerisinde başlangıçta belirlemiş olduğumuz default parametrelerden biri olan margin’in değerini “50” olarak değiştiriyoruz.

Bu adımdan sonra, artık margin değerimizin bir animasyon ile birlikte değiştiğini görmeyi bekliyoruz.

Artık animasyonlarımızı nasıl etkinleştireceğimizi öğrendiğimize göre bunu farklı propertylerimiz için deneyebiliriz. Örneğin aşağıda “color” için nasıl uygulayabildiğimizi görmekteyiz.

Hero Animations

Şimdi bahsedeceğimiz animasyon türümüz ise Hero Animation adını verdiğimiz temel fakat oldukça kullanışlı animasyon türlerinden biri. Bu built-in animasyonumuz ile birlikte, 2 adet ekranımızda bulunan widget’ları her iki ekranda da mevcut olmak suretiyle birinden diğerine oldukça soft bir geçişle görünür kılabiliyoruz. Bu tanımı destekler nitelikte gerçek bir örneğe göz atmak isteyenler için bu animasyonun ne yaptığını anlatır nitelikte kısa bir kesite aşağıda yer verdim.

Örneğimizden de görüldüğü üzere ilk ekranımızda gördüğümüz resmimizin aynısını ikincil ekranımızda daha büyük ve yukarıda konumlanmış bir biçimde birincil ekrandan gelen bir uzantı şeklinde görebiliyoruz. Şimdi isterseniz gelin bu animasyonu koda nasıl dökebileceğimize bakalım..

Kod kısmımızda yapmamız gereken tek şey ilk ekranda ve ikinci ekranda animasyon özelliğini kazandırmak istediğimiz resimler hangileri ise, onları ‘Hero’ widgetlerimiz ile çevrelemek. Ne demek istediğimi daha iyi anlayabilmek adına hep birlikte kodlar üzerinden bakmamız tabii ki de daha sağlıklı olacaktır.

Bu kod parçası ilk ekranımızda küçük boyutlardaki 4 adet resmimize karşılık gelen kısımlardan biri. Bu kısımda yapmamız gereken tek şey, yukarıda da söylediğimiz gibi buradaki ‘image’ propertyimizi bir ‘Hero’ widgeti ile sarmalamak.

Adım 1:

Bunun için öncelikle ‘Wrap with widget..’ komutuna tıklıyoruz.

Adım 2:

Ve gelen ekranda <widget> property olarak Hero widgetimizi şekilde görüldüğü gibi resmimizi sarmalayacak şekilde ekliyoruz. Buraya kadar her şey tamam gibi gözükse de, geriye bir adımımız daha kalıyor.

Adım 3:

Son adımımızda eklememiz gereken kısım, ‘tag’ propertysi olarak karşımıza çıkmakta. Burada bu property’i eklememizdeki amaç, ilk ekranımızdaki resim ile ikinci ekranımızdaki resmimizin birbiriyle bağlantısını tanımlayabilmek. Yani, bu örneğimizde listemizde 4 farklı resim ikilisi (pair) mevcut. Bu ikililerimize “unique” lik kazandırabilmek adına her bir pair’a etiketleme işlemi yapıyormuşuz gibi düşünebiliriz. Aşağıda da göreceğiniz üzere, ilk ekrandaki 4 ‘image’ propertylerimize de ayrı ayrı “uniqueness” kazandırmış olduk.

İlk ekranımızda gereken ‘Hero’ widget ile sarmalama işlemimiz bittikten sonra aynı işlemimizi 2. ekranımızdaki daha ‘wide’ formata sahip olan ‘image’ propertylerimize uyguluyoruz.

Farkettiğiniz üzere, ilk ekranımızda ‘tag’ propertymizin içerisine vermiş olduğumuz uzantının tıpa tıp aynısını 2. ekranımızdaki ‘image’ propertylerimize de veriyoruz. Ve bu sayede, 2 ekranımız arasında animasyon için gerekli olan tüm bağlantı ve tanımlama safhaları çözülmüş oluyor.

Artık “Hero” animasyonumuz kullanıma hazır :)

Yazımda genel olarak Flutter içerisindeki built-in animated widget propertylerini ve animasyon türlerinden biri olan “Hero Animations’ u” ele almaya çalıştım. Umarım herkes için farkındalık kazandırabilecek faydalı bir içerik olmuştur. Değerli vaktinizi ayırıp okuduğunuz için çok teşekkür ederim. Başka yazılarda görüşmek üzere..