Flutter Hero Animation Kullanımı

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?

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 ;

Fluuter Hero Animation

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. 🙂

Emre

More Reading

Post navigation