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.

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!