Tutorial Membuat Splash Screen Flutter Dengan Android Studio

Splash Screen yaitu tampilan awal yang terlihat oleh pengguna ketika aplikasi di luncurkan. Biasanya splash screen digunakan untuk menampilkan logo perusahaan atau logo aplikasi yang kemudian menampilkan halaman utama setelah beberapa detik saja. Di dalam tutorial belajar flutter kali ini kita akan mempelajari cara paling sederhana untuk membuat splash screen flutter dengan android studio.

Tahapan Membuat Splash Screen Flutter dengan Android Studio

1. Buat New Flutter Project

Membuat New Flutter Project di Android Studio
create new flutter project

2. import file gambar ke dalam project disini saya membuat folder baru bernama images dan di dalam folder images terdapat gambar yang ingin di jadikan tampilan awal

import file gambar di flutter
import gambar pada project

3. lalu kita akan membuat sebuah folder baru di lib/screen dimana kita akan menambahkan 2 file splashscreen.dart dan homescreen.dart di tempatkan :

addhomescreendansplash
create new folder di lib/screen

4. setting file images di file pubspec.yaml agar images yang akan kita tampilkan terbaca oleh sistem, setelah itu klik Pub get

5. kita membutuhkan package yang terdapat di https://pub.dev/ search di kolom pencarian lalu ketikkan splashscreen

pub2 2
splashscreen package

6. install package splashscreen yang telah kita copy dan paste di pubspec.yaml dibawah dependencies lalu klik pub get

dependencies : 
  splashscreen: ^1.2.0
splashdonepub
install package splashscreen

7. ubah code yang ada di lib/main.dart seperti dibawah ini :

import 'package:flutter/material.dart';
import 'package:belajarsplash/screen/splashscreen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Membuat SplashScreen',
      debugShowCheckedModeBanner: false,
      home: SplashScreenPage(),
    );
  }
}
  • Line 2 : import directory pada package:belajarsplash dengan directory screen yang terdapat file splashscreen.dart
  • Line 8 – 17 : membuat widget materialapp yang mengarahkan home ke class SplashScreenPage()

8. Setelah membuat code di main.dart langkah berikutnya kita akan membuat halaman splashscreen yang terdapat di directory screen.

import 'package:flutter/material.dart';
import 'package:belajarsplash/screen/homescreen.dart';
import 'package:splashscreen/splashscreen.dart';

class SplashScreenPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new SplashScreen(
        seconds: 5, //mengatur waktu 
        navigateAfterSeconds: HomeScreen(),
      title: new Text('contoh splash screen'),
      image: Image.asset('images/logobf.png'),
      photoSize: 150.0,
    );
  }
}

  • Line 2 : import package:belajarsplash directory screen dengan file homescreen.dart
  • Line 3 : import package:splashscreen yang telah di install sebelumnya
  • Line 8 – 16 : menggunakan widget SplashScreen lalu kita atur berapa lama saat splashscreen akan ditampilkan sebelum mengarah ke class HomeScreen() dan import images yang telah kita set dengan mengatur ukuran 150 px

9. Lalu yang terakhir adalah membuat code di homescreen.dart

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: new AppBar(
        title: new Text('Home'),
      ),
      body: new Center(
        child: new Text('Selamat Belajar Flutter', style: TextStyle(fontSize: 20.0),),
      ),
    );
  }
}

output :

Tutorial Membuat Splash Screen Flutter Dengan Android Studio
output splashscreen

Full Source Code :

https://github.com/herry88/belajarflutter/tree/master/belajarsplash

Sumber :

https://pub.dev/packages/splashscreen/example
https://pub.dev/documentation/splashscreen/latest/
https://pub.dev/documentation/splashscreen/latest/splashscreen/SplashScreen-class.html

Default image
Herry Prasetyo
Today a reader Tomorrow a Leader

Leave a Reply