Flutter, zengin ve akıcı animasyonlar oluşturmanıza olanak tanıyan modern bir framework’tür. Animasyonlar, kullanıcı deneyimini iyileştirmek ve uygulamanızı daha dinamik ve ilgi çekici hale getirmek için kullanılabilir. Flutter’da animasyon oluşturmanın birkaç yolu vardır:

1. Tween Animasyonları

Tween animasyonları, bir başlangıç ​​ve bitiş değeri arasında ara değerler üreten animasyonlardır. Tween sınıfı, animasyonun nasıl ilerleyeceğini tanımlar. Bu animasyonlar, AnimationController ile kontrol edilir ve genellikle bir AnimatedBuilder veya AnimatedWidget ile ekranda gösterilir.

AnimationController controller;
Animation<double> animation;

@override
void initState() {
  super.initState();
  controller = AnimationController(
      duration: const Duration(seconds: 2), vsync: this);
  animation = Tween(begin: 0.0, end: 300.0).animate(controller)
    ..addListener(() {
      setState(() {});
    });
  controller.forward();
}

@override
void dispose() {
  controller.dispose();
  super.dispose();
}

2. Fizik Tabanlı Animasyonlar

Flutter ayrıca, gerçek dünya fizik kurallarını taklit eden animasyonlar oluşturmanıza olanak tanıyan fizik tabanlı animasyonları destekler. Bu, özellikle sürüklenme, yaylar gibi etkileşimler için yararlıdır. AnimationController‘a ek olarak, SpringSimulation, GravitySimulation gibi sınıfları kullanabilirsiniz.

AnimationController controller;
Animation animation;

@override
void initState() {
super.initState();
controller = AnimationController(vsync: this);
final spring = SpringDescription(
mass: 2,
stiffness: 100,
damping: 1,
);
animation = controller.drive(Tween(begin: Offset.zero, end: Offset(1, 0)))
..addListener(() {
setState(() {});
});
controller.animateWith(SpringSimulation(spring, 0, 1, -10));
}

3. Hero Animasyonları

Hero animasyonları, widgetlar arası geçişlerde kullanılır ve kullanıcıya akıcı bir navigasyon deneyimi sunar. Bir widget, bir ekrandan diğerine “uçarken”, Flutter bu iki widget arasında bir animasyon oluşturur.

Hero(
  tag: 'hero-tag',
  child: Image.asset('path/to/image'),
)

4. Implicit Animasyonlar

Flutter, AnimatedContainer, AnimatedOpacity gibi bir dizi implicit animasyon widget’ı sunar. Bu widgetlar, belirli bir süre boyunca otomatik olarak animasyon eklerler. Kullanımı çok basittir ve genellikle bir durum değişikliğiyle tetiklenir.

AnimatedOpacity(
  opacity: _visible ? 1.0 : 0.0,
  duration: Duration(seconds: 1),
  child: const Text('Merhaba Dünya'),
)