Tutorial Flutter: Membuat Splashscreen Sederhana

Posted on by syauqi wiryahasana

Ingin membuat kesan pertama yang memukau di aplikasi Flutter Android Anda? Layar splash adalah jawabannya! Layar ini muncul sesaat setelah pengguna membuka aplikasi, memberikan gambaran sekilas tentang apa yang akan mereka lihat. Yuk belajar cara menambahkan warna latar dan logo ke layar splash menggunakan file AndroidManifest.xml dan styles.xml!

Langkah 1: Sulap AndroidManifest.xml

  1. Buka file AndroidManifest.xml yang terletak di direktori android/app/src/main.
  2. Di dalam tag <activity> untuk MainActivity, tambahkan atau modifikasi atribut android:theme untuk menentukan tema kustom bagi aplikasi Anda. Kita akan membuat tema ini di file styles.xml.
<activity
    android:name=".MainActivity"
    android:launchMode="singleTop"
    android:theme="@style/SplashTheme">
    </activity>

Langkah 2: Ciptakan Tema di styles.xml

  1. Buka file styles.xml yang terletak di direktori android/app/src/main/res/values.
  2. Tentukan tema kustom bernama SplashTheme yang mewarisi dari Theme.AppCompat.Light.NoActionBar.
  3. Atur atribut windowBackground untuk mereferensi resource drawable (misalnya, splash_screen.xml) yang menentukan warna latar atau logo untuk layar splash.
  4. (Opsional) Atur windowFullscreen menjadi true untuk membuat layar splash menutupi seluruh layar.
<resources>
    <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar">
        <item name="android:windowBackground">@drawable/splash_screen</item>
        <item name="android:windowFullscreen">true</item>
    </style>
</resources>

Langkah 3: Tambahkan Gambar Latar

  1. Tempatkan gambar latar Anda (warna solid atau logo) di folder drawable pada project Android.
  2. Buat file resource drawable (misalnya, splash_screen.xml) yang menentukan warna latar atau logo untuk layar splash menggunakan shape drawable.
  3. Untuk warna solid, tentukan bentuk dengan warna solid.
  4. Untuk logo, masukkan logo sebagai drawable dan posisikan menggunakan atribut gravity.
<shape xmlns:android="http://schemas.android.com/apk/res/android" android:shape="rectangle">
    <solid android:color="@color/splash_background"/>
    <item android:drawable="@drawable/logo" android:gravity="center"/>
</shape>

Langkah 4: Konfigurasikan Warna

Jika menggunakan warna solid sebagai latar, tentukan warnanya di file colors.xml yang terletak di direktori android/app/src/main/res/values.

<resources>
    <color name="splash_background">#FF0000</color> </resources>

Langkah 5: Jalankan Aplikasi!

Setelah melakukan modifikasi ini, jalankan aplikasi Flutter Anda pada perangkat Android atau emulator. Anda akan melihat layar splash dengan warna latar dan logo yang ditentukan ditampilkan saat peluncuran.

Selamat! Kini Anda telah berhasil mendandani layar splash aplikasi Flutter Android. Dengan mengikuti langkah-langkah ini, Anda dapat menyesuaikan layar splash menggunakan file AndroidManifest.xml dan styles.xml untuk menentukan warna latar atau logo. Pendekatan ini memungkinkan Anda untuk membuat layar splash yang menarik secara visual dan mencerminkan branding aplikasi Anda, serta memberikan transisi yang mulus ke antarmuka aplikasi utama.

Tips Tambahan:

  • Gunakan warna dan logo yang konsisten dengan branding aplikasi Anda.
  • Pastikan ukuran dan resolusi gambar latar atau logo sesuai untuk tampilan perangkat yang berbeda.
  • Pertimbangkan menggunakan animasi untuk membuat layar splash lebih dinamis (opsional).

Dengan sedikit kreativitas, Anda dapat membuat layar splash yang mengesankan dan memikat pengguna saat mereka membuka aplikasi Flutter Android Anda!