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

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),),
      ),
    );
  }
}