Merhaba arkadaşlar bu yazımızda Flutter ile geliştirdiğimiz bir uygulamada splash screen nasıl ekleyeceğimizi öğreneceğiz.Splash Screen Nedir?
Birçok uygulamayı açtığımız zaman karşımıza genelde logo çıkar ve birkaç saniye içinde uygulama açılır. Bu karşılama ekranına splash screen adı verilir. Türkçe olarak ifade etmek istersek karşılama ekranı, açılış ekranı ifadeler kullanılabilir.
Uygulama başlatıldığı zaman ilk çalışacak fonksiyonumuzu “MyApp” olarak belirlemek için runApp metodundan faydalandık. Uygulamamızı başlattığımızda bizi karşılacak dosya MyApp metodunun tanımlandığı main.dart dosyasıdır. Splash Screen arayüzü ile ilgili değişiklikleri bu dosya üzerinden yapacağız.
Estetik olarak daha hoş duracağını düşündüğüm için önceden Photoshop ile hazırlamış olduğum splashscreen.jpg görselini sayfaya arka plan olarak ayarladım. Flutter ile ilgili dikkat etmemiz gereken önemli bir husus ise kullandığımız image dosyasının pubsec.yaml dosyasında mutlaka göstermemiz gerektiği. Assets klasörü içerinde yer alan jpg dosyası için pubsec.yaml içerisine tanımlıyoruz:
main.dart dosyamızı inceleyelim:
initState() içerisinde Duration metodu ile splash screen süresini ayarlayabilirsiniz. Ben saniye cinsinden ayarladım dilerseniz miliseconds, seconds gibi farklı zaman ölçekleri kullanabilirsiniz. İdeal süre 3 saniye civarlarında olduğu için seconds: 3 olarak belirledim. Navigator.push metodu anasayfamıza geçiş için kullanacağımız metot. Anasayfada yer alan ana metod Anasayfa() olduğu için MaterialPageRoute içerisinde Anasayfa() metodunu yazmamız gerekmekte. Burada dikkat edilecek bir diğer nokta ise anasayfa.dart dosyasıını classımıza import etmemiz.
Estetik olarak daha hoş duracağını düşündüğüm için önceden Photoshop ile hazırlamış olduğum splashscreen.jpg görselini sayfaya arka plan olarak ayarladım. Flutter ile ilgili dikkat etmemiz gereken önemli bir husus ise kullandığımız image dosyasının pubsec.yaml dosyasında mutlaka göstermemiz gerektiği. Assets klasörü içerinde yer alan jpg dosyası için pubsec.yaml içerisine tanımlıyoruz:
main.dart dosyamızı inceleyelim:
initState() içerisinde Duration metodu ile splash screen süresini ayarlayabilirsiniz. Ben saniye cinsinden ayarladım dilerseniz miliseconds, seconds gibi farklı zaman ölçekleri kullanabilirsiniz. İdeal süre 3 saniye civarlarında olduğu için seconds: 3 olarak belirledim. Navigator.push metodu anasayfamıza geçiş için kullanacağımız metot. Anasayfada yer alan ana metod Anasayfa() olduğu için MaterialPageRoute içerisinde Anasayfa() metodunu yazmamız gerekmekte. Burada dikkat edilecek bir diğer nokta ise anasayfa.dart dosyasıını classımıza import etmemiz.
anasayfa.dart dosyamızı inceleyelim:
Projenin tam halini Github üzerinden paylaştım.
Bir sonraki yazımızda görüşmek üzere,
Sağlıklı günler dilerim…
