Flutter Uygulamanıza Lottie Animasyonlarını Nasıl Eklersiniz?
Flutter’ın en güçlü taraflarından birisi de uygulamalarımıza hazır animasyonları hızlıca ekleyebilmemiz. Her ne kadar Flutter’ın sunmuş olduğu hazır animasyonlar çoğunlukla işimizi görse de, özel hazırlanmış animasyonları uygulamamıza ekleyebilmek için farklı kütüphaneler kullanmamız gerekiyor. Bunlardan birisi de Lottie. Lottie, Airbnb tarafından geliştirilen ve Adobe After Effects animasyonlarını JSON çıktısı halinde kullanmamıza olanak sağlayan bir kütüphane. Şu an için resmi olarak Flutter’ı desteklemese de başkaları tarafından geliştirilen bir kütüphane mevcut. Biz de bunu kullanarak Flutter uygulamamıza Lottie animasyonları ekleyeceğiz. Hadi başlayalım! 🎉
Kütüphane Kurulumu
Adım 1: Kütüphaneyi pubspec.yaml dosyamızın içine şu şekilde ekliyoruz:
dependencies:
lottie: ^0.7.0+1Adım 2: Projenin ana dizininde bir adet assets klasörü oluşturuyoruz ve bu klasörü de pubspec.yaml’a ekliyoruz.
flutter: assets: - assets/
Adım 3: Dosyaların ve kütüphanenin yüklenmesi için terminalimizde flutter pub get komutunu çalıştırıyoruz.
Adım 4: Lottie animasyonlarını kullanmak istediğimiz sayfaya kütüphaneyi ekliyoruz.
import 'package:lottie/lottie.dart';Kütüphaneyi Kurduk Peki Animasyonu Nereden Bulacağız? 🤔
Sizi bir sürü farklı animasyon içeren https://lottiefiles.com ile tanıştırmak istiyorum. Bu websitesinden bedava animasyonlar bulmanız mümkün. Ben de bu makale için kullanacağım animasyonları bu siteden alacağım. Siz de projenize uygun animasyonları buradan bulabilir ya da isterseniz benim kullandığım animasyonları aşağıdaki linklerden alıp kullanabilirsiniz.
Animasyonları Uygulamaya Ekleme
Bu bölümde Lottie animasyonlarını iki farklı şekilde çağıracağız.
Animasyonları asset olarak ekleme:
Bu yöntem ile animasyonlarımızı eklemek için önce eklemek istediğimiz animayonun JSON dosyasını indirip, oluşturmuş olduğumuz assets klasörüne eklemeliyiz. Klasöre ekledikten sonra tüm dosyaların Flutter tarafından görülmesi için flutter pub get komutunu tekrardan çalıştırmamız gerekiyor. Yükleme işlemini tamamladıktan sonra artık sayfamızda animasyonu çağırabiliriz.
Örneğin ben indirmiş olduğum animasyonu world_loading.json olarak kaydetmiştim. Lottie.asset() içerisinde animasyonumu çağırdım ve ta daaa… Animasyonumuz çalışıyor.
Eklemiş olduğumuz Lottie.asset()’e width ve height parametreleri vererek boyutunu da istediğimiz gibi ayarlayabiliriz.
Animasyonları URL üzerinden çağırma:
JSON dosyasını indirmeden de animasyonları çağırabiliriz. Bu durumda animasyonları gösterebilmemiz için internet bağlantımızın aktif olması gerektiğini unutmamalıyız. URL üzerinden animasyonumuzu eklemek için Lottie.network()’ü kullanabiliriz.
Animasyonları Nasıl Kontrol Edebiliriz?
Varsayalım ki bir yan menü tasarladınız. Yan menü kapalı iken hamburger icon’u göstermek istiyorsunuz, açıldığı zaman ise bunu animasyonlu bir şekilde çarpı icon’una çevirmek istiyorsunuz. Bunu yapabilmek için normalde animasyonunuzun otomatik olarak oynamıyor olması gerekiyor. Yalnızca kullanıcı yan menüyü açmak istediği zaman hamburger icon’unu çarpı icon’una çevirmeliyiz. Aynı şekilde yan menüyü kapattığımızda ise ters yönde animasyonu oynatmalıyız. Animasyonu bu şekilde kontrol edebilmeniz için bir AnimationController’a ihtiyacımız var. AnimationController’ı sayfanıza ekleyebilmek için ise TickerProviderStateMixin’i class’ımıza eklemeliyiz. Aşağıda paylaşmış olduğum kodda AnimationController’ı nasıl ekleyebileceğinizi görebilirsiniz.
Animasyonunuza controller eklediğiniz zaman artık animasyonun otomatik olarak oynamadığını fark edeceksiniz. Artık animasyonumuzu oynatmak istiyorsak _animationController’la kontrol etmemiz gerekiyor.
Şimdi basit bir buton ekleyeceğiz ve butona bastığımızda eğer animasyonumuz başlangıç halinde ise ileri doğru eğer bitmiş durumda ise geriye doğru oynamasını sağlayacağız.
forward() fonksiyonu animasyonu ileriye doğru oynatırken reverse() fonskiyonu terse doğru oynatmamızı sağlıyor. Fakat bu iki fonksiyonu da çağırmadan önce animasyonun ne kadar süreceğini tanımlamamız gerekiyor. Benim animasyonum 1 saniye olduğu için animasyonumun süresini 1 saniyeye eşitledim. Eğer duration vermezseniz animasyonunuzu oynatamazsınız. Hepsini yaptığımızda ise istediğimiz animasyonu elde etmiş oluyoruz 🥳
Sonuç
Artık Lottie’yi kullanarak uygulamanızı kullanıcılarınız için daha çekici bir hale getirebilirsiniz. Kullanımı gerçekten kolay ve gayet performanslı çalışıyor. Ayrıca lottiefiles.com sayesinde yüzlerce bedava animasyonu uygulamanıza ekleyebilirsiniz.
Makale için yazmış olduğum kodlara aşağıdaki Github Repository’sinden erişebilirsiniz. Herkese bol animasyonlu kodlamalar 👋🏻
Team Kraken olarak her hafta düzenli bir şekilde mobil uygulama geliştirme, tasarım ve ürün yönetimi konularında yazılar paylaşıyor olacağız. Eğer siz de yazılarımızı kaçırmamak istiyorsanız bizi takip etmeyi unutmayın!
