Berikut adalah cara membuat splash Screen :
1. Buat Project
Buka VS Code, klik menu View => Command Pallete ( Ctrl+Shif+P ).
Klik “Flutter: new project” lalu isikan nama project misalnya “splashscreen“, kemudian enter.
2. Membuat halaman Home
Buat folder “home” di dalam folder “lib“, kemudian buat file “home_view.dart” di dalam folder lib, ( /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, ( /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,
),
),
);
}
}
Catatan : 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
Masuk file gambar splash.png pada folder “assets/images/“
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 itu jalankan dengan perintah F5 atau klik menu Run => Start Debuging.
