Flutter Uygulamalarında Animasyon Kullanmak

Herkese merhaba! Sizlere Flutter Engage etkinliğindeki en sevdiğim sessionlardan biri olan Diego Velasquez’in yapmış olduğu Animating a Flutter app sunumunu onun tarafından aktarmak istiyorum. Bu yazıyı, Diego’nun sunumuyla okuduğunuzda, anlamanızı çok çok kolaylaştırmasını hedefleyerek hazırlıyorum. Sunumu hemen alttan izleyebilirsiniz.

Animasyon Nedir?

Öncelikle bu soruya, Diego’nun verdiği basit cevapla yanıt vermek, ardından kendi sevdiğim yanıtla destekleyerek başlamak istiyorum. Diego, herkesin anlayabileceği şekilde “Bir hareketin, resimleri bir sırayla göstererek oluşturulmuş simülasyonu.” olarak tanımlıyor ancak ben, daha geleneksel olan “Resimlerin, hareket ilüzyonunu verecek şekilde düzenlenmesi.” olarak tanımlamayı daha çok seviyorum. Elbette bu tanımlamaların ikisi de oldukça basit ve benzer, ancak arka plandaki iş daha karmaşık. Yine de Flutter, bu karmaşayı yönettiği için, o kısmı keşfedip keşfetmemek sizin kararınız olsun.

Uygulamamızda neden animasyon kullanalım ki?

Çünkü çok güzeller! Animasyon bir uygulamanın albenisini arttırmanın yanında, kullanıcıya daha doğal ve akıcı bir deneyim yaşatır. Animasyonsuz bir uygulamada butonlar, geçişler için geri bildirim bulunmama olasılığı yüksektir. Bu da hissiyatın cansız olmasına, uygulama ile kullanıcının arasında bir kopukluğa neden olabilir. Böyle bir his vermek, pek de isteyeceğimiz bir şey değil.

Peki animasyonları nasıl kullanacağız?

Flutter uygulamalarımızda kullanabileceğimiz animasyon widgetlarını iki gruba ayıralım. Birisi Implicit ve diğeri Explicit animasyonlar. Diego bizlere hem Explicit, hem de Implicit uygulamaları nasıl kullanacağımızı anlatıyor. Şimdi bu iki grubun içindeki widgetlara bir göz atalım:

Grafikte iki grup içinde de Widgetlarımız bulunuyor. Bu Widgetların kişiselleştirilme imkanı sağdan sola gittikçe artıyor. Peki en solda bulunan ImplicitlyAnimatedWidget da bize kontrol imkanı az çok veriyorken, neden Implicit ve Explicit olarak iki gruba ayırdık? Aralarındaki fark nedir? Yine basitçe anlatmak gerekirse, Explicit animasyonlar bir controller’a ihtiyaç duyarlar. Bu yüzden, onları en verimli şekilde kullanmak biraz daha araştırma ve pratiğe dayanıyor.

Şimdi gelelim kod kısmına! Diego, bizler için bir proje hazırlamış. Projeyi GitHub linkinden indirip, kodlarına daha yakından göz atabilirsiniz. Biz de bu projenin üstünden ilerlemeden önce hızlıca tanımaya çalışalım.

Uygulamamız, 3 sayfadan oluşuyor. Bir açılış ekranı, bir ana ekran ve bir detay ekranı. 3 saniyelik açılış ekranında Flutter logosunu gördükten sonra, ana ekranımızda Dünya’nın 7 Harikası’nı içeren bir liste görüyoruz. Bu liste elemanlarından birine tıkladığımızda ise, detaylarını gördüğümüz sayfaya gidiyoruz. Oldukça basit bir uygulamamız var. O zaman küçük animasyonlarla bu basit uygulamamızı daha güzel yapmaya, açılış ekranımızla başlayalım.

Uygulamamızın açılışı çok statik ve cansız. Bu yüzden bir scale animasyonu ekleyebiliriz. Peki zor mu? Hiç de değil.

Burada Explicit animasyon kullanıyoruz, bu yüzden bir controller’a ihtiyacımız var. Bir AnimationController kullanacaksak, ve sadece bir tane kullanmak istiyorsak SingleTickerProviderStateMixin kullanmalıyız, ama birden fazla kullanmak için TickerProviderStateMixin kullanmalıyız. Ardından initState içinde obje oluştuyor, süresini 3 saniye olarak ayarlıyoruz. Şimdi lower değerimizi 1 ve upper değerimizi 10 olarak belirliyoruz. Ve son olarak flutter logomuzu, ScaleTransition widgetı ile çevreliyoruz.

Şu ana kadar yaptıklarımız çalıştığına göre, ana sayfamıza yani home_screen.dart dosyamıza geçiş yapabiliriz. Diyelim ki, tasarımcı bize “Bu liste güzel de, ben grid olarak görmek de istiyorum. İkisi de olsun hatta, bi butonla aralarında geçiş yapalım.” diyorsa, önce HomeListView widget’ını HomeGridView ile değiştirelim. Geçişi yapabilmek için, _HomeScreenState class’ının altına bool isListMode = True; kodunu, sonra da validation ekliyoruz. Şimdi bir methoda ve _getBody widget’ında HomeListView’ı returnlemeye ihtiyacımız var. Bu projede bunu başlatacak değişkenimizi de places olarak ayarlıyoruz.

Butonumuzu da oluşturalım. Bir IconButton oluşturalım, onPressed methodunda, setState altına isListMode = !isListMode eklemesini yaparak grid ve liste arasındaki geçişi tanımlayalım.

Bu geçişe bir animasyon eklemedik. AnimatedSwitcher burada çok işimize yarayacaktır. _getBody widgetımızı, AnimatedSwitcher ile sarıp, süresini de milisaniye cinsinden 300 olarak ayarladıktan sonra güzel bir geçiş animasyonuna sahip oluruz!

Bir şey daha! Listedeki resimle detay ekranındaki arasında pürüzsüz bir geçiş yapalım. Burada kullanabileceğimiz çok basit ve güçlü bir widget var ve bu bir ImplicitlyAnimatedWidget olacak, yani bunun bir controller’a ihtiyacı yok. Image.Network’ü, Hero widgetının içine saralım ve name tag’ını kullanalım. Detay ekranında bu animasyonumuzu tamamlayacağız.

Yavaştan detalis_screen.dart’a geçerken, buradaki resmimizi de Hero widgetımızla sarıp aynı tag’ı veriyoruz. Şimdi ise küçük bir detay var. MaterialPageRoute’u varsayılan haliyle kullandığımız için Flutter, geçişi varsayılana göre yapıyor. Varsayılan yerine biz, kendi geçişimizi kullanalım. Bir PageRouteBuilder ve FadeTransition kullanalım.

Artık details_screen.dart’a odaklanabiliriz! Sayfayı açtığımızda, text için bir shake effect istiyoruz. Öyleyse bu text’i TweenAnimatedBuilder ile saralım. Text’i hareket ettirmek içinse Transform.translate widget’ını kullanmamız gerekiyor. Son olarak offset ayarlayalım ve curve’ü de değiştirelim. Elimizde güzel bir animasyon daha var!

Artık kodlarla oynama vakti, buradan sonrası hem araştırmanıza, hem de yaratıcılığınıza kalmış. Tabii ki bütün bu eğlence esnasında, kodunuzdaki değişikliği görmek için beklerken bir bardak kahve hazırlamayı planlamıyorsanız, Hot Reload’u sık sık kullanmayı ve vakitten kazanmayı unutmayın!

Bunların hepsini, bir pakete ihtiyacımız olmadan, birkaç satır kod ile yaptık. Zor dediğimiz şeyler bile, temelde bu kadar kolay!