Bugün sizlerle basit bir örnek yapacağız. Ve bu örnek ile AnimationController sınıfına da girmiş olacağız. Örneğimiz , uygulamamızın arkaplanının animasyonlu bir şekilde transparant renkten , kırmızıya geçişi olacak. Yani 1 saniye boyunca arkaplan animasyonlu olacak diyebiliriz.
Flutter AnimationController Nedir?
Flutter’da Animation-Controller, animasyonlarınızı yönetmek ve kontrol etmek için kullanılan önemli bir sınıftır. Bu sınıf, animasyonların başlatılması, durdurulması, hızlandırılması, yavaşlatılması ve duraklatılması gibi işlemleri gerçekleştirmenizi sağlar. Ayrıca, animasyonun ilerleme durumu hakkında bilgi sağlar ve bu durumu takip etmenizi kolaylaştırır.
Animation-Controller, animasyonun başlangıç ve bitiş değerlerini belirlemenize, animasyon süresini ve eğrilerini ayarlamanıza olanak tanır. Bu sayede, istediğiniz türde karmaşık animasyonlar oluşturabilir ve bu animasyonları yönetebilirsiniz. Özellikle kullanıcı arayüzü animasyonlarında ve efektlerinde sıklıkla kullanılır.
Ayrıca, Animation-Controller genellikle StatefulWidget içinde kullanılır ve animasyonun yaşam döngüsünü yönetmek için initState() ve dispose() gibi özel metotlarla entegre edilir. Bu, animasyonların bellek sızıntılarından kaçınmak ve gereksiz animasyonların duraklatılması veya yok edilmesini sağlamak için önemlidir.
Öncelikle Animasyon Sınıfını kullanmak için , statefull classımızın sonuna with keywordu ile şunu ekliyoruz =
with SingleTickerProviderStateMixin
Daha sonra kodumuzu şu şekilde düzenliyoruz :
class _WelcomeScreenState extends State<WelcomeScreen>
with SingleTickerProviderStateMixin {
AnimationController controller;
@override
void initState() {
super.initState();
controller = AnimationController(
duration: Duration(seconds: 1),
vsync: this,
);
controller.forward();
controller.addListener(() {
setState(() {});
print(controller.value);
});
}1- AnimationController sınıfından obje ürettik.
2- İnitstate ile stateful widgetımızın ilk kurulurken çalışmasını belirtiyoruz. ( Tani initState’nin içindeki tüm kodlar bu sayfa açılırken çalışacak sadece. )
3- duration anahtar kelimesi bu animasyonun süresi. 0 – 1 saniye arasında 60 kere değer alacak yukarıdaki örnekte.
4- vsync anahtar kelimesini neden kullandığımızı detaylı olarak anlamak için bu sayfayı ziyaret edebilirsiniz.
5- SetState eklememizin nedeni değişikliğin anında gerçekleşmesini istediğimiz için.
Çok basit bir şekilde , scaffoldumuzun arkaplan renginin opaklığını , controller.value yaparsak , arkaplanımızın animasyonlu olucak.
return Scaffold(
backgroundColor: Colors.red.withOpacity(controller.value),
