Membuat Splash Screen pada Flutter tanpa Library

Hallo teman – teman pada kesempatan kali ini saya ingin berbagi cara membuat splash screen pada flutter. Seperti yang kita ketahui bersama bahwa salah satu component yang penting dalam pembuatan aplikasi yang akan lebih sering digunakan dalam proses developmentnya adalah splash screen, dimana splash screen ini adalah halaman / screen yang akan pertama kali tampil / muncul ketika kita menjalankan aplikasi untuk pertama kalinya. Adapula onBoarding screen yang digunakan untuk memperkenalkan cara penggunaan aplikasi yang kita develop. Namun, untuk saat ini kita fokuskan pada splash screen.

untuk langkah pertamanya buat lah sebuah file bernama splashscreen.dart

Karena widget yang akan kita gunakan bersifat dinamis atau terdapat sebuah perubahan maka menggunakan StatefulWidget

sehingga didalam file splash screen seperti berikut :

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:movie_app/main.dart';

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
@override
Widget build(BuildContext context) {
  return Scaffold()
 }
}

untuk membuat sebuah class stateful, kita tinggal menuliskan stf lalu android studio akan otomatis memberikan saran dan kita tinggal memilih StatefulWidget

setelah itu didalam class _SplashScreenState tepatnya diatas @override Widget build , buat lah sebuah method yang nantinya akan digunakan untuk mengatur waktu/ durasi dari splash screen ke halaman home. Seperti berikut :

startSplashScreen() async {
  var duration = const Duration(seconds: 5);
  return Timer(duration, () {
    Navigator.of(context).pushReplacement(
        MaterialPageRoute(builder: (context) => MovieHome()));
  });
}

pada widget Timer diatas nantinya akan berisi beberapa property yang pertama duration yang kedua callback, pada callback kita ganti dengan navigator yang mengarah ke movieHome(), dengan menggunakan method pushReplacement() tujuannya agar setelah berpindah ke halaman home tidak dapat kembali lagi ke halaman splashscreen.

Setelah itu panggil method startSplashScreen() pada initState() fungsi dari initState() ini sendiri digunakan sebagai fungsi yang pertama kali dipanggil ketika aplikasi pertama kali di jalankan. Sehingga seperti berikut:

@override
void initState() {
super.initState();
startSplashScreen();
}

setelah kita men-set duration / waktu pada splash screen kita memerlukan sebuah image untuk di gunakan sebagai tampilan splash screen kita nantinya. tambahkan sebuah image ke dalam sebuah folder assets yang telah kita buat sebelumnya. seperti berikut:

setelah itu untuk dapat memanggil image / gambar didalam folder assets terlebih dahulu kita tambahkan pada file pubspec.yaml :

pastikan penulisan folder pada assets tidak keliru karna apabila keliru maka ketika aplikasi kita jalankan akan terdapat error pada pubspec.yaml atau image tidak akan ter-load oleh aplikasi kita nanti sehingga image tidak dapat muncul.

setelah itu lakukan pub get melalui terminal atau dapat menekan tombol pub get di atas sebelah kanan.

Setelah itu kita akan mulai membuat tampilan pada splash screen kita. tambahkan lah code ini pada file splashscreen :

return Scaffold(
backgroundColor: Colors.blueGrey,
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Center(
child: Image.asset(
"assets/splash.png",
width: 200.0,
height: 100.0,
fit: BoxFit.contain,
),
),
SizedBox(
height: 24.0,
),
Text(
"MOVIE APPS",
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 30.0,
),
),
],
),
);

karna kita membuat file baru dan root file terdapat pada main.dart sehingga aplikasi yang akan dijalankan pertama kali oleh aplikasi adalah main.dart secara default. karena di flutter tidak terdapat manifest seperti halnya saat kita mengoding Android menggunakan kotlin. maka kita harus mengarahkan root file tersebut ke splash screen seperti berikut :

import 'package:movie_app/splash_screen.dart';

void main() {
runApp(MyApp());
}

class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Aplikasi Movie',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: SplashScreen(),
);
}
}

ketika aplikasi kita jalankan maka tampilan dari splashscreen akan seperti berikut :

Leave a Comment