Flutter Animasyonlar: AnimatedIcon kullanımı

Flutter’da havalı animasyonlar nasıl yapılır anlatacağım seriye hoşgeldiniz. 🙂 Serinin ilk konusu olarak AnimatedIcon kullanımını anlatacağım bu yazıda ayrıca seri boyunca oluşturacağım animasyonların Github linkini de vereceğim. Böylelikle gelecekte bu seriyi ziyaret eden okuyucular, rahatlıkla her animasyon için nasıl yapılır kod deposuna ulaşabilecek. 🙂

AnimatedIcon nedir?

AnimatedIcon, özel bir Widget’tır ve bu özel Widget ikili animasyonlar arası geçiş sağlar. AnimatedIconData alan bu Widget, genellikle Icon veya IconButton ile beraber kullanılır. AnimationController objesi ile beraber kullanıldığından, StatefulWidget’lar ile beraber kullanılması elzemdir.

AnimatedIcon Kullanımı

StatefulWidget’a with SingleTickerProviderStateMixin ekledikten sonra animatonController objemizi oluşturalım.

  bool isClicked = false;
  late AnimationController _animationController;
  @override
  void initState() {
    _animationController = AnimationController(
        vsync: this, duration: const Duration(milliseconds: 750));
    super.initState();
  }

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

Daha sonrasında bir IconButton oluşturalım ve onPressed içini animationController objemizi forward ve reverse edeceğimiz şekilde dolduralım. Ardından, IconButton’ın icon’ına AnimatedIcon Widget’ını verelim.

AnimatedIcon, zorunlu iki parametre alır. İlki progress, animationController objemizi verdiğimiz parametredir. İkincisi de AnimatedIconData alan, icon parametresidir.

            IconButton(
              onPressed: () {
                setState(() {
                  isClicked = !isClicked;
                  if (isClicked) {
                    _animationController.forward();
                  } else {
                    _animationController.reverse();
                  }
                });
              },
              icon: AnimatedIcon(
                  icon: AnimatedIcons.menu_close,
                  progress: _animationController),
            ),

Yukarıdaki satırları ekledikten sonra projemizi çalıştıralım.

Animated Icon örneği
Animated Icon örneği

AnimatedIcon kullanımı oldukça basit ve etkili bir Widget’tır. Projelerinizde bol bol dialog göstermeli, modal bottom sheet açmalı işler için kullanabilirsiniz. 🙂 Örnek proje için Github linkini ziyaret edebilirsiniz.


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!