Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Tutorial Flutter #6 – Cara Membuat Splashscreen

2 min read

Tutorial Flutter

Tutorial kali ini akan membahas cara membuat splashscreen di flutter. Splashscreen biasa digunakan pada saat pertama kali membuka aplikasi. Hampir semua aplikasi berbasis mobile mengunakan splashscreen.

Membuat splashscreen di flutter bisa dikatakan sangat mudah. Hanya membutuhkan dua file saja untuk mencobanya. File pertama untuk Class Splashscreen. File kedua adalah Class Home.

Cara Mudah Membuat Splashscreen di Flutter

Tanpa bermaksud lama-lama, mari kita mulai ngodingnya!

Step #1 – Buat file project flutter

flutter create --org=com.ilmucoding --androidx --description="Membuat Splashscreen di Flutter" flutter_splashscreen

Step #2 – Buat file baru dengan nama splashscreen.dart di dalam folder lib.

Isi dari splashscreen.dart tersebut bisa Anda ikuti seperti ini:

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

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

class _SplashScreen extends State<SplashScreen>{

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

  startSplashScreen () async {
    var duration = const Duration(seconds: 3);
    return Timer(duration, (){
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => Login()),
      );
    });
  }

  @override
  Widget build(BuildContext context){
    return Scaffold(
      backgroundColor: Colors.purple,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Icon(Icons.school,
              size: 100.0,
              color: Colors.white,
            ),
            SizedBox(height: 24.0),
            Text(
              "SEKOLAHKU",
              style: TextStyle(fontSize: 30, fontWeight: FontWeight.bold, color: Colors.white),
            ),
          ],
        ),
      ),
    );
  }
}

Kami paham maksudnya, Anda butuh penjelasan kan?

Baik …

Perhatikan ya.

Baris ke 1 merupakan import async bawaan dart. Jadi Anda tidak perlu menginstall apapun.

Baris ke 2 adalah hal yang biasa di flutter. Material.dart ini selalu ada di setiap file yang berguna untuk membangun aplikasi.

Pada baris 4 – 7 kami menggunakan StatefulWidget karena Class ini selalu berubah-ubah. Bila Anda tidak keberatan silahkan kunjungi artikel perbedaan StatelessWidget dan StatefulWidget dahulu. Class yang kami buat bernama Splashscreen. Karena itu, file ini wajib diketahui untuk dipanggil di main.dart nanti.

Baris ke 9 merupakan class turunan dari class Splashscreen. Di mana isi di dalamnya berupa state-state yang bisa diset maupun diget.

Baris ke 11 – 24 merupakan function yang akan dijalankan pertama kali saat aplikasi di jalankan. Buktinya dengan manambahkan void initState(). Dengan function ini, maka apa yang ada di dalamnya akan dijalankan pada saat class Splashscreen dipanggil.

Kebetulan yang dijalankan adalah function startSplashScreen(). Jadi function inilah yang dijalankan pertama kali saat class Splashscreen dipanggil.

Di dalam function itu terdapat duration dan timer. Dan yang tidak kalah ketinggalan adalah async. Kita bisa mengatur berapa durasi splashscreen yang dibutuhkan pada baris:

 var duration = const Duration(seconds: 3); 

Silahkan ubah di angka yang kami cetak tebal.

Kemudian Anda juga bisa mengatur setelah class Splashscreen di jalankan akan menuju ke class mana.

Perhatikan potongan kode berikut:

return Timer(duration, (){
  Navigator.push(
    context,
    MaterialPageRoute(builder: (context) => Login()),
  );
}); 

Contoh di atas, kami memanggil class Login. Anda bisa menyesuaikan sesuai aplikasi.

Baris ke 27 – 48 merupakan Widget yang akan ditampilkan saat class SplashScreen dipanggil. Terdapat 2 component Widget penting di dalamnya. Keduanya dibungkus dengan Column Widget.

Pertama widget Icon. Kami menggunakan widget ini sebagai alternatif apabila Anda tidak memiliki file gambar.

Kedua, Text. Widget ini saya gunakan untuk memberi keterangan aplikasi. Anda bisa menyesuaikan sesuai kebutuhan.

Cara Menjalankan Class Splashscreen

Kondisinya kami ingin menjalankan class ini. Oleh karena itu silahkan Anda buka file main.dart, kemudian cari kode:

home:  MyHomePage (title: 'Flutter Demo Homepage') 

Ubah menjadi:

home:  Splashscreen()  

Sekarang Anda sudah bisa menjalankan command ini:

flutter run

Hasilnya:

Semoga artikel ini bermanfaat dan bisa membantu. Aamiin.

Ilmu Coding Ilmucoding.com - Merupakan situs yang membantu Anda belajar coding lebih mudah, nyaman, interaktif dan profesional. Belajar sekarang di ilmu coding. GRATIS

Leave a Reply

Your email address will not be published. Required fields are marked *

Jika terbantu dengan artikel ini, silahkan share, beri komentar dan "klik" 1 kali pada iklan ya.