Splash Screen

Splash Screen, bir mobil uygulamanın başlatılması sırasında kullanıcılara gösterilen ilk ekran veya sayfa. Flutter çalışmaya başladığımda örnek uygulama incelerken ya da kendi kullandığım mobil uygulamaları düşündüğümde ilk aklıma gelen baştaki açılış sayfası olmuştu. O yüzden bunu önemsiyorum. Bu yüzden bunun üzerine yazmak istedim.

Kullanıcılara ilk izlenim oluşturması açısından çok önemli bence. Çünkü kullanıcının uygulamayı başlattığında ilk gördüğü şey bu ekran. Burada marka logosu kullanılabilir, bir resim gösterilebilir, ilham verici bir cümle konabilir, bu ekran görüntülenirken müzik başlayabilir vb. Ayrıca uygulama başlatılırken kullanıcılara bu ekranın gösterilmesi, uygulamanın yüklendiği veya hazırlandığına dair bir geri bildirim sağlar. Bu, kullanıcıların uygulamanın çalıştığını ve yanıt verdiğini görmelerine yardımcı olarak, kullanıcı deneyimini iyileştirebilir. Artık bunu oluşturmaya geçelim.

Flutter’da temel bir Splash Screen oluşturmak oldukça basit. Scaffold ve Center gibi temel widget’ları kullanarak basit bir başlangıç ekranı tasarlıyoruz.

class SplashScreen extends StatelessWidget {
  const SplashScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.cyan[200], // Splash Screen background color
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Image.asset(
              'assets/english.png', // Splash Screen image
              width: 400,
              height: 600,
            ),
            const SizedBox(height: 20),
            Text(
              'My Splash Screen App', // Title text
              style: TextStyle(
                fontSize: 24,
                color: Colors.blueGrey[700],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Yukarıdaki kod, Scaffold widget’ını kullanarak bir arkaplan rengi ve merkezde bir sütun içinde görsel ve metin içeren bir Splash Screen oluşturuyor.

Aşağıda linki bulunan kendi geliştirdiğim uygulamamda ise şöyle bir basit Splash Screen örneği mevcut:

class SplashScreen extends StatelessWidget {
  const SplashScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0XFFFFD72D),
      body: Center(
        child: Image.asset('assets/icons/animated_logo.gif')
      ),
    );
  }
}

Sonuç ise şu şekilde:

FlashCards Uygulama linki:

https://play.google.com/store/apps/details?id=com.cemnamak.flash_cards

Buraya kadar verdiğim örnekler Flutter’ın kendi widgetları ile basit Splash Screen oluşturmak üzerineydi. Bir de bunun package ile yapılan versiyonu var. pub.dev adresinden package kullanmak istediğimde baktığım şeyler genellikle popülaritesi, kimin tarafından geliştirildiği (flutter’ın kendi ekibi tarafından geliştirilenler güncellemeler vs söz konusu olduğunda daha güvenilir oluyor) ve son Dart versiyonu ile uyumlu olup olmadığı oluyor.

Bu noktada %90 popülariteye sahip splash_view paketi ile de kolayca splash screen oluşturabiliyoruz. Gelelim nasıl yapabileceğimize.

Terminale aşağıdaki komutu yazarak package’ı projemize yüklüyoruz.

flutter pub add splash_view

Projenin başında aşağıdaki gibi import ederek package’ı proje dosyamıza tanıtıyoruz.

import 'package:splash_view/splash_view.dart';

Sonrasında ise package içeriğine uygun olarak kodlarımızı yazıyoruz. Örneğin;

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SplashView(
        backgroundColor: Colors.blue[100],
        loadingIndicator: const RefreshProgressIndicator(),
        logo: const FlutterLogo(
          size: 102.0,
        ),
      ),
    );
  }
}

Sonuç şu şekilde:

Son olarak Splash Screen oluştururken dikkat etmemiz gereken noktalardan da bahsederek makalemi noktalıyorum.

İlk dikkat etmemiz gereken şey görsel tasarım ve marka uyumu. Bu ekran uygulamamızın ilk izlenimini oluşturduğundan uygulamamızın temasıyla uyumlu renkler, fontlar ve görseller seçmek ve marka kimliğini yansıtmak çok önemli.

Splash Screen’in gösterilme süresi kullanıcıyı sıkacak kadar uzun ya da ekranda yer alan ögeyi göremeyecek kadar kısa olmamalı. Direkt kullanıcı deneyimini etkiler. Gereksiz yüklenmelere de yer verilmemeli.

Geçiş efektleri ve animasyonlar ekleyerek daha etkileyici bir deneyim sunabiliriz. Özellikle uygulama yüklenirken veya hazırlanırken bu tür efektler kullanıcıya geri bildirim sağlayarak beklemeyi daha hoş hale getirebilir.

Splash Screen’in farklı ekran boyutlarında ve çözünürlüklerinde düzgün görüntülenmesini sağlamak için responsive tasarım prensiplerine uygun olarak oluşturmamız gerekiyor. Bu, farklı cihazlarda ve ekran oranlarında hoş olmayan, beklenmedik görüntüler ortaya çıkabilir. Bu yüzden farklı cihazlarda da test etmeyi unutmamak gerek.

Sonuç olarak, Splash Screen uygulamamızın kullanıcı deneyimini iyileştiren ve marka kimliğimizi tanıtan önemli bir unsur. Kullanıcıların uygulamamızı ilk açtıklarında karşılaştıkları bu ekran, genellikle uygulamanın geri kalan deneyimi için bir ön izlenim oluşturuyor ve bu nedenle dikkatli bir şekilde tasarlamamız gerekiyor. Umarım faydalı olmuşumdur.

İyi çalışmalar.

Selin.