Bugün yazımızda basit bir animasyon uygulaması yapacağız. Flutter ile bunu yapmak gerçekten çok basit. Bugünlerde geliştirdiğim bir chat app’i üzerinden örnek vereceğim. Uygulamamdan bir ekran kaydı aldım ve bunu gife çevirdim.
Flutter Hero Animation Nedir?
Flutter Hero Animation, Flutter ile kullanılan bir görsel geçiş animasyonu türüdür. Bu animasyon, iki farklı sayfa veya ekran arasında kullanılır ve bir öğenin (genellikle bir resim, simge veya metin) kaydırılmasını veya büyütülüp küçültülmesini içerir. Hero animasyonları, kullanıcı arayüzünde nesnelerin sorunsuz bir şekilde bir ekran arasında taşınmasını ve geçişlerin daha akıcı ve çekici olmasını sağlar.
Temel Özellikleri ise şu şekilde;
- Hero: İki sayfa arasında paylaşılan bir nesneye “hero” denir. Bu nesne, iki ekran arasında geçiş yaparken büyütülüp küçültülen veya hareket ettirilen nesnedir.
- Başlangıç ve Hedef: Hero nesnesi, başlangıç ekranında bir öğe olarak gösterilir ve hedef ekranında aynı veya benzer bir öğeye dönüşür.
- Hero etiketi: Her iki ekrandaki hero nesnesi, aynı benzersiz etikete sahip olmalıdır. Bu etiket, Flutter’a hangi nesnelerin eşleştiğini bildirir.
- Geçiş: Geçiş yapılırken Flutter, başlangıç ekranındaki hero nesnesini hedef ekranındaki Hero nesnesine görsel olarak dönüştürür. Bu geçiş sırasında nesne, boyut, konum ve renk gibi özelliklerde yumuşak bir şekilde değiştirilir.
Hero animasyonları, kullanıcı deneyimini geliştirmek ve uygulamanızı daha etkileyici hale getirmek için kullanılır. Özellikle iki farklı sayfa arasında benzer içeriklerin olduğu durumlarda kullanışlıdır. Hero animasyonlarını oluşturmak için Flutter’da Hero widget’ını ve her iki sayfa arasındaki kahraman nesnelerine aynı etiketi atamak gereklidir. Bu sayede Flutter, geçişler sırasında doğru animasyonları oluşturabilir ve kullanıcıya akıcı bir deneyim sunabilir.
Flutter Hero Animation Kullanımı
Anasayfada giriş ekranı ve kayıt olma ekranına giden butonlar var ve üzerlerinde bir logo var. Bu logo , diğer ekranlara geçerken büyüyor. Şu şekilde ;
Flutter ile bunu yapmak çok basit. Logomuz ilk başta container’ın içindeydi.
Container( child: Image.asset('images/logo.png'), height: 60.0, ),
Bu containerı Hero widgetiyle sarıyoruz.
Hero( tag: 'logo', child: Container( child: Image.asset('images/logo.png'), height: 60.0, ), ),
Hero widgetımızın içinde bir adet özellik bulunmakta. “tag” , buna bir isim verdim , ‘logo’ diye. Daha sonra Login page’de Logomuzu Hero widgetıyla sarıp aynı tagi orayada koyuyoruz.
Hero( tag: 'logo', child: Container( height: 200.0, child: Image.asset('images/logo.png'), ), ),
İşte bu kadar basit. 🙂