Membuat Splash Screen Sederhana Menggunakan Flutter

Dalam pengembangan aplikasi mobile menggunakan Flutter, membuat splash screen adalah salah satu hal yang penting untuk memberi kesan pertama kepada pengguna. Splash screen memberikan waktu bagi aplikasi untuk mempersiapkan tampilan awal dan dapat menampilkan informasi atau logo aplikasi.

Artikel ini bertujuan untuk memberikan informasi mengenai cara membuat splash screen sederhana di Flutter.

Dengan memahami pembuatan splash screen di Flutter, kamu dapat menciptakan tampilan awal aplikasi yang menarik dan fungsional menggunakan widget, class, dan styling yang sesuai untuk project kamu.

Apa itu Splash Screen di Flutter?

Splash screen di Flutter adalah tampilan awal aplikasi yang memberikan kesan pertama pada pengguna.

Untuk membuat splash screen sederhana menggunakan Flutter, kamu bisa memanfaatkan StatefulWidget, seperti class SplashScreen extends StatefulWidget, dengan initState untuk mengatur waktu tampilnya splash screen sebelum beralih ke halaman utama.

Kamu dapat menambahkan gambar atau teks dengan image.asset dan menyesuaikan backgroundColor serta ukuran tampilan menggunakan properti width dan height.

Pastikan file seperti pubspec.yaml diatur dengan benar untuk memuat asset. Dengan menggunakan Visual Studio Code, pengembangan splash screen di Flutter menjadi mudah dan efisien​

Baca Juga: Apa Itu Flutter Dan Cara Kerja Flutter !!

Membuat Splash Screen Dasar pada Flutter

Untuk membuat splash screen di Flutter, ikuti langkah-langkah berikut:

1. Buat Class Baru untuk Splash Screen: Mulailah dengan membuat file baru untuk halaman splash screen. Gunakan StatefulWidget untuk membuat splash screen yang dinamis. Di dalam widget ini, kamu dapat menambahkan logo atau gambar dengan menggunakan Image.asset dan mengatur posisi gambar di tengah layar menggunakan Center widget.
   
2. Desain Layout: Kamu bisa menambahkan desain sederhana dengan menampilkan logo atau gambar. Pastikan gambar tersebut disimpan dalam folder assets dan dikonfigurasi di file pubspec.yaml.
   
3. Menambahkan Durasi: Untuk mengatur durasi tampilan splash screen, gunakan Future.delayed yang akan menunggu selama beberapa detik (misalnya 5 detik) sebelum menavigasi ke halaman utama aplikasi.
   
4. Navigasi ke Halaman Berikutnya: Gunakan Navigator.pushReplacement untuk mengganti halaman splash screen dengan halaman utama setelah waktu yang ditentukan.
   

Setelah mengikuti langkah-langkah di atas, kamu akan memiliki splash screen yang menampilkan logo selama beberapa detik sebelum melanjutkan ke layar utama aplikasi.

Mengatur Waktu Tampilan

Untuk membuat splash screen di Flutter tanpa menggunakan pustaka tambahan, berikut adalah langkah-langkah yang dapat diikuti:

1. Buat Widget Splash Screen: Kamu bisa membuat kelas SplashScreen dengan menggunakan StatefulWidget untuk menangani konten dinamis seperti pengatur waktu. Di widget ini, kamu akan menyiapkan sebuah Timer untuk mengatur berapa lama splash screen ditampilkan sebelum berpindah ke halaman utama.
   
2. Setel Timer: Gunakan Timer dari paket dart:async. Tentukan durasi berapa lama splash screen akan tampil, dan setelah durasi selesai, arahkan ke halaman utama.
   
   Contoh potongan kode untuk memulai timer dan navigasi:
   
   
   dart
   Salin kode
   startSplashScreen() async { var duration = const Duration(seconds: 5); return Timer(duration, () { Navigator.of(context).pushReplacement( MaterialPageRoute(builder: (context) => MovieHome()), ); }); }
   
   
3. Panggil Timer dalam initState(): Metode initState() dipanggil ketika widget pertama kali dibuat. Ini adalah tempat di mana kamu akan memulai timer untuk splash screen.
   
   dart
   Salin kode
   @override void initState() { super.initState(); startSplashScreen(); }
   
   
4. Desain UI Splash Screen: Buat UI sederhana dengan gambar (seperti logo aplikasi kamu atau gambar kustom) dan judul. Gunakan metode Image.asset() untuk menampilkan gambar dari folder assets.
   
5. Atur Splash Screen Sebagai Widget Utama: Di titik masuk utama aplikasi kamu (main.dart), atur SplashScreen sebagai widget pertama yang tampil:
   
   dart
   Salin kode
   home: SplashScreen(),
   
   
6. Assets dan Konfigurasi: Pastikan untuk menambahkan gambar yang digunakan untuk splash screen ke folder assets dan sesuaikan file pubspec.yaml agar gambar dapat dimuat dengan benar.
   

Mengkustomisasi Tampilan

Untuk mengkustomisasi tampilan splash screen di Flutter, kamu dapat melakukan beberapa langkah untuk menyesuaikan warna, font, dan animasi sesuai dengan kebutuhan aplikasi kamu. Berikut adalah beberapa cara untuk mengkustomisasi tampilan splash screen:

1. Menggunakan Tema untuk Mengatur Warna dan Font: Flutter memungkinkan kamu untuk mengatur tema aplikasi yang dapat digunakan pada seluruh aplikasi, termasuk splash screen. Kamu dapat menambahkan pengaturan warna, font, dan gaya teks melalui ThemeData. Misalnya, kamu dapat mengatur warna latar belakang dan font splash screen menggunakan tema yang sudah disesuaikan:
   
   
   dart
   Salin kode
   ThemeData( primarySwatch: Colors.blue, textTheme: TextTheme( bodyText1: TextStyle(fontSize: 18, fontWeight: FontWeight.bold), ), )
   
   
2. Menambahkan Animasi Sederhana: Untuk membuat tampilan splash screen lebih menarik, kamu dapat menambahkan animasi sederhana. Misalnya, menggunakan AnimatedOpacity atau FadeTransition untuk memudar logo atau teks yang muncul selama splash screen. Kamu juga bisa menggunakan TweenAnimationBuilder untuk animasi yang lebih kompleks.
   

Menggunakan Library Tambahan

Jika kamu ingin menambahkan fitur lebih lanjut seperti splash screen yang lebih canggih, kamu bisa menggunakan pustaka pihak ketiga, seperti flutter_native_splash, yang dapat memberikan pengaturan lebih lanjut untuk splash screen, termasuk mengatur gambar latar belakang dan durasi tampilan splash secara otomatis, tanpa memerlukan kode tambahan.

Best Practices

Saat merancang splash screen yang efektif untuk aplikasi Flutter, ada beberapa praktik terbaik yang perlu diperhatikan:

1. Jaga Durasi Singkat: Usahakan durasi tampilan splash screen sekitar 2-3 detik. Splash screen yang terlalu lama dapat membuat pengguna frustrasi, jadi pastikan tidak menunda peluncuran aplikasi.
   
2. Kesederhanaan: Hindari tampilan yang terlalu ramai. Desain splash screen sebaiknya sederhana dan bersih, fokus pada elemen penting seperti logo aplikasi atau tagline.
   
3. Konsistensi Branding: Pastikan splash screen sesuai dengan branding aplikasi, menggunakan warna, font, dan gambar yang tepat. Ini membantu menciptakan pengalaman pengguna yang kohesif sejak awal.
   
4. Gunakan Alat yang Tepat: Flutter menyediakan plugin seperti flutter_native_splash untuk mempermudah pembuatan splash screen. Plugin ini memungkinkan kamu mengatur warna latar belakang, gambar, dan properti lainnya langsung dari file pubspec.yaml.
   

Kesalahan Umum yang Harus Dihindari

Ketika merancang splash screen yang efektif untuk aplikasi Flutter, berikut beberapa kesalahan umum yang perlu dihindari:

• Penggunaan Animasi Berlebihan: Meskipun animasi seperti Lottie bisa membuat splash screen lebih menarik, animasi yang terlalu kompleks dapat memperlambat waktu pemuatan dan merugikan pengalaman pengguna.
• Tidak Mengonfigurasi Kustomisasi untuk Setiap Platform: Pastikan kamu mengonfigurasi splash screen secara terpisah untuk Android dan iOS, terutama di file seperti AndroidManifest.xml dan LaunchScreen.storyboard.

Contoh Aplikasi Splash Screen di Flutter

Untuk membuat splash screen sederhana, kamu bisa menggunakan indikator pemuatan atau logo yang memudar. Berikut adalah potongan kode dasar untuk menambahkan spinner pemuatan sederhana:

dart

Salin kode

class SplashScreen extends StatefulWidget { @override _SplashScreenState createState() => _SplashScreenState(); } class _SplashScreenState extends State<SplashScreen> { @override void initState() { super.initState(); Future.delayed(Duration(seconds: 3), () { Navigator.pushReplacementNamed(context, ‘/home’); }); } @override Widget build(BuildContext context) { return Scaffold( backgroundColor: Colors.blue, body: Center(child: CircularProgressIndicator()), ); } }

Contoh ini menggunakan CircularProgressIndicator sementara aplikasi sedang memulai, dan berpindah ke layar utama setelah 3 detik.

Dengan mengikuti tips ini, kamu dapat membuat splash screen yang tidak hanya meningkatkan pengalaman pengguna tetapi juga mempertahankan kinerja aplikasi kamu.

Yuk Belajar Membuat Splash Screen Sederhana Menggunakan Flutter bersama ITBOX

Membuat splash screen di Flutter adalah langkah penting dalam membangun aplikasi mobile yang menarik. Dengan menggunakan teknik sederhana, kamu bisa menciptakan tampilan awal yang profesional.

Untuk pengembangan lebih lanjut, kamu dapat menambahkan animasi atau penyesuaian platform yang lebih kompleks.

Jika kamu ingin lebih mendalami Flutter, ITBOX menawarkan Kursus Flutter Online yang dapat membantu kamu menguasai berbagai aspek pengembangan aplikasi mobile. Segera daftar dan tingkatkan keterampilan Flutter kamu di ITBOX!