Wednesday, September 25, 2019

Membuat Splash Screen Android di Flutter - Tutorial Flutter Indonesia

kucingtekno - Splash Screen atau layar pembuka merupakan salah satu fitur yang digunakan memperkenalkan aplikasi kepada penggunanya. Membuat splash screen di Flutter sangat mudah daripada membuat splash screen di Android Studio. Pada artikel ini saya akan mencoba membahas Tutorial Membuat Splash Screen Android di Flutter dengan sederhana dan mudah dipahami.

via googledev


Hal pertama sebelum memulainya kita harus sedikit familiar dengan penggunaan dasar Flutter sehingga nanti tidak membingungkan saat mencoba membuatnya. Pastikan sudah ada emulator untuk menjalankan aplikasi Android , disini saya menggunakan Android Virtual Device dari Android Studio .

Namun jika teman-teman merasa keberatan menggunakannya bisa menggunakan emulator lain atau bisa menggunakan smartphone untuk meringankan kinerja komputer. 

Langkah Membuat Splash Screen Android di Flutter 

1. Buka Flutter dan Buat aplikasi baru 

Aplikasi Android yang dibuat misal bisa membuat hello word . Disini saya meneruskan aplikasi yang sudah ada pada tutorial sebelumnya yaitu Tutorial Membuat Webview di Flutter 

2. Cari dan Edit File launch_background.xml 


Untuk mencarinya klik di dalam Flutter Folder android - app - main - res - drawable - launch_background.xml , lalu hapus tanda komentar untuk mengaktifkan fungsi Splash Screen .



Silakan untuk gambar / iconnya bisa diubah sesuai dengan keinginan pada bagian android:src= , disini saya menggunakan icon bawaan saja untuk mempermudah tutorialnya. 

4. Source Code  launch_background.xml via GIST GITHUB


Berikut contoh source code launch_background.xml 


 

3. Simpan File dan Running via Emulator

Jika benar akan menunjukkan tampilan seperti di bawah ini :


Sangat mudah dan simple kan untuk membuat splash screen di Flutter, mungkin ke depannya bisa dikembangkan lebih jauh misal bisa ditambahi progress bar , timing tampil, mengubah layout dan lain-lain. 

Sekian tutorial Membuat Splash Screen Android di Flutter - Tutorial Flutter Indonesia jika ada materi yang terlewat, salah atau kurang jelas bisa meninggalkan komentar di bawah.

Jika tidak jelas silakan komentar ya

Terima kasih atas kunjungan Anda.
Emoticon Emoticon