Splash Screenler bir uygulamayı ilk açtığımız anda bizi karşılamakla görevlendirilmiş kısa süreli görünümlerdir. Kullanıcı olarak uygulamaya tıkladığımızda direkt uygulama anasayfasına yönlendirilebileceğimiz gibi sade ancak havalı bir splash screen sayesinde daha “özenli” bir uygulama ile karşı karşıya olduğumuz izlenimini alabiliriz. Şimdi gelelim Flutter’da bir Splash Screen görünümü örneği oluşturmaya.
Flutter’da her şeyin birer widget olduğunu bildiğimiz için ilk olarak bizi karşılayacak Splash Ekranını ve devamında yönlendirileceğimiz sayfayı tasarlayalım.
Kodları zaten yazının sonunda paylaşacağım. Şimdi kısaca ne yaptığımızı açıklayalım. Anasayfamız bizim 2. sayfamız. Splash Screen ise bizi karşılayan ilk sayfa bu sebeple ben, main classı içerisindeki görünümü direkt Splash Screen tasarımı olarak kullandım.
2. Gifte hareket eden görsel hazır kullandığım bir github kütüphanesi. Kesinlikle hoş animasyonlar var. Aslında sayfadaki yüklenmeleri temsilen kullanma amacıyla hazırlanmış olsa da ben animasyonunu beğendiğim için Splash Screende kullandım bu kütüphaneyi.
İsterseniz ilk gifteki gibi uygulamanızın logosu vb. bir görsel de koyabilirsiniz. Bunun için kodlarda:
spinkit’i kaldırıp yorum satırı halinde bulunan Image’i aktifleştirebilirsiniz.
Devam edelim…
main Sınıfının içinde ilk olarak MyApp çalıştırılmakta biz de MyApp’in içindeki MaterialApp’in home özelliğine Splash Screenimizin kendisi olan sınıfı veriyoruz. Kodlarda bu sınıf Splash() olarak geçmekte ve bizim widget sınıfımız kendisi. Widget sınıfları stateless ya da stateful olabilir, bizimkisi bir stateful widget. Stateful widgetlar adı üstünde durumu bulunan sınıflardır bu sebeple de bir “state”e sahiplerdir. Kodumuzda _SplashState olarak geçen bu State sınıfı bizim tasarımımızın bulunduğu kısım. State sınıfındaki Widget build(BuildContext context) {} içerisinde tasarımımızı hazırladık.
with SingleTickerProviderStateMixin’i, kullandığımız github kütüphanesindeki animasyonlar için gerekli olduğundan dahil ettik. SingleTickerProviderStateMixin ile widget’ımızı animasyondan haberdar ederiz. AnimationController içerisinde yer alan vsync üzerinden bu bilgiyi verdiğimizde bizim asıl ekranımız görüntülenmeden animasyonun işlenmesini engellemiş oluruz.
Peki geriye ne kaldı? Şöyle ki şimdi biz program açıldıktan belirli bir süre sonra -bu süre kendi belirlediğimiz süredir- anasayfaya geçiş yapsın istiyoruz. İşte bunun için Future.delayed kullanıyoruz.
Future.delayed asenkron olduğu için bize belirli bir süre sonra istediğimiz kodları çalıştırma imkanı sunmakta. Biz Splash Screen’de yani bulunduğumuz ekranda bir süre kalıp sonrasında anasayfaya geçiş yapmak istiyoruz. Duration yani bekleme süresi olarak saniye cinsinden 4 saniye verdim ben. Bu milisaniye cinsinden de verilebilir. 4 saniyenin sonunda kod bloğunun içindeki kodlar çalıştırılmaya başlar. Burada bizim Navigator.push metodumuz çalıştırılacak. Bu metod, sayfa geçişleri için kullanılmakta.
Tüm bunları yaparken initState metodu içerisinde yapıyoruz çünkü bu metod bizim State nesnemiz widget ağacına eklendiği an çağrılır.
Yaptıklarımız oldukça basit, aslında kazandırdığımız tek işlev Future.delayed () metodunda idi. Bunu da yukarıda açıkladığımıza göre kodları paylaşarak yazıyı bitirebiliriz.