Membuat Splash Screen pada Flutter tanpa Library

Hallo teman–teman,

Pada kesempatan kali ini saya ingin berbagi cara membuat splash screen pada Flutter tanpa menggunakan library tambahan. Seperti yang kita ketahui bersama, salah satu komponen penting dalam pembuatan aplikasi yang akan sering digunakan dalam proses development adalah splash screen

Splash screen adalah halaman atau tampilan awal yang muncul pertama kali ketika aplikasi dijalankan. Biasanya splash screen digunakan untuk menampilkan logo, nama aplikasi, atau animasi singkat sebelum pengguna diarahkan ke halaman utama aplikasi.

Mengapa Perlu Splash Screen ?

Splash screen bukan hanya sekadar pemanis tampilan awal, tetapi juga memiliki beberapa fungsi penting, seperti :

• Memberikan waktu bagi aplikasi untuk melakukan proses inisialisasi awal
• Menunjukkan identitas brand dari aplikasi Anda
• Memberikan pengalaman pengguna yang lebih profesional dan menarik.

Langkah-langkah Membuat Splash Screen Tanpa Library

Berikut langkah-langkah sederhana untuk membuat splash screen di Flutter tanpa library tambahan.

1. Buat Project Baru Flutter

Pertama, buat project baru dengan perintah berikut di terminal :

flutter create splash_screen_app

2. Masuk ke folder project :

cd splash_screen_app

3. Buat File Baru untuk Splash Screen

Buat file baru dengan nama splash_screen.dart di dalam folder lib.

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

class SplashScreen extends StatefulWidget {
  const SplashScreen({super.key});

  @override
  State<SplashScreen> createState() => _SplashScreenState();
}

class _SplashScreenState extends State<SplashScreen> {
  @override
  void initState() {
    super.initState();

    Timer(const Duration(seconds: 3), () {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => const HomePage()),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blueAccent,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Icon(Icons.flutter_dash, size: 100, color: Colors.white),
            SizedBox(height: 20),
            Text(
              "My Flutter App",
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
                color: Colors.white,
              ),
            ),
          ],
        ),
      ),
    );
  }
}

4. Buat Halaman Utama (Home Page)

Buat file home_page.dart di folder lib/.

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text("Home Page")),
      body: const Center(
        child: Text(
          "Selamat datang di halaman utama!",
          style: TextStyle(fontSize: 20),
        ),
      ),
    );
  }
}

5. Panggil SplashScreen di main.dart

Edit file main.dart agar memanggil SplashScreen sebagai halaman pertama :

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Splash Screen App',
      theme: ThemeData(primarySwatch: Colors.blue),
      home: const SplashScreen(),
    );
  }
}

Langkah Terakhir :

6. Jalankan Aplikasi

flutter run

Ketika aplikasi dijalankan, tampilan pertama yang muncul adalah splash screen dengan logo dan nama aplikasi. Setelah 3 detik, halaman akan otomatis berpindah ke Home Page.

Penutup

Nah, teman–teman, itulah cara mudah membuat Splash Screen di Flutter tanpa menggunakan library tambahan.

Dengan cara ini, Anda bisa menyesuaikan tampilan splash screen sesuai kebutuhan, seperti menambahkan animasi, gambar, atau efek transisi.

Semoga tutorial ini bermanfaat dan membantu Anda dalam mengembangkan aplikasi Flutter yang lebih menarik dan profesional.

Selamat mencoba 🚀