Flutter Tutorial : Membuat Splash Screen Sederhana

Hello people spirit of learning!

Dalam setiap aplikasi yang kita pakai,kita sering melihat pertama kali kita membuka aplikasi kita diarahkan ke dalam halaman yang berisi logo saja dan beberapa detik kemudian, kita diarahkan ke dalam halaman Login page atau Onboarding page. Nah itu biasa disebut Splash Screen. Yang dimana halaman awal dibuka saat aplikasi dijalankan. Disini kita akan membuat Splash Screen sederhana. Pastikan sudah mengerti memasukkan assets ke dalam flutter. kalau belum bisa membaca dokumentasi disini.

1) Membuat 2 File

class splash_screen extends StatefulWidget {
@override
_splash_screenState createState() => _splash_screenState();
  }

class _splash_screenState extends State {
@override
Widget build(BuildContext context) {
return Scaffold()
}
}

Langkah awal untuk membuat splash screen adalah kita membuat file untuk splash screen dan halaman yang akan kita tuju. Disini kita membuat blank screen saja untuk dituju. Pada halaman splash screen,kita menggunakan StatefulWidget karena widget yang akan kita gunakan bersifat dinamis dan terdapat sebuah perubahan.

Teruntuk halaman blank screen, Berikut hasil gambar dan codenya.

import 'package:flutter/material.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';
class blank_screen extends StatelessWidget {
const blank_screen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xff65005C),
);
}
}

2) Membuat Fungsi Durasi waktu

delayScreen() async {
var duration = Duration(seconds: 5);
Timer(
duration,
() {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => blank_screen(),
));
},
);

Pada class_splash_screenState tepat diatas @override Widget Build, kita membuat Function mengatur waktu dari splash screen ke halaman home.

Disini untuk mengatur waktu nya, kita menggunakan widget Timer yang berisi 2 properti yaitu duration dan callback. properti duration yang bertipe widget Duration() berfungsi untuk mengatur waktu durasi yang kita inginkan. Sedangkan callback adalah fungsi yang akan dijalankan setelah Durasi(duration) waktunya telah habis.

pada function callback, akan kita isi dengan widget Navigator yang mengarah ke blank_screen() atau mengarah ke halaman yang dituju. Tipe Navigator yang kita pakai adalah pushReplacement, yang bertujuan agar setelah pindah halaman maka tidak bisa balik lagi ke halaman splash Screen.

3) Panggil Fungsi Durasi Waktunya pada initState

@override
void initState() {
// TODO: implement initState
super.initState();
delayScreen();
}

Fungsi dari initState() sendiri digunakan sebagai fungsi yang pertama kali dipanggil ketika aplikasi pertama kali dijalankan.

4) Membuat Tampilan Splash Screen

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';
import 'package:tutorial_artikel/blank_screen.dart';

class splash_screen extends StatefulWidget {
const splash_screen({Key? key}) : super(key: key);
@override
State createState() => _splash_screenState();
}
class _splash_screenState extends State {
delayScreen() async {
var duration = Duration(seconds: 5);
Timer(
duration,
() {
Navigator.pushReplacement(
context,
MaterialPageRoute(
builder: (context) => blank_screen(),
));
},
);
}
@override
void initState() {
// TODO: implement initState
super.initState();
delayScreen();
}
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Image.asset(
'assets/brand.png',
width: 242,
),
),
);
}
}

Disini kita membuat tampilan Splash Screen-nya. Pada Image.assets(). argumennya kita isi sesuai dengan apa yang sudah kalian masukkan assetsnya ke dalam flutter. Jadi jangan sampai salah ya nanti akan terjadi Logic Error.

Setelah kita membuat tampilannya, Maka kita mulai debug. Dan hasilnya akan seperti ini

Semoga bermanfaat dan Terima Kasih!

Perfect Place To Begin Your Career Development

BuildWith Angga.