Flutter Splash Screen

Ali Demircan
2 min readApr 17, 2020

--

Real Splash Screen on the Flutter

Her ne kadar günümüzde mobil cihazlar çok gelişmiş olsalar da uygulamalarımız açılırken bir başlangıç ekranı ile karşılaşırız.Bu ekranın geçiş süresi uygulamadan uygulamaya değişiklik göstermektedir.Cihazın bu ekranında beklemesinin sebebi uygulamayı kullanıma hazır hale getirmeye çalışıyor oluşudur.Fakat default hali beyaz olan bu ekran estetik açıdan hoş durmadığı gibi kullanıcıları da rahatsız etmektedir.

Zaman kullanıcılar için çok kıymetlidir.

Bu ekranın gelmemesini sağlayamayız fakat bu ekranı kendi lehimize çevirebiliriz.Bahsi geçen başlangıç ekranın ismi splash screen(başlangıç ekranı)’ dir. Bu yazımda splash screen yapımından bahsedeceğim. Yazımı yazmadan önce göz gezdirdiğim bazı yazılarda elle yapılan başlangıç ekranları gördüm.Fakat bunlar gerçeği yansıtmamakla beraber kullanıcıları ekstra rahatsız etmekte.Şimdi düşünün hem beyaz bir başlangıç ekranı hemde bu kötü tekniğin oluşturmuş olduğu bir logo ekranı.Bizim yapmamız gereken iş ise kaldırmadığımız başlangıç ekranı yerine logomuzu koymak.

Yapmamız gereken ilk iş başlangıç ekranında gözükmesini istediğimiz resmin boyutlarını ayarlamak.Benim elimdeki resim 300*700. Sizde yüksekliğin genişliğin 2 katından daha fazla olmasına dikkat ediniz.

Ardından uygulama dizininde şu yola gidiniz.

android/app/src/main/drawable/

Oluşturduğunuz başlangıç resmini bu dizine kopyalayın.Ve ardından hemen aşağıdaki dosyayı açıp işlemlere devam edin.

android/app/src/main/drawable/launch_backgroun.xml

Buradaki item tag’ lerini yorum satırı olmaktan kurtarın ardından src kısmıda gerekli işlemi yapacağız.

<item><bitmapandroid:gravity="center"android:src="@drawable/launch_image" /></item>

Bu kısımda belirtmek isterim ki arka planı beyaz yada siyahtan başka bir renk yaparsanız uygulamanız hata verecektir.Ve önemli bir husus daha.Resmin uzantısını belirtmiyoruz.İşlem bu kadar,artık sizde kullanıcılar açılma ekranındaki can sıkıcı bekleme sorununu çözmüş üstelik bu sorunu kendi lehinize çevirmiş haldesiniz.

launch_background.xml Tam Hali

Bir sonraki yazımda görüşünceye kadar kendinize iyi bakın ve kod yazarken kendi hikayenize de bir import çakmayı unutmayın!

Heee! bitirmeden,girdiğiniz sitelerinde bir sayfa kaynağına bakın derim belki yukarıdaki gibi bir şey ile karşılaşırsınız :D

--

--

Ali Demircan

What’s up, I’m Ali,Flutter Lover.I am a fan of technology, swimming, and programming. I’m also interested in surfing and innovation.