Flutter ile Animasyonlu Flip Efekti: Bir Widget’ı Farklı Bir Boyuta Taşıyın!

Merhaba. Bugünkü yazımda Flutter ile animasyon işlemlerine bir giriş yapacağım.

Uygulamalarımızda animasyon kullanmak zorunda değiliz ancak animasyon kullanarak uygulamamızı daha renkli, daha güzel bir hale getirebiliriz. Flutter, zengin animasyon desteği sunan birçok farklı sınıf ve yöntem içermektedir.

Flutter’da Animasyonlar

• Animation: Animasyonların temelini oluşturan sınıftır ve değerlerin belirli aralıkta/süre içinde nasıl değişeceğini tanımlar.
• AnimationController: Oluşturduğumuz animasyonları kontrol etmek için kullanılan bir sınıftır. Başlangıç, bitiş, süre gibi özelliklerini bu sınıf aralıcığıyla belirleyebiliriz. Dilersek de animasyonlarımızı başlatabilir, durdurabilir, reverse edebiliriz.
• Tween: Animasyonların başlangıç ve bitiş değerlerini belirten bir sınıftır.
• Curve: Animasyonlarımızın nasıl ilerleyeceğiyle alakalı bir sınıftır. Curves sınıfı içerisinde bulunan öğeleri kullanarak yavaş başlayan, sonradan hızlanan gibi animasyonlar oluşturabiliriz.
• AnimatedWidget: Animasyonu dinamik olarak güncelleyen bir widget sınıfıdır.
• Hero: Animasyonlar içerisinde en çok kullandığım ve kullanımı çok basit olan bir animasyon türüdür. Özellikle bir sayfadan başka sayfaya geçerken her iki sayfada kullanacağım örneğin bir fotoğraf varsa bunu Hero Widget’ını kullanarak nesnelerin akıcı bir şekilde büyüyüp/küçülüp hareket etmesini sağlar.

Başlayalım

Yapacağım animasyon bir Container Widget’ına flip efektini kullanmak olacak.

class’ımın hemen içerisine bu değişkenlerimi ekliyorum. Controller, animasyonu kontrol etmemi sağlayacak. Animation, animasyonumun hareketini oluşturacak. AnimationStatus ile de animasyonumun durumunu alacağım.

initState içerisinde_controller’ımın AnimationController olduğunu ve ne kadar sürede bu animasyonu gerçekleştireceğini Duration ile belirliyorum. Burada önemli olan ekstra bir bilgi var. vsync: this. Burası muhtemelen hata verecektir. Sebebi ise class’ımızı TickerProvider türüne atılamamasından kaynaklanmaktadır.

TickerProvider; genellikle animasyonu tetiklemek için kullanılan bir sınıftır. Classımızı with SingleTickerProviderStateMixin ile TickerProvider türüne atayabiliyoruz. Buradaki sorunu bu şekilde çözebiliriz.

_animation değişkenimi ise Tween ile birlikte başlangıç ve bitiş değerlerini veriyorum. Devamında ise .animate diyerek içerisine tanımlamış olduğum controller’ımı veriyorum. ..addListener diyerek bu değişkenimi dinliyorum ve her seferinde setstate atarak ekranı tekrar çiziyorum. ..addStatusListener ile de animasyonumun status değerini tutuyorum.

Şimdi artık ekranımızda görünecek Widget’larımızı çizmeye başlayabiliriz.

Ekranımda iki tane Widget tasarlıyorum. Bir tanesi sadece buton özelliği olacak. Diğeri ise animasyonlu yapacağımız Widget olacak. Öncelikle animasyonlu olacak Widget’ımıza göz gezdirelim.

Transform Widget’ı, bir Widget’ın dönüşümünü ve dönüşüm etkilerini kontrol etmek için kullanılır.

• Transform.flip()
• Transform.rotate()
• Transform.scale()
• Transform.translate()

gibi türevleri bulunur.

Verdiğim alignment özelliği tam merkezinden dönecek şekilde ayarlamasına yardımcı olmaktadır. Sizler de FractionalOffset. yapıp deneyerek aslında tam olarak ne işe yaradığını görerek daha net anlayacaksınızdır. Animasyonlarla uğraşırken deneyerek bir şeyler yapmak her zaman hem daha eğlenceli hem daha öğretici olduğunu düşünüyorum.

transform özelliği ise bir dönüşüm matrisi uygulamaktadır. Matrix4.identity() ile başlangıç dönüşüm matrisini oluşturmaktayım. Sadece bu matrisi kullanırsam bir dönüşüm uygulamamış olurum. Ancak setEntry ifadesi ile perspektif bir dönüşümü simüle ediyorum ve widgetın uzaklığa göre biraz küçülmesini sağlıyorum. Buradaki değişkenlerle oynamanızı ve hangi değişkenin nasıl bir animasyon oluşturduğunu görmenizi öneririm.

rotateY kullanarak ise Widget’ın y ekseninde dönmesini sağlıyorum. pi*_animation.value diyerek Widget’ın dönüş açısını hesaplamaktayım.

Şimdi gelelim child’ına. Bir Card Widget’ı kullandım. _animation.value <= 0.5 ifadesini kullanarak animasyon Widget’ımın ön yüz ve arka yüzünü belirtiyorum. Bu değerin 0.5’ten küçük olduğu durumda ön yüzü, 0.5’ten büyük olduğu durumda da arka yüzünü çizmesini istiyorum. Bu değer 0 ile 1 arasında olduğundan dolayı 0.5 tam ortasındayken diğer Widget’ı çizeceğimi gösteriyor. Bu değeri 0.1 ve 0.99 yapıp deneyerek tam olarak neyi kast ettiğimi çok net bir biçimde anlayacaksınızdır.

Burada ön yüzde göstereceğim Widget’ım 200’e 200 genişliğinde bir Container Widget’ı.

Ancak, backAreaWidget’ım biraz farklı olacak.

backAreaWidget’ım da aslında frontAreaWidget’ım gibi 200’e 200 genişliğinde bir Container. Ancak;

Bu Container Widget’ımızı Transform ile sarmışız. Koymak zorunda değilsiniz. Ancak bunu koymazsanız içerisine yazmış olduğunuz Text’ler, Widgetlar tam olarak bir ayna görüntüsünü andıracaktır. Düz bir biçimde Mobile Application Developer YAZMAYACAKTIR.

Biz burada Transform ile sararak ve transform özelliğine Matrix4.rotationY(pi) vererek oluşan görüntünün de ayna görüntüsünü almış oluyoruz ve düz bir biçimde görmek istediğimiz Widget’ı bize çizecektir.

Peki, bu animasyonu nasıl tetikliyoruz?

Oluşturacağınız herhangi bir buton Widget’ı içerisine bu kod bloğunu yazarak animasyonumuzu tetikleyebiliriz.

forward() ileri yönde çalıştırırken reverse() ise geri yönde animasyonu çalıştırır.

Biraz karışık gibi görünmüş olabilir fakat sayılarla oynayarak, deneyerek tam olarak neyin ne işe yaradığını daha rahat anlayacağınızı düşünüyorum.

Kaynak kodlarına buradan ulaşabilirsiniz.

Okuduğunuz için teşekkür ederim. Herkese iyi çalışmalar.