Halo, Alan Lovers! Ketika mengembangkan sebuah aplikasi, tentu banyak sekali komponen yang harus dikembangkan. Salah satu komponen penting dalam meningkatkan estetika sebuah aplikasi adalah splash screen.
Jadi, splash screen merupakan tampilan yang muncul ketika kita membuat sebuah aplikasi. Biasanya, terdiri dari logo, nama, dan hal-hal lainnya yang tentu berhubungan dengan aplikasi tersebut.
Beberapa aplikasi populer yang menggunakan splash screen diantaranya adalah Facebook, YouTube, dan Gojek. Lalu, bagaimana cara membuat splash screen ini?
Dalam artikel ini, kami akan membagikan cara membuat splash screen di Flutter. Apa itu Flutter? Flutter merupakan UI (User Interface) software development kit (SDK) yang dikembangkan oleh Google.
Lalu, mengapa Flutter? Karena Flutter merupakan salah satu sotfware pengembang aplikasi yang populer. Selain praktis, Flutter juga mudah untuk digunakan dan dipelajari para pengembang aplikasi pemula.
Cara Membuat Splash Screen di Flutter
Di Android, ada dua jenis layar yang dapat kalian kontrol: pertama, launch screen yang menunjukan bahwa aplikasi Android sedang diinisialisasi, dan kedua, splash screen yang menunjukan pengalaman Flutter diinisialisasi.
Inisialisasi Aplikasi
Setiap aplikasi Android memerlukan waktu inisialisasi saat sistem operasi menyiapkan proses aplikasi. Android menyediakan launch screen untuk menampilkan Drawable saat aplikasi sedang diinisialisasi.
Template proyek Flutter default termasuk definisi launch theme dan launch background. Kalian dapat menyesuaikan ini dengan mengedit styles.xml, di mana kalian dapat menentukan tema yang windowBackground-nya diatur ke Drawable yang harus ditampilkan sebagai launch screen.
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
<item name="android:windowBackground">@drawable/launch_background</item>
</style>
Selain itu, styles.xml mendefinisikan normal theme yang akan diterapkan pada FlutterActivity setelah launch screen hilang. Latar belakang normal theme hanya ditampilkan dalam waktu yang sangat singkat setelah layar splash screen menghilang, dan selama perubahan orientasi dan pemulihan Aktivitas.
Oleh karena itu, disarankan agar tema normal menggunakan warna latar belakang solid yang mirip dengan warna latar belakang utama UI Flutter.
<style name="NormalTheme" parent="@android:style/Theme.Black.NoTitleBar">
<item name="android:windowBackground">@drawable/normal_background</item>
</style>
Set up the FlutterActivity di AndroidManifest.xml
Di AndroidManifest.xml, atur tema FlutterActivity ke tema peluncuran. Kemudian, tambahkan elemen metadata ke FlutterActivity yang diinginkan untuk memberi instruksi ke Flutter agar beralih dari tema peluncuran ke tema normal pada waktu yang tepat.
<activity
android:name=".MyActivity"
android:theme="@style/LaunchTheme"
// ...
>
<meta-data
android:name="io.flutter.embedding.android.NormalTheme"
android:resource="@style/NormalTheme"
/>
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>Sekarang, aplikasi Android akan menampilkan launch screen yang diinginkan saat aplikasi diinisialisasi.
Android 12
Mulai dari Android 12, kalian harus menggunakan API splash screen baru di file styles.xml kalian. Pertimbangkan untuk membuat file sumber alternatif untuk Android 12 dan yang lebih tinggi. Pastikan juga bahwa gambar background kalian sesuai dengan pedoman ikon; lihat Android Splash Screens untuk detail lebih lanjut.
<style name="LaunchTheme" parent="@android:style/Theme.Black.NoTitleBar">
<item name="android:windowSplashScreenBackground">@color/bgColor</item>
<item name="android:windowSplashScreenAnimatedIcon">@drawable/launch_background</item>
</style>
Pastikan bahwa io.flutter.embedding.android.SplashScreenDrawable tidak diatur di manifest Anda, dan bahwa provideSplashScreen tidak diimplementasikan, karena API ini sudah usang. Melakukannya akan membuat layar peluncuran Android menjadi memudar halus ke dalam Flutter ketika aplikasi diluncurkan dan aplikasi mungkin akan crash.
Beberapa aplikasi mungkin ingin terus menampilkan frame terakhir dari layar peluncuran Android di Flutter. Misalnya, ini mempertahankan ilusi satu frame sementara pengisian tambahan dilakukan di Dart. Untuk mencapai hal ini, API Android berikut mungkin berguna:
Java:
import android.os.Build;
import android.os.Bundle;
import android.window.SplashScreenView;
import androidx.core.view.WindowCompat;
import io.flutter.embedding.android.FlutterActivity;
public class MainActivity extends FlutterActivity {
@Override
protected void onCreate(Bundle savedInstanceState) {
// Aligns the Flutter view vertically with the window.
WindowCompat.setDecorFitsSystemWindows(getWindow(), false);
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
// Disable the Android splash screen fade out animation to avoid
// a flicker before the similar frame is drawn in Flutter.
getSplashScreen()
.setOnExitAnimationListener(
(SplashScreenView splashScreenView) -> {
splashScreenView.remove();
});
}
super.onCreate(savedInstanceState);
}
}
Kotlin:
import android.os.Build
import android.os.Bundle
import androidx.core.view.WindowCompat
import io.flutter.embedding.android.FlutterActivity
class MainActivity : FlutterActivity() {
override fun onCreate(savedInstanceState: Bundle?) {
// Aligns the Flutter view vertically with the window.
WindowCompat.setDecorFitsSystemWindows(getWindow(), false)
if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.S) {
// Disable the Android splash screen fade out animation to avoid
// a flicker before the similar frame is drawn in Flutter.
splashScreen.setOnExitAnimationListener { splashScreenView -> splashScreenView.remove() }
}
super.onCreate(savedInstanceState)
}
}
Kesimpulan
Itulah cara membuat splash screen di Flutter. Semoga artikel ini dapat bermanfaat bagi kalian dalam mengembangkan aplikasi dengan lebih baik lagi.
Ada info menarik juga buat kalian, bahwa Alan Creative menggunakan Flutter dalam mengerjakan proyek. Tentunya, pemilihan technology stack ini disesuaikan dengan keinginan dan kebutuhan kalian. Oleh karenanya, berbagai macam aplikasi mobile yang dikembangkan dapat diselesaikan secara cepat dan sesuai dengan keinginan kalian. Kalau kalian butuh jasa layanan pembuatan aplikasi hingga web, tunggu apalagi? Hubungi kami sekarang juga!
