Flutter ekibi, geçtiğimiz aylarda ilgi çekici yeni bir animasyon paketini duyurdu. Bu paket, kullanıcıların uygulamanızı daha iyi anlamasına ve uygulama içerisinde daha iyi gezinmesine yardımcı olabilecek birkaç geçiş desenini barındıran Material Motion Spesifikasyonları kullanılarak oluşturulmuş animasyonları içeriyor.
Bu yazımda sizlere bu animasyonlardan kısaca bahsederek, bunları Flutter uygulamanızda nasıl kullanabileceğinize dair örnekler göstereceğim.
Motion System
Öncelikle Motion System’in ne olduğunu anlamakta fayda var. Motion System, kullanıcı deneyimini iyileştirmenize imkân sağlayan, kullanıcılarınızın uygulamanız içerisinde gezinmesini kolaylaştıracak bir dizi geçiş deseninden oluşuyor. Bu sayede hem kullanıcı deneyiminizi iyileştirebilir, hem de güzel bir görünüm elde edebilirsiniz.
Bu geçiş desenlerini Flutter uygulamanızda kullanmak için animations paketinden bahsetmiştik. Bu paket şimdilik 4 adet geçiş deseni barındırıyor. Gelin sırasıyla bunları inceleyelim.
1. Container Transform
Adından da anlaşılacağı üzere Container Transform geçiş desenini, Container içeren widget’lara uygulayabiliyoruz. Bu desen iki ekran arasında görünür bir bağ oluşturarak köprü görevi görecektir.
Şekilde de görüldüğü üzere bu deseni 4 farklı şekilde kullanabiliriz:
- Card Widget’tan detay sayfasına geçiş
- List Item’ dan detay sayfasına geçiş
- Floating Action Button üzerinden detay sayfasına geçiş
- Genişletilebilir Arama Çubuğu olarak
Açıkçası en sevdiğim desen Container Transform. Gerek uygulama alanının geniş olması, gerek arada bir köprü kurarak ilişkileri güçlendirmesi uygulamanıza çok daha iyi bir görünüm katacaktır.
2. Shared Axis
Bu desen, aralarında gezinme ilişkisi olan arayüzler arasında kullanılır. Bu sayede elemanlar arasındaki ilişkiyi güçlendirebiliriz. Bu deseni X, Y ve Z eksenlerinde uygulayabiliyoruz.
Mesela;
— X ekseni üzerinde onboarding geçişleri
— Y ekseni üzerinde adım geçişleri
— Z ekseni üzerinde alt-üst widget geçişleri
olarak uygulayabiliriz.
GIF’te de göreceğiniz üzere, bu deseni uygulamanızın onboarding ekranında X ekseni boyunca kullanıp güzel bir başlangıç sağlayabilirsiniz. Y ekseninde kullanım örneği verecek olursak, yemek tarifinin adımları güzel bir örnek olacaktır. Z ekseninde ise parent-child widget’ları arasında güzel bir animasyon yakalayabilirsiniz.
3. Fade Through
Fade Through, birbirleriyle güçlü ilişkisi olmayan UI’ler arasında kullanabileceğimiz bir geçiş deseni. Bu desen sayesinde anlamsız keskin geçişler yerine daha yumuşak geçişler elde edebilirsiniz.
Gördüğünüz üzere 3 şekilde kullanabiliriz:
- BottomNavigationBar üzerindeki hedefleriniz arasında güzel bir geçiş sağlayabilirsiniz.
- Sayfanızı yenileme sırasında güzel bir animasyonla süsleyebilirsiniz.
- Uygulamanızdaki hesaplar arası geçiş işlemi sırasında kullanarak bu deseni uygulayabilirsiniz.
Bu sayede güçlü ilişki gerektirmeyen ancak uygulandığı zaman daha anlamlı hale gelecek arayüzler elde edebiliriz.
Gelelim son desenimize.
4. Fade
Fade deseni ise, uygulamanızın ekran sınırları içerisinde diyalog tarzı widget’ları gösterip gizlemek için kullanılan bir desen. Bu desen sayesinde uygulama içi aksiyonlarınızı daha hoş bir hale getirebilirsiniz.
Bu desenimizin de 4 adet kullanım alanı var:
- Dialog
- Menu
- Snackbar
- Floating Action Button
Bu widget’ların gösterip gizlenmesi olaylarına uygulayarak güzel bir görünüm elde edebilirsiniz.
Desenlerimiz bu kadar; şimdi ise basit bir örnek üzerinde nasıl uygulayacağımıza bakalım.
Uygulama
Ben bu örnekte Container Transform geçişini Floating Action Button’ a uyguladım. Yukarıda bahsettiğim diğer widget’lara da uygulayabilirsiniz.
Öncelikle boş bir Flutter projesi oluşturup pubspec.yaml dosyamıza paketimizi ekliyoruz:
dependencies:
animations: ^1.1.2Ardından flutter pub get komutuyla paketimizi projemize dahil ediyoruz. Şimdi bu yazıyı yazdığım tarih itibari ile son sürüm olan 1.1.2 versiyonunu kurmuş olduk.
Kodu çok uzatmamak adına Flutter projesini oluşturduğunuzda gelen counter kodunu silip Scaffold’un body kısmına tek renk bir container ekledim. Siz burada kendi sayfanızı tasarlayabilirsiniz.
Floating Action Button’ı eklemeden önce 2. sayfamızı tasarlayalım. Ben yine kodu daha fazla uzatmamak adına bu sayfaya Kartaca logosu ekledim :)
Detay sayfasının kodlarını lib/details_page.dart dosyası içerisine ekliyoruz.
Detay sayfasına bir Scaffold ekleyip body özelliğinde bir Container widget içerisine logoyu yerleştirdim. Bu sayfadan geri dönmek içinse GestureDetector widget’i ile sarmalayıp, onTap özelliğine Navigator.pop(context) yazıyoruz.
Şimdi detay sayfamız hazır.
Son adım olarak ilk sayfamıza Container Transform geçişine sahip Floating Action Button eklememiz gerekiyor.
Container Transform geçişi için animations paketiyle gelen OpenContainer widget’ını kullanmamız gerekiyor. Bu widget’ın 2 gerekli özelliği var: openBuilder ve closedBuilder.
Adından da anlaşılacağı üzere, açılış ve kapanış için gerekli kodları bunların içerisine yazıyoruz. openBuilder’da yazdığımız detay sayfasını döndürüp, closedBuilder’da ise bir FAB tasarımı yapıyoruz.
Gelin kodlarını inceleyelim:
openBuilder özelliğinde ikinci sayfamız olan DetailsPage’i döndürdük. closedBuilder’da eklediğimiz Container’a shape vermek içinse closedShape özelliğini kullandık. Daha güzel gözükmesi için eklememiz gereken bir iki özellik daha var: closedColor, closedElevation ve transitionDuration.
closedColor özelliğine FAB’da verdiğimiz rengin aynısını veriyoruz. closedElevation ve transitionDuration özelliklerine istediğiniz değerleri verebilirsiniz. Animasyonunuz hızını değiştirmek için Duration ile oynayabilirsiniz.
Bu özellikleri de ekledikten sonra OpenContainer’ın son hali:
Bu kodumuzu ise Scaffold’un FloatingActionButton özelliğine veriyoruz. main.dart ve details_page.dart dosyalarının son halinin böyle olması gerekiyor:
Bu kodun çıktısını bu GIF üzerinde görebilirsiniz:
Yazının daha fazla uzamaması adına, diğer geçişlerin kodlarına bu yazıda değinmeyeceğim. Diğer geçişlerin kodlarını buradan inceleyebilirsiniz.
Sonuç olarak, animations paketi ile birlikte bu bu animasyonları rahatça uygulamanıza entegre edebilir, uygulamanızı daha efektif ve güzel bir hale getirebilirsiniz. Umarım faydalı bir yazı olmuştur.
Yazıdaki kod örneklerine buradan ulaşabilirsiniz.
Görüşmek üzere!
Yazan: Buğra Göksu
