Flutter Animasyonlar: ColorTween

Flutter framework’ü üzerinde animasyonlar oluşturmak çok kolay, özellikle ColorTween ile animasyonlar yapmak! ColorTween, iki renk arasında geçiş yapan bir animasyondur ve her türlü widget üzerinde oluşturulabilir. Yaptığım bir uygulamada dial ekranı oluştururken, butonlara dokunma efekti vermek için kullanmıştım. Fakat bu yazıda basit bir ColorTween animasyonu nasıl yapılır bunun üzerine odaklanacağız.

Öncelikle AnimationController ve Animation değişkenlerimizi oluşturalım. Tabi bunu yaparken State içerisine SingleTickerProviderStateMixin’i de eklemeyi unutmayalım.

class _MyHomePageState extends State<MyHomePage>
    with SingleTickerProviderStateMixin{

  AnimationController? controller;
  Animation<Color?>? animation;

}

Daha sonra initState içerisinde bu AnimationController ve Animation değişkenlerine değerler atayalım.

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(milliseconds: 2500),
      vsync: this,
    );
    animation = ColorTween(
      begin: Colors.grey,
      end: Colors.blue,
    ).animate(controller!)
      ..addListener(() {
        setState(() {});
      });
  }

initState’i yazdıktan hemen sonra unutmadan dispose içerisinde controller değişkenimizi dispose edelim. Bunu tüm controller değişkenleri için yapmayı unutmayın. 🙂

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

Son olarak Scaffold içerisinde bir buton ve container oluşturalım. Butona tıkladığımızda container widget’ımızın rengi değişecek ve bir ColorTween animasyonu oluşturacak.

return Scaffold(
      body: Container(
        width: MediaQuery.of(context).size.width,
        height: MediaQuery.of(context).size.height,
        decoration: BoxDecoration(
          color: Color.fromARGB(255, 49, 58, 88),
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            TextButton(
              onPressed: () {
                controller!.forward().then((value) {
                  controller!.reverse();
                });
              },
              child: Text('Renk Değiştir',
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 30.0,
                  )),
            ),
            Container(
              height: MediaQuery.of(context).size.height / 2,
              width: MediaQuery.of(context).size.width / 1.5,
              color: animation!.value,
            )
          ],
        ),
      ),
    );

GIF olarak yaptığımız çalışmayı görelim:

Flutter uygulamalarında ColorTween gibi animasyonları oluşturmak bu kadar kolay! Bir sonraki yazılarımın konusu çoğunlukla animasyonlar üzerinde olacak. Flutter gibi bir framework üzerinde animasyonları hakkıyla kullanmamak olmaz. 🙂 Bu yüzden animasyonları, efektleri, ColorTween gibi AnimatedIcon gibi birçok animasyon yapmanızı sağlayacak widget tiplerini ve controller çeşitlerini blog yazılarıma konu alacağım. Şimdiden takipte kalın!

Okuyucuya Not

Merhaba okuyucu! Blogum son zamanlarda yüksek trafik almaya başladı ve bu durumdan memnunum fakat aynı zamanda siz ziyaretçileri tatmin edememekten endişeliyim. 🙂 Eğer yazılarım ile ilgili bir tavsiyeniz olursa mail adresimden bana ulaşabilir veya Twitter üzerinden direct message gönderebilirsiniz. Github’ta örnek olarak yaptığım projelere göz atmak isterseniz de bu linki kullanabilirsiniz. Umarım bu ziyaretinizle size bir şeyler katabilmişimdir.

Sağlıcakla kalın!