Flutter Launch Image(Splash Screen) – Başlangıç Resmi

Bu yazıda Flutter ile geliştirdiğimiz mobil uygulamaların başlangıcında ekranda görünmesi için bir resmin nasıl ayarlandığını anlatacağız. Uygulama başlarken bazı işlemler için biraz vakit gerekir, bu vakit geçerken uygulamanın açıldığını göstermek dilediğimiz bir görseli kullanıcıya gösterebiliriz. Bu işi android ve ios için ayrı ayrı ele alacağız.

  1. IOS

iOS uygulama başlangıç ekran resmini değiştirmek veya düzenlemek için XCode kullanacağız. Eğer XCode dan ayrı başka bir geliştirme ortamı kullanıyorsanız aşağıdaki görseli takip ederek gerekli dosyayı XCode ile açabilirsiniz.

Assets.xcassets klasörünü XCode ile açtıktan sonra aşağıda bulunan görseldeki kısma gelelim.

Burada LaunchImage olarak kullanmak istediğimiz görseli 1x, 2x ve 3x şeklinde boyutlandırarak ekleyelim. Uygulama otomatik olarak üzerinde çalıştığı cihazın ekran boyutuna göre başlangıçtaki resmi gösterecektir. Boyutlandırma konusunda referans olarak aşağıdaki bağlantıyı kullanabilirsiniz. 

https://developer.apple.com/design/human-interface-guidelines/ios/icons-and-images/image-size-and-resolution/

Boyutlandırmak için ise aşağıdaki bağlantıyı kullanabilirsiniz:

https://picresize.com/

Başlangıç resmini düzenlemek için ise bu dosyayı açacağız: LaunchScreen.storyboard

Gerekli değişiklikleri yaptıktan sonra uygulamayı tekrar derleyip cihaza yükleyelim. Uygulama açılırken başlangıçta ayarladığımız resmi göreceğiz.

  1. ANDROID

Android için kaynak dosyaları içerisinde bulunan bir xml dosyasında ufak bir değişiklik yaparak başlayacağız. Aşağıdaki yolda bulunan xml’i açalım:

android/app/src/main/res/drawable/launch_background.xml

xml dosyasını açtığımızda yukarıdaki görüntü ile karşılacağız fakat 7-11 satırları arası yorum satırı olarak kapatılmış olacak. Bizim yapacağımız iş sadece bu kısmı kod a dahil etmek olacak. 

Bu işin ardından aşağıdaki konumda bulunan mipmap klasörlerine farklı boyutlardaki android cihazlar için ürettiğimiz başlangıç resimlerini “launch_image” ismi ile kopyalıyoruz.

Yukarıdaki tüm boyutlar için otomatik bir şekilde aşağıdaki bağlantıyı kullanarak istediğiniz resmi ürettirebilirsiniz:

https://appicon.co/

Bütün boyutlar için ekleme yaptıktan sonra farklı cihazlarda deneyerek sonucu gözlemleyebilirsiniz.

Leave a Reply

Your email address will not be published. Required fields are marked *