Membuat splash screen flutter dengan mudah

Bismillaahirrohmaanirrohiim…

Saat membuat aplikasi android / ios, yang pertama dibuat biasanya adalah splash screen. Di sini saya akan mencoba membuat splash screen di flutter dengan mudah.

Saat membuat program flutter, saya lebih menyukai menggunakan editor VS Code (Visual Studio Code) daripada android studio. Hal ini karena VS Code terasa lebih ringan dan ekstensi untuk flutter sudah lengkap, plus emulator pakai chrome driver otomatis. Jadi tidak perlu install macam-macam program yang berat, itu.

Langkah-lengkah membuat splash screen dengan flutter:

1. Buat Project Baru
2. Membuat halaman home
3. Membuat halaman splash screen
4. Mengkonfigurasi halaman main.dart

1. Buat Project Baru

Jika sudah membuat project, silahkan skip dan lanjut ke langkah selanjutnya.

Untuk membuat project baru, buka VS Code, klik menu View => Command Pallete (bisa juga dengan kombinasi keyboard Ctrl+Shif+P).
Klik “Flutter: new project” lalu isikan nama project misalnya “belajarflutter“, kemudian enter. Tunggu beberapa saat, semua struktur kode akan otomatis dibuatkan oleh VS Code.

2. Membuat halaman Home

Buat folder “home” di dalam folder “lib“, kemudian buat file “home_view.dart” di dalam folder lib tadi, alamat file pathnya akan menjadi /lib/home/home_view.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('App Fluterku'),
      ),
      body: Center(
        child: Text('Home Page'),
      ),
    );
  }
}

3. Membuat halaman splash screen

Buat file dengan nama “splashscreen_view.dart” di dalam folder lib, file pathnya menjadi /lib/splashscreen_view.dart

import 'dart:async';

import 'package:flutter/material.dart';
import 'package:belajarflutter/home/home_view.dart';

class SplashScreenPage extends StatefulWidget {
  const SplashScreenPage({ Key? key }) : super(key: key);

  @override
  _SplashScreenPageState createState() => _SplashScreenPageState();
}

class _SplashScreenPageState extends State<SplashScreenPage> {
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    openSplashScreen();
  }

  openSplashScreen() async {
    //bisa diganti beberapa detik sesuai keinginan
    var durasiSplash = const Duration(seconds: 2);

    return Timer(durasiSplash, () {
      //pindah ke halaman home
      Navigator.of(context).pushReplacement(
        MaterialPageRoute(builder: (_) {
          return HomePage();
        })
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Image.asset(
          "assets/images/splash.png",
          width: 200,
          height: 88,
        ),
      ),
    );
  }
}

Coba perhatikan kode di atas, ada assets gambar yang akan ditampilkan pada splash screen.

Di flutter, alamat gambar harus dimasukkan di dalam file pubspec.yaml, buka file tersebut lalu masukkan kode seperti di bawah ini:

flutter:
  assets:
    - assets/images/splash.png

Anda harus mempunyai file gambar splash.png yang dimasukkan dalam folder “assets/images/“, kalau belum ada buat folder tersebut.

4. Mengkonfigurasi halaman main.dart

Buka file “main.dart“, lalu isikan kode di bawah ini:

import 'package:flutter/material.dart';
import 'package:belajarflutter/splashscreen_view.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({ Key? key }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'App Fluterku',
      home: SplashScreenPage(),
    );
  }
}

Setelah semua langkah tersebut dilakukan, coba jalankan dengan perintah F5 atau klik menu Run => Start Debuging.

Tunggu sampai program membuka emulator dan hasilnya silahkan dilihat. Sangat mudah bukan….

Demikian semoga bermanfaat.