Flutter Hero Widget -1(Temel Kullanım)

Selam Millet !

Etkileyici tasarım hazırlamak için Flutter’da kullanımımıza sunulmuş onlarca Widget mevcut. Bize kalan sadece bu widgetlarla oynayıp basit bir şekilde kullanmak !

Bu yazımda sizlere Hero widget ın kullanımından bahsedeceğim. Yazımı kısa tutup Hero Widget ı basit bir şekilde nasıl kullanırız konusuna değineceğim. Bir sonraki yazımda ise daha detaylı ve gerçek dünyada nasıl kullanıldığıyla alakalı güzel bir örnek yapacağım

Gerçekten de hoş görünüyor :) Bu widget olmadan da listeleriniz veya sayfalarınız olur fakat Hero ile daha “tatlı” bir görünüm elde edersiniz.

Başlayalım..

Hero Widget olmadan sayfa geçişiniz görseldeki gibi sade ve sıradan olur.

Hero Widget ekleyince nasıl olacak şimdi bunu kodlayalım. Öncelikle görseldeki gibi sıradan geçişi yapıp daha sonrasında Hero ile sarmalayacağız. Şimdi yeşil iconun olduğu home_page ve kırmızı iconun olduğu detail_page isimli classlarımızı oluşturalım.

main.dart

İlk açılacak sayfayı (MyHomePage) set ediyorum.

home_page.dart

detail_page.dart

home_page ve detail_page ‘de basit olarak ekranlara icon koydum ve iconlara tıklayınca ileri geri yapıyor. Gif’teki gibi ekranları yapmış olduk.

Şimdi asıl mevzumuza geliyoruz.

Amacımız: HomePage’de bulunan icon uçarak DetailPage’e gidecek. (O icon buraya gelecek!) Sonrasında sayfa kapandığında DetailPage’deki icon HomePage’e uçarak geçecek.

Özetle aşağıdaki gibi bir animasyon olacak.

Hero widgetın yapısı:

Hero(
  tag: "hero-example",
  child: Icon(
    Icons.thumb_up,
    size: 64,
    color: Colors.green,
  )
)

bu örnekte basit olarak iki özelliğini kullandım.

tag: Hero uçacağı widgetı tag inden tanır yani nereye uçması gerektiğini taglerden anlar.

child: Uçmasını istediğimiz widgetı child olarak veririz.

home_page.dart

Iconu Hero ile sarmalıyoruz;

child: Hero(
  tag: "hero-example",
  child: Icon(
    Icons.thumb_up,
    size: 64,
    color: Colors.green,
  )
),

detail_page.dart

Aynı işlemi burada da yapıyoruz.

child: Hero(
    tag: "hero-example",
    child: Icon(
      Icons.thumb_down,
      size: 64,
      color: Colors.red,
    )
),

İki sayfadaki bu tanımlamalarla Hero lar tagleri sayesinde nereye uçacaklarını öğrenmiş oldular.

Basit şekilde hero widgetı nasıl kullanabileceğimizi ve ne işer yaradığını anlatmaya çalıştım, bir sonraki yazımda listeli cardlı cafcaflı bir Hero widget örneği yapacağım, görüşmek üzere :)

Sevgiyle kalın.