Tutorial Membuat Splash Screen dengan Flutter

Tutorial Membuat Splash Screen dengan Flutter Bahasa Indonesia
Tutorial Membuat Splash Screen dengan Flutter Bahasa Indonesia
Codingtive.com - Splashscreen merupakan tampilan saat pertama kali aplikasi dibuka dan biasanya hanya berlangsung beberapa detik. Codingtive menyediakan tutorial flutter bahasa Indonesia mulai dari pemula. Pada tutorial ini kita akan belajar membuat splash screen flutter dengan menggunakan timer untuk mengatur waktunya.

Dalam pembuatan splashscreen menggunakan Flutter juga kalian akan belajar navigator untuk berpindah halaman. Untuk artikel lengkapnya kalian dapat mempelajarinya Tutorial Flutter Cara Mudah Berpindah Halaman.

Sekarang kita akan mencoba membuatnya, ikuti langkah-langkah berikut :

1. Membuat project flutter

Pertama, buatlah project flutter dan pastikan saat membuat project laptop kalian terkoneksi dengan internet. Untuk contoh projectnya saya beri nama flutter_splashscreen. Setelah selesai membuat project, pastikan dapat dijalankan dengan emulator atau real device.

2. Membuat splashscreen

Kemudian pada folder lib, buatlah file baru dan beri nama splashscreen_view.dart. Pada file tersebut kita akan membuat untuk halaman splashscreen dan menggunakan Timer untuk pengaturan durasi waktu.

Pertama tambahkan import untuk library material dan async. Kodenya seperti berikut :
import 'package:flutter/material.dart';
import 'dart:async';
Karena widget yang akan kita buat bersifat dinamis maka menggunakan StatefulWidget, Buatlah 2 class untuk StatefulWidget halaman splashscreen. Tambahkan kode dibawah import :
class SplashScreenPage extends StatefulWidget {
  @override
  _SplashScreenPageState createState() => _SplashScreenPageState();
}

class _SplashScreenPageState extends State<SplashScreenPage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      
    );
  }
}
Selanjutnya kita akan membuat tampilan untuk menampilkan gambar pada halaman splashscreen. Kalian dapat menggunakan contoh gambar apapun, ikuti langkah berikut :

1. Buat folder baru pada project dan beri nama images, kemudian kita perlu melakukan registrasi assets gambarnya supaya dapat diakses. Buka file pubspec.yaml, dibawah uses-material-design: true terdapat pengaturan untuk assets, ubah kodenya yang dikomentar menjadi seperti berikut :
assets:
  - images/
2. Tambahkan kode pada file splashscreen_view.dart pada bagian return Scaffold() menjadi seperti berikut :
return Scaffold(
  backgroundColor: Color(0xff329cef),
  body: Center(
    child: Image.asset(
      "images/logo.png",
      width: 200.0,
      height: 100.0,
    ),
  ),
);

3. Membuat halaman home

Sebelum membuat fungsi berpindah dari splashscreen ke halaman home, kita buat terlebih dahulu halaman setelah splashscreen ditampilkan. Buat file baru pada folder lib dan beri nama home_view.dart. Tambahkan kode berikut :
import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Text("Ini halaman home"),
      ),
    );
  }
}
Buka file splashscreen_view.dart dan sekarang tambahkan import untuk halaman home dengan kode berikut :
import 'package:flutter_splashscreen/home_view.dart';

4. Menggunakan Timer

Timer digunakan untuk mengatur waktu splashscreen ditampilkan, buat method baru untuk mengatur durasi waktu dan berpindah ke halaman home. Tambahkan kodenya diatas @override Widget build() :
startSplashScreen() async {
  var duration = const Duration(seconds: 5);
  return Timer(duration, () {
    Navigator.of(context).pushReplacement(
      MaterialPageRoute(builder: (_) {
        return HomePage();
      }),
    );
  });
}
Untuk mengubah durasi waktu, ganti value pada bagian seconds.
Penggunaan method .pushReplacement() bertujuan supaya setelah berpindah ke halaman home, tidak dapat kembali lagi ke halaman splashscreen.

Panggil method startSplashScreen() yang sudah kita buat saat initState, tambahkan kode berikut diatas method startSplashScreen() :
@override
void initState() { 
  super.initState();
  startSplashScreen();
}

5. Finishing

Sebelum mencoba menjalankan, buka file main.dart pada folder lib. Hapus semua kode didalamnya dan ganti menjadi seperti berikut :
import 'package:flutter/material.dart';
import 'package:flutter_splashscreen/splashscreen_view.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Splash Screen',
    home: SplashScreenPage(),
  ));
}
Pada kode diatas, class yang pertama kali dipanggil yaitu SplashScreenPage().

Selanjutnya karena kita mengubah class pada file main.dart supaya tidak ada error, buka file widget_test.dart pada folder test. Kemudian komentar kode await tester.pumpWidget(MyApp()); dan import main.dart sehingga menjadi seperti berikut :
//import 'package:flutter_splashscreen/main.dart';
//await tester.pumpWidget(MyApp());
Sekarang kalian dapat menjalankan aplikasinya di emulator atau real device.

Source Code Lengkap

lib/main.dart
import 'package:flutter/material.dart';
import 'package:flutter_splashscreen/splashscreen_view.dart';

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    title: 'Splash Screen',
    home: SplashScreenPage(),
  ));
}
lib/splashscreen_view.dart
import 'package:flutter/material.dart';
import 'package:flutter_splashscreen/home_view.dart';
import 'dart:async';

class SplashScreenPage extends StatefulWidget {
  @override
  _SplashScreenPageState createState() => _SplashScreenPageState();
}

class _SplashScreenPageState extends State<SplashScreenPage> {

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

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

  @override
  Widget build(BuildContext context) {
  return Scaffold(
    backgroundColor: Color(0xff329cef),
    body: Center(
      child: Image.asset(
        "images/logo.png",
        width: 200.0,
        height: 100.0,
      ),
    ),
  );
  }
}
lib/home_view.dart
import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home Page'),
      ),
      body: Center(
        child: Text("Ini halaman home"),
      ),
    );
  }
}

Hasil

Tutorial membuat splash screen flutter bahasa indonesiaTutorial membuat splash screen flutter bahasa indonesia
Demikian Tutorial Membuat Splash Screen dengan Flutter, codingtive akan update tutorial flutter bahasa Indonesia. Jika teman-teman ada pertanyaan dapat melalui kolom komentar. Tunggu tutorial berikutnya ya.

Berlangganan update artikel terbaru via email:

Belum ada Komentar untuk "Tutorial Membuat Splash Screen dengan Flutter"

Posting Komentar

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel