Flutter Animasyonlar ve Gelişmiş Arayüz Özellikleri PDF

13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite 8. Animasyonlar ve Gelişmiş Arayüz Özellikleri Özlü Söz Animasyon bir tekniktir, tür değil. Gore Verbinski Kazanımlar 1. Flutter’da animasyon türleri hakkında bilgi verebilir. 2. Stan...

13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite 8. Animasyonlar ve Gelişmiş Arayüz Özellikleri Özlü Söz Animasyon bir tekniktir, tür değil. Gore Verbinski Kazanımlar 1. Flutter’da animasyon türleri hakkında bilgi verebilir. 2. Standart arayüz bileşenlerini animasyonlu halleri ile değiştirebilir. 3. Karmaşık animasyonların nasıl hazırlanacağını gösterebilir. 4. Animasyon ile performans ilişkisi hakkında bilgi verebilir. 8.1. Flutter’da Animasyonlara Giriş Animasyonlar uygulamaların daha kullanıcı dostu ve ilgi çekici olmasını sağlarlar. Flutter çatısı altında animasyon özelliği bulunan bileşenler bulunmakta ve animasyon hazırlamak için gelişmiş seçenekler yer almaktadır. Flutter’ın sunduğu birçok hazır bileşen (özellikle Material bileşenleri) kendiliğinden hareket (motion) efektlerine sahiptir ama bunları da değiştirme şansımız bulunmaktadır. Flutter’ın animasyonlarla ilgili dokümantasyonuna https://flutter.dev/docs/development/ui/animations İnternet adresinden erişilebilirsiniz. Burada Flutter’da animasyon oluşturma çeşitleri dört başlık altında incelenmiştir. about:blank 1/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite Şekil 16. Flutter’da animasyon oluşturma çeşitleri Biz bu yaklaşımları zorluk seviyelerine göre üç başlık altında inceleyelim: 8.2. Implicit Animations Flutter çerçevesi içerisinde temel animasyon efektlerini yerine getirecek bir takım pre-build (hazır) animasyonlu görsel bileşen (animated-widget) ile gelmektedir. Bu sayede çoğu zaman ek bir efor sarf etmeden arayüze animasyon eklememiz mümkün olacaktır. Flutter’daki pek çok temel Widget için animasyonlu bir sürümü de mevcuttur. Eğer widget’ın adı “Foo” ise animasyonlu sürümünün adı “AnimatedFoo” olarak kullanılmaktadır. Örneğin Container widgetı için bir örnek üzerinden farklılığı inceleyelim: about:blank 2/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite Yukarıdaki kod bloğunda temel Container bileşeni kullanılmıştır. Animasyon efekti olmaksızın bu kod counter değeri her değiştiğinde bir sonraki ünitede işlenecek Consumer bileşeni aracılığı ile arayüzü yenilemektedir. Aynı kodu Container bileşeni yerine AnimatedContainer kullanarak aşağıdaki gibi yazmamız durumunda counter değerlerinin her değişiminde iki değer arasındaki geçiş görsel bir animasyona dönecektir: AnimatedContainer widgetın yapıcı fonksiyonu, Container widgetının yapıcı fonksiyonu ile neredeyse aynıdır. Sadece animasyonun ne kadar süreceği ile ilgili olarak ek “duration:” parametresi almaktadır. Burada verilen 2 saniye değeri counter değerleri arasındaki geçiş süresinin 2 saniyede gerçekleşeceğini ifade etmektedir. Container’ın animasyonlu hali ile Container ile verdiğimiz temel özelliklerin hepsinde animasyon uygulayabilmekteyiz. Yukarıdaki örneğimizde color ve alignment özellikleri sabit tutulmuş bu nedenle bu özellikler üzerinden bir animasyon olmamıştır. Sadece height ve width değerleri counter değişkenine göre bir durum değişimi yaşamış ve bunun üzerinden animasyon uygulanmıştır. color ve alignment değerleri için aşağıdaki gibi tanımlama eklense bunların da animasyona kavuştuğunu göreceksiniz. about:blank 3/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite Burada animasyonların nasıl icra edileceği ile alakalı bir özellik (curve) daha tanımlanmıştır. “curve parametresi animasyondaki geçişin nasıl olacağını ifade etmektedir. Örneğimizin ilk halinde “curve” parametresi verilmediğinde varsayılan olarak Curves.linear değerini almaktadır. Yani animasyondaki geçiş lineer bir şekilde olacaktır. Curves sınıfı bu şekilde animasyon geçişleri için oluşturulmuş şablonları sunmaktadır. Farklı animasyon geçiş modelleri için Flutter API dokümantasyonundaki Curves sınıfının sayfası incelenebilir. https://api.flutter.dev/flutter/animation/Curves-class.html Curves.Linear ve Curves.easeInOut animasyon geçişlerinin değişim grafiği aşağıda verilmektedir. Her bir animasyon geçişinin API dökümanında geçiş grafiğini ve örnek uygulamasını inceleyebilirsiniz. Çizim 5. Curves.Linear ve Curves.easeInOut animasyon geçişlerinin değişim grafiği İlk kendi AnimatedContainer widget örneğinizi kodlamak için aşağıdaki Flutter Cookbook sayfasındaki yönergeleri takip edebilirsiniz. https://flutter.dev/docs/cookbook/animation/animated-container about:blank 4/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite Az önce ilk implicit animation yaklaşımımız olan AnimatedContainer’ı incelemiş olduk. Şimdi sırasıyla kullanabileceğimiz Implicit Animation yaklaşımlarını yani hazır animasyonlu bileşenleri inceleyelim. Tüm Implicit animation bileşeninde duration ve curve parametreleri ile animasyon süresini ve geçiş şeklini belirleyebilirsiniz. AnimatedAlign: Align widgetının animasyonlu halidir. Align bileşeni altındaki widgetların ekrandaki yerleşimlerini düzenlemektedir. Altındaki bileşenlerin ekran üzerindeki konumlanma şeklini animasyonlu bir geçiş ile değiştirecektir. AnimatedDefaultTextStyle: DefaultTextStyle widgetının animasyonlu halidir. İçerisindeki metinlere uygulanacak sitildeki değişimi animasyonlu bir hale getirir. about:blank 5/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite Şekil 17. Animasyon Sınıfları about:blank 6/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite Örnek olarak verdiğimiz “Implicit Animation” grubunun hepsi ImplicitAnimatedWidget sınıfından miras alınarak oluşturulmuştur. Tüm güncel listeye ve her biri için örnek uygulamalara aşağıdaki bağlantıdan erişebilirsiniz: https://api.flutter.dev/flutter/widgets/ImplicitlyAnimatedWidget-class.html Flutter dokümantasyonunda Implicit widget oluşturma ve kullanımla alakalı video serisi ve diğer makaleler de aşağıda sıralanmaktadır: https://flutter.dev/docs/development/ui/animations/implicit-animations https://medium.com/flutter/flutter-animation-basics-with-implicit-animations-95db481c5916 Aşağıdaki bağlantıda kendi kendinize bir Implicit Animation örneği gerçekleştireceğiniz laboratuvar çalışması bulunmaktadır.: https://flutter.dev/docs/codelabs/implicit-animations 8.3. Tween Animation Flutter “Implicit Animation” kategorisinde sunduğu hazır (pre-build) animasyon modelleri ile temel animasyon işlevselliğini çok kolay uygulamamıza yansıtmamızı sağlamaktadır. Peki, istediğimiz arayüz bileşeni için bir “Implicit Animation” varyantı bulamazsak ne yapmalıyız? Daha sonra ele alacağımız daha karmaşık ve daha derinlemesine kodlama gerektiren yöntemlerden önce yönelmemiz gereken ilk çözüm TweenAnimationBuilder kullanımıdır. Bu sınıf da ImplicitAnimatedWidget sınıfından miras alınarak oluşturulmuş bir Implicit Animation yöntemidir. Diğer Implicit yöntemlerinden farklı olarak TweenAnimationBuilder’da animasyonun gerçekleşeceği değer aralıkları Tween sınıfı aracılığı ile tanımlanabilmektedir. Tween sınıfı farklı veri türleri ile çalışabilmektedir. Bunları ColorTween, RectTween, Tween gibi örneklememiz mümkündür. Aşağıda TweenAnimationBuilder’ın bizim oluşturacağımız bir widgetın build metodu içerisinde kullanımına örnek verilmektedir: about:blank 7/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite Örneğimizde TweenAnimationBuilder , double veri tipi üzerinden bir animasyon geçişi yapılacağını belirtilerek çağrılmıştır. Bu çağrıya karşılık olarak yapıcı fonksiyonun aldığı tween parametresi Tween türünde bir sınıf almaktadır. Yukarıdaki satır ile 0 ile targetValue arasında değişecek bir değerin animasyon için kullanımı sağlanmaktadır. tween parametresi animasyon süresi boyunca bu aralıkta animasyonun çizim yöntemine göre değerleri animasyona besleyecektir. TweenAnimationBuilder widgetı tween parametresinin yanında duration ve builder adında parametreler de almaktadır. duration parametresi diğer Implicit animasyonlarda olduğu gibi animasyonun süresini belirtecektir. builder parametresi ise animasyonun çiziminde tetiklenecek kısmı almaktadır. (Bu parametre kullanımı ve çağrılan fonksiyon yapısını daha önce görmüştük.) ImplicitAnimatedWidget’tan miras alarak oluşturulan tüm animasyon özelliği gösteren bileşenleri aslında gizliden kullandığı bir AnimationController sınıfı bulunmaktadır. Bir sonraki başlıkta bu sınıf ve animasyon kütüphanesinin diğer özelliklerinin kullanımı ele alınacaktır. TweenAnimationBuilder’ın Flutter API dokümantasyonuna aşağıdaki bağlantıdan erişebilirsiniz: https://api.flutter.dev/flutter/widgets/TweenAnimationBuilder-class.html Aşağıdaki bağlantıda TweenAnimationBuilder’ın kullanımı ile ilgili Flutter ekibinin hazırlamış olduğu anlatım ve videoyu inceleyebilirsiniz: https://medium.com/flutter/custom-implicit-animations-in-flutter-with-tweenanimationbuilder-c76540b47185 about:blank 8/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite https://youtu.be/6KiPEqzJIKQ 8.4. Animasyon Kütüphanesi Flutter’ın hazır olarak sunduğu animasyonlu arayüz bileşenleri ihtiyacınızı görecek animasyon geçişleri üretemiyorsa bu durumda animasyon kütüphanesindeki özel tanımlamaları kullanarak kendi animasyonunuzu tasarlamanız (Explicit Animation) gerekmektedir. Bu noktada temel bazı trigonometri ifadelerine hâkim olmanız gerekmektedir. Animasyonların oluşması için kullanılan yapı aşağıdaki bloklardan oluşmaktadır: Şekil 18. Bloklar Bir animasyonun oynatılması için bu yapı bloklarından bazıları aşağıda incelenecektir. Animasyonun durumu hakkında Animasyon sınıfı içerisinde bilgi sahibi olabilmemiz için AnimationStatus enum değeri kullanılır. Bu enum tanımlamasındaki değerler: Şekil 19. Bu enum tanımlamasındaki değerler about:blank 9/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite 8.4.1. AnimatedWidget Bir animasyonun üretim süreci genel olarak iki adımdan oluşmaktadır. Bu adımları bir Flutter logosunun ekranın ortasında çevrildiği bir örnek üzerinden anlatacağız. Örnek uygulamanın farklı zaman aralıklarında yakalanana ekran görüntüleri aşağıdakine benzemektedir: Bu örnekte FlutterLogo adında bir widget Flutter logosunu göstermek için kullanılacaktır. Bu logo vektörel bir imaj kullandığında farklı ekran boyutlarında aynı kalitede görüntülenecektir. Logonun döndürülmesi için gerekli animasyon kodlaması aşağıdaki gibi yapılacaktır: 1. Amacımız FlutterLogo adında bir sınıfı sonsuz bir döngüde(loop) döndürme(rotation) işlemine tabi tutmaktır. AnimatedWidget bu amaç için ilgili arayüz bileşenini alarak üzerinde istenilen animasyon efektlerinin gerçekleştirilmesi için kullanılır. Burada RotatingLogo adında oluşturduğumuz sınıf AnimatedWidget sınıfından miras almaktadır. about:blank 10/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite Örneğimizi incelemeye başlamadan önce özellikle animasyonlar konusunda daha önem arz ettiği için şu noktanın altını çizelim. Flutter’da arayüz bileşenlerinin çiziminde pek çok yerde yapıcı fonksiyonların çağrımında const anahtar kelimesinin geçtiğini görmüşünüzdür. const yapılandırıcı çağrısı Flutter çerçevesine bu widget için her seferinde baştan çizim yapmamasını söylemektedir. Animasyonlarda her sahnede çizimin tekrarlanacağını düşünürseniz performans açısından const kullanımı önemlidir. Flutter çerçevesi 120fps’ye kadar yüksek bir yenileme hızı sunabilmektedir. Fakat arayüzdeki gereksiz tazeleme talepleri bu oranı azaltabilir. Eğer animasyonumuz kendi ekseni etrafında tam bir dönme yapacaksa angle parametresinin 0 ile 30 derece arasında değerler alması gerekir. Flutter açı değerlerini radyan cinsinden almaktadır. yapılandırıcısı bize döndürme işlemi uygulanmış bir FlutterLogo verecektir. Son olarak dikkat çekeceğimiz nokta bir AnimationController nesnesinin kullanımı ve bunun dependency injection yöntemine uygun olarak listenable: parametresine besleniyor olmasıdır. Bu sayede _controller.value’daki değişimler doğrudan animasyona yansıyacaktır. 2. Şimdi yapmamız gereken animasyonu gerçekleyecek olan kısmın hazırlanması ve widget ağacımızın içerisine yerleştirilmesidir. Bu amaçla AnimationController sınıfı bize belli bir frekans ve süreye göre çalışacak bir veri üretmektedir. Örneğin AnimatedController’da 0-1 arası değer ürtilmesini istersek AnimationController ilgili AnimatedWidget’a 0 ,... , 0.1 ,... , 0.6 , 0.9 ,... 1 aralıklarında değişen bir değer üretecektir. Örneğimizde _controller değişkeni bir AnimationController objesini referans almakta ve _controller.value ile bu değişim gösteren değere erişilmektedir. about:blank 11/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite Burada AnimationController’dan gelen değer _fullRotation ile (360 derecenin radyan karşılığı) ile çarpılarak yapılacak döndürme işleminin açısı belirlenmektedir. Şimdi ilgili AnimationController’ın oluşturulması ve bağlanması kodunu ele alalım: Bu aşamada Animasyon ekrandan çıktığı zaman sistem kaynaklarını geri vermek adına dispose metodunu çağırabilmek için StatefulWidget kullanılması gerekmektedir. Aksi halde sistem kaynakları boşa tüketilmiş olacaktır. Animasyon için hazırlık ve temizleme aşamalarının initState ve dispose metotlarında yazımının unutulmaması gerekmektedir. about:blank 12/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite Cihaz hazır olduğunda sürekli değer üretimi için AnimationController kullanılacaktır. Aksi belirtilmediği sürece AnimationController 0 ila 1 arasında değerler üretmektedir. Normalde AnimationController bir saniyede 60 yeni değer üretmektedir. Eğer yoğun bir animasyon veya telefonun yoğun kullanımı söz konusu ise bu değer düşebilir. Görünmüyor olsa da birden fazla animasyonun eş zamanlı olarak koşturulması bir performans düşüklüğüne sebep olabilir. repeat() metodunun kullanımı ilgili animasyonun sonsuza dek oynatılmasını talep etmektedir. Bu örneğimizde her bir animasyon döngüsü 3 sn. sürecek ve sonsuza dek tekrar edecektir. AnimationController animasyonun yönü için bize 3 farklı seçenek sunmaktadır; forward: (0 > 1) animasyondaki değişen değer 0’dan 1’e doğru verilecektir. reverse: (1 > 0) animasyondaki değişen değer 1’den 0’a doğru verilecektir. repeat: (0 > 1, 0 > 1, 0 > 1 ,...) animasyondaki değişen değer 0’dan 1’e döngüsel olarak sürekli verilecektir. vsync parametresi animasyonun ekrandan çıktıktan sonra çalışmasını engellemektedir. Böylece gereksiz sistem kaynağı tüketilmez. Burada this değerinin verilmesi animasyonu gerçekleştiren StatefulWidget üzerinden bu işlemin yürütülmesini sağlayacaktır. StatefulWidget oluşturulurken vsync özelliğinin kullanılabilmesi için miras alma sürecine animasyonlar tarafında kullanılan TickerProvider sınıfının bir örneği olan TickerProviderStateMixin mixin’in eklenmesi gerekmektedir. Yukarıdaki kod içerisinde oluşturduğumuz FLSpinner yapıcı fonksiyonu çağrılarak animasyonumuzu bir uygulama içerisinde kullanmış olduk. AnimatedWidget ve AnimationController kullanımı ile iki aşamalı olarak kendi özel animasyonumuzu nasıl yapabileceğimizi deneyimledik. Burada farklı transformasyon yöntemleri kullanarak değişik geçişli animasyonlar yapmak mümkündür. Flutter ekibinin bu konuda hazırlamış olduğu makale ve videoyu aşağıdaki bağlantılardan inceleyebilirsiniz: https://medium.com/flutter/directional-animations-with-built-in-explicit-animations-3e7c5e6fbbd7 about:blank 13/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite https://youtu.be/CunyH6unILQ 8.4.2. AnimatedBuilder AnimatedBuilder aslında AnimatedWidget sınıfının optimize edilmiş ve gereksiz yeniden inşaları engelleyen basitleştirilmiş formudur. Animasyonları kullanırken nasıl çalıştıklarını anlamak uygulamanızın performansını düşürmemek adına önemli bir noktadır. Bir önceki başlıkta Flutter’ın her animasyon karesinde alt elemanları baştan çizmemesi için const yapılandırıcı fonksiyonları çağırmamız gerektiğini söylemiştik. Ama her Flutter widget’ı için const bir yapılandırıcı çağrısı bulunmayabilir. Daha da kötüsü bu bileşenlerin iç içe geçmiş bir kümesi animasyona konu olabilir. Bu durumda tüm widget ağacının her animasyon karesinde yeniden çizimi gerekeceği için uygulama performansı ciddi manada kötü etkilenecektir. Bu gibi durumlarda sergilenebilecek iki yaklaşım söz konusudur. İlki animasyonda oynatılacak widget ağacının manuel olarak tamponlanması ve bunun animasyon çiziminde kullanımını sağlayacak kodlamanın yapılması ikincisi ise AnimatedBuilder kullanımıdır. AnimatedBuilder bu aşamada elle yapılması gereken birçok işlemi (tamponlama gibi) bizim yerimize halledeceği için uygun yaklaşım olacaktır. Burada child parametresi widget ağacında animasyonun içerisinde kalacak ve tamponlanacak kısmı tutacaktır. Yani child parametresi içerisinde verilen widget ağacı sadece bir defaya mahsus oluşturulacaktır. Flutter ekibinin AnimatedBuilder ve AnimatedWidget kullanımı ile ilgili makalesine ve videosuna aşağıdaki bağlantılardan erişebilirsiniz: https://medium.com/flutter/when-should-i-useanimatedbuilder-or-animatedwidget-57ecae0959e8 https://youtu.be/fneC7t4R_B0 8.4.3. Curves Her animasyon standart olarak lineer bir zaman döngüsüne sahiptir. Yani üretilen değerler belirtilen aralık içerisinde eş zaman aralıklarında değişirler. Animasyonlar konusunun başında bahsedildiği üzere Curves sınıfındaki tanımlı geçiş efektleri kullanılarak değer değişim zaman çizelgesi lineerden farklı yaklaşımlara da ayarlanabilir. Misal alınan değerlerin zıplama efekti ile değişmesi daha ilgi çekici bir animasyon oluşturacaktır. about:blank 14/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite CurvedAnimations kullanarak Curves sınıfında tanımlı farklı geçiş efektlerini kullanabiliriz. 8.4.4. Tweens AnimatonController’ın varsayılan olarak 0-1 aralığında double değerler ürettiğini söylemiştik. Bu aralığın farklı bir skalada veya farklı bir veri türü üzerinden yapılması için Tween sınıfı kullanılır. about:blank 15/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite Buradaki tween objesi AnimationController’ın 0-1 aralığında değer üretmek yerine 0-6.2831 aralığında değer üretmesini sağlayacaktır. Farklı veri türleri için kullanılabilecek özel Tween varyantları mevcuttur. Bunlardan bazıları; BorderRadiusTween IntTween DecorationTween ShapeBorderTween SizeTween şeklinde sıralanabilir. Tam bir liste için API dokümantasyonuna bakınız. https://api.flutter.dev/flutter/animation/Tween-class.html Eğer bir animasyonda birden fazla geçiş olan bir yaklaşım kullanmak istiyorsanız bunun için TweenSequence sınıfını kullanabilirsiniz. TweenSequence sınıfı her bir geçiş aralığını TweenSequenceItem olarak tanımlayacağınız bir liste ile bu geçişleri yürütecektir. Aşağıda bununla ilgili Flutter API’sinde verilen örnek sunulmaktadır: Daha fazla ayrıntı için Flutter API dokümantasyonundaki TweenSequence sınıfının sayfası incelenebilir. https://api.flutter.dev/flutter/animation/TweenSequence-class.html 8.5. Özel Animasyonlar about:blank 16/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite Flutter’da istenilen her tür animasyon efektini yapmak mümkündür. Bu aşamaya kadar animasyon için gerekli temel bileşenlerden bahsettik. Bunların dışında 3D dönüşümlerin uygulanması için farklı animasyon efektleri de kullanabiliriz. Bu efektlerin kullanımı için matrisler ve trigonometri kurallarına hâkim olmak gerekebilir. Bu tarz özel bir animasyon hazırlamak diğer bir bakış açısıyla aşağıdaki üç sınıfın işleyişine hâkim olma ile de gerçekleştirilebilir. Şekil 20. Özel animasyon hazırlamak için hâkim olunması gereken sınıflar Yukarıdaki resimdeki gibi farklı zaman dilimlerinde döndürülme efekti uygulanan bir Container için aşağıdakine benzer bir kod yazılabilir. Burada Transform sınıfı Container üzerinde uygulanacak dönüşüm işlemlerini yapmaktadır. about:blank 17/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite Transform işlemleri karmaşık matematiksel hesaplamalar içereceği için burada daha fazla detaya inilmeyecektir. Tüm dönüşüm işlemleri ile ilgili detay API dokümanlarından incelenebilir. https://api.flutter.dev/flutter/widgets/Transform-class.html Flutter animasyonlarının nasıl çalıştığı ile ilgili olarak Flutter ekibinin hazırlamış olduğu makale ve videoya aşağıdaki bağlantılardan ulaşabilirsiniz: https://medium.com/flutter/animation-deep-dive-39d3ffea111f https://youtu.be/PbcILiN8rbo Bir diğer animasyon üretme şekli olarak animasyon efektlerinin üst üste bindirilmesi ile kademeli bir animasyon elde edilebilir. Bununla ilgili örnek Flutter dokümantasyonunda aşağıdaki bağlantıda anlatılmıştır. https://flutter.dev/docs/development/ui/animations/staggered-animations 8.6. Hero Animasyonlar Flutter’ın sunduğu diğer bir animasyon modeli de master-detail şeklinde hazırlanmış iki sayfa arası geçişlerde kullanılan Hero Animasyonlarıdır. Bir alışveriş sitesindeki ürün kataloğunda seçilen bir ürünün detay sayfasının açılmasında ürün resminin genişleyerek ekrana gelmesi gibi efektlerin verilmesinde kullanılır. Sayfalar arası navigasyon konusu ile iç içe olan bir başlık olduğu için Flutter dokümantasyonunda sayfalar arası gezinme konu başlığında ele alınmaktadır. Aşağıdaki bağlantıdan iki sayfa arası geçişinde bir Hero Animation hazırlanmasında gereken adımlar verilmektedir. https://flutter.dev/docs/cookbook/navigation/hero-animations about:blank 18/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite about:blank 19/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite about:blank 20/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite Master-detay sayfaları arasındaki geçişler Navigator.push ve Navigator.pop metotları aracılığıyla yapılmaktadır. MainScreen ve DetailScreen sınıfları içerisinde Hero widgetının kullanımına dikkat ederseniz, her iki tanımda da tag parametresinin aynı olduğunu göreceksiniz. Bu parametre farklı iki Hero objesi arasında geçiş animasyonu olacağını bildirecektir ve bu nedenle aynı değer olmalıdır. child parametresi Hero animasyonu içerisinde kalacak (değişecek ) alanın ifade edildiği parametredir. Bu örnekte ana ve detay görünümde aynı resim kullanılmıştır. Flutter dokümantasyonunda Hero Animasyonlarının nasıl hazırlanacağıyla ilgili iki farklı örnek verilmektedir. Bu örneklere ve Hero animasyon ile ilgili dokümantasyona aşağıdaki linkten erişebilirsiniz. https://flutter.dev/docs/development/ui/animations/hero-animations 8.7. Gelişmiş Arayüz Özellikleri Flutter çerçevesi mobil platformlardaki arayüzlerin oluşturulması için klasik form bileşenlerinin dışında gelişmiş özel bileşenler de içermektedir. Ayrıca masaüstü ve web desteği için klavye kısayolları gibi özellikler de çerçeveye dâhil edilmektedir. Bu başlıkta bu konular için referanslar verilecektir. Flutter’a yeni eklenen Actions, Shortcuts, Keyboard Focus konuları ders materyaline eklenmemiştir. Bu konular ile ilgili Flutter dokümanlarına aşağıdaki bağlantılardan erişebilirsiniz: https://flutter.dev/docs/development/ui/advanced/actions_and_shortcuts https://flutter.dev/docs/development/ui/advanced/focus 8.7.1. Gestures about:blank 21/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite Kullanıcı etkileşimleri Flutter’da tıklama, sürükle bırak ve dokunmatik ve donanımsal klavye üzerinden olabilmektedir. Dokunmatik ekrandan yapılan girişleri Flutter çerçevesi Gesture denilen bir sistem ile işlemektedir. Gesture sistemi iki kademeli bir yapıda kullanıcı etkileşimlerini işlemektedir. Bu yapının ilk kademesi hareketleri ve konumları salt işaretçiler olarak tanımlayan Pointer katmanı ikincisi ise bir veya birden fazla işaretçi hareketini anlamlandıran gestures katmanıdır. Flutter’da tanımlı olan gesture olayları aşağıda sıralanmıştır: about:blank 22/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite Şekil 21. Gesture olayları Ekrandan gestureların yakalanması için Flutter, GestureDetector adlı widgetı kullanmaktadır. about:blank 23/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite 8.7.2. Silvers Silver bileşenleri arayüzde sürüklenebilir bileşenlerin daha efektif olmalarını sağlamaktadır. Silver bileşenler Material tasarımda uygulanmaktadır. Bir sayfa içerisinde SilverAppBar, SilverList ve SilverGrid bir arada kullanılarak ardışık olarak sürüklenebilen bir sayfa tasarımı oluşturulur. Silver kullanımının avantajı ekranı kaydırdığınızda AppBar kısmının daralması ve gizlenmesi sürecini otomatik yapmasıdır. Aşağıda bu bileşenlerin tanıtımı yapılan videolar için linkler bulunmaktadır: SilverAppBar: https://youtu.be/R9C5KMJKluE SiverList ve SilverGrid: https://youtu.be/ORiTTaVY6mM Kullanım örnekleri için ayrıca Flutter API dokümanlarına bakınız. SliverAppBar: https://api.flutter.dev/flutter/material/SliverAppBar-class.html SliverGrid: https://api.flutter.dev/flutter/widgets/SliverGrid-class.html SliverList: https://api.flutter.dev/flutter/widgets/SliverList-class.html Bölüm Özeti Bu bölümde Flutter'da animasyon hazırlama ve diğer bazı arayüz özelliklerine değinilmiştir. Bir uygulamanın kullanıcıyı kendine çekmesi için canlı bir arayüze sahip olması gerekir. Bunun için animasyonlar hem görsel etkiyi arttırır hem de ilgiyi çekerler. Mobil platformlarda animasyon yapmak batarya ömrü ve uygulamanın çalışma performansını azaltan uygulamalardır. Flutter’da animasyon oluşturma çeşitleri dört başlık altında sıralanabilir. Bunlar Implicit Animations, Explicit Animations, Low Level Animations ve Third-Party Animation Framework şeklindedir. Flutter basit animasyon hazırlama (Implicit Animations) ve daha detaylı animasyon hazırlama (Explicit Animations) yöntemlerini sunmaktadır. Ayrıca istenildiği takdirde harici animasyon paketleri de kullanılabilir. Animasyonların oluşması için kullanılan yapı aşağıdaki blokları şunlardır: Scheduler, Tickers, Simulations, Animatables, Tweens, Curves ve Animations. Flutter’da 3D dönüşümlerin uygulanması için farklı animasyon efektleri de kullanabilmektedir. Bu efektlerin kullanımı için matrisler ve trigonometri kurallarına hâkim olmak gerekebilmektdir. Bu tarz özel bir animasyon hazırlamak diğer bir bakış açısıyla AnimationController, Transform ve Stack şeklindeki üç sınıfın işleyişine hâkim olmakla da gerçekleştirilebilmektedir. Master-detail şeklinde hazırlanmış iki sayfa arası geçişlerde kullanılan Hero Animasyonları ise Flutter’ın sunduğu diğer bir animasyon modelidir. Klavye ve Dokunmatik ekrandan kullanıcı girişleri için Flutter'ın desteği bulunmaktadır. Dokunmatik ekrandan girişler için Gestures en yaygın kullandığımız Flutter bileşenidir. Silverlar ile liste ve ızgara görünümleri için kolay kaydırma ve ekranı efektif kullanma süreçlerini zahmetsizce yapabiliriz. about:blank 24/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite Kaynakça https://flutter.dev/docs/development/ui/animations https://api.flutter.dev/flutter/animation/Curves-class.html https://flutter.dev/docs/cookbook/animation/animated-container https://api.flutter.dev/flutter/widgets/ImplicitlyAnimatedWidget-class.html https://flutter.dev/docs/development/ui/animations/implicit-animations https://medium.com/flutter/flutter-animation-basics-with-implicit-animations-95db481c5916 https://flutter.dev/docs/codelabs/implicit-animations https://api.flutter.dev/flutter/widgets/TweenAnimationBuilder-class.html https://medium.com/flutter/custom-implicit-animations-in-flutter-with-tweenanimationbuilder-c76540b47185 https://youtu.be/6KiPEqzJIKQ https://medium.com/flutter/directional-animations-with-built-in-explicit-animations-3e7c5e6fbbd7 https://youtu.be/CunyH6unILQ https://medium.com/flutter/when-should-i-useanimatedbuilder-or-animatedwidget-57ecae0959e8 https://youtu.be/fneC7t4R_B0 https://api.flutter.dev/flutter/animation/Tween-class.html https://api.flutter.dev/flutter/animation/TweenSequence-class.html https://api.flutter.dev/flutter/widgets/Transform-class.html https://medium.com/flutter/animation-deep-dive-39d3ffea111f https://youtu.be/PbcILiN8rbo https://flutter.dev/docs/development/ui/animations/staggered-animations https://flutter.dev/docs/cookbook/navigation/hero-animations https://flutter.dev/docs/development/ui/animations/hero-animations https://flutter.dev/docs/development/ui/advanced/actions_and_shortcuts https://flutter.dev/docs/development/ui/advanced/focus https://youtu.be/R9C5KMJKluE https://youtu.be/ORiTTaVY6mM https://api.flutter.dev/flutter/material/SliverAppBar-class.html https://api.flutter.dev/flutter/widgets/SliverGrid-class.html about:blank 25/26 13.11.2024 16:10 Ders : undefined | Ünite : undefined - Ünite https://api.flutter.dev/flutter/widgets/SliverList-class.html about:blank 26/26