fbpx
Web capture_23-3-2023_14385_www.bing.com

Cara Membuat Splash Screen di Flutter

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!

Sebarkan konten ini jika bermanfaat:

Facebook
Twitter
Pinterest
LinkedIn

Leave a Reply

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

PORTOFOLIO KAMI:

PRODUK ALAN:

Media Sosial kami:

ARTIKEL POPULER!

Dapatkan info terbaru!

Dapatkan artikel & info terbaru!

Tidak ada spam, hanya artikel dan info terbaru!

KATEGORI ARTIKEL

Banyak artikel lain disini!

Baca artikel lainnya...

daerah terpencil

Transformasi Teknologi di Daerah Terpencil

Hi Alan Lovers, daerah terpencil seringkali diabaikan dalam perencanaan dan pengembangan teknologi. Padahal kebutuhan teknologi di daerah ini tak kalah penting dengan daerah-daerah perkotaan. Tantangan

id_IDID

Konsultasi aja dulu. Gratis!

Hubungi kami untuk mendapatkan proposal penawaran jika project brief/requirement (dokumen proyek) sudah ada dan lengkap.
Konsultasi yuk ->
Butuh konsultasi?
Hai,

Alan Creative disini, kami berharap anda tersenyum dan bahagia hari ini. Ada yang dapat kami bantu? Jika iya, jangan sungkan menghubungi kami.

Salam hangat,
Alan Creative