Tutorial Menciptakan Splash Screen Dengan Flutter

Tutorial Membuat Splash Screen dengan Flutter Bahasa Indonesia

- Splashscreen merupakan tampilan ketika pertama kali aplikasi dibuka dan biasanya hanya berlangsung beberapa detik. Codingtive menyediakan tutorial flutter bahasa Indonesia mulai dari pemula. Pada tutorial ini kita akan berguru menciptakan splash screen flutter dengan memakai timer untuk mengatur waktunya.

Dalam pembuatan splashscreen memakai Flutter juga kalian akan berguru navigator untuk berpindah halaman. Untuk artikel lengkapnya kalian sanggup mempelajarinya Tutorial Flutter Cara Praktis Berpindah Halaman.

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

1. Membuat project flutter

Pertama, buatlah project flutter dan pastikan ketika menciptakan project laptop kalian terkoneksi dengan internet. Untuk rujukan projectnya aku beri nama flutter_splashscreen. Setelah akibat menciptakan project, pastikan sanggup dijalankan dengan emulator atau real device.

2. Membuat splashscreen

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

Pertama tambahkan import untuk library material dan async. Kodenya ibarat berikut :

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

Karena widget yang akan kita buat bersifat dinamis maka memakai StatefulWidget, Buatlah 2 class untuk StatefulWidget halaman splashscreen. Tambahkan aba-aba 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 menciptakan tampilan untuk menampilkan gambar pada halaman splashscreen. Kalian sanggup memakai rujukan gambar apapun, ikuti langkah berikut :

1. Buat folder gres pada project dan beri nama images, kemudian kita perlu melaksanakan pendaftaran assets gambarnya semoga sanggup diakses. Buka file pubspec.yaml, dibawah uses-material-design: true terdapat pengaturan untuk assets, ubah kodenya yang dikomentar menjadi ibarat berikut :

assets:   - images/

2. Tambahkan aba-aba pada file splashscreen_view.dart pada bab return Scaffold() menjadi ibarat 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 menciptakan fungsi berpindah dari splashscreen ke halaman home, kita buat terlebih dahulu halaman sehabis splashscreen ditampilkan. Buat file gres pada folder lib dan beri nama home_view.dart. Tambahkan aba-aba 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 kini tambahkan import untuk halaman home dengan aba-aba berikut :

import 'package:flutter_splashscreen/home_view.dart';

4. Menggunakan Timer

Timer dipakai untuk mengatur waktu splashscreen ditampilkan, buat method gres 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 bab seconds.

Penggunaan method .pushReplacement() bertujuan semoga sehabis berpindah ke halaman home, tidak sanggup kembali lagi ke halaman splashscreen.

Panggil method startSplashScreen() yang sudah kita buat ketika initState, tambahkan aba-aba berikut diatas method startSplashScreen() :

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

5. Finishing

Sebelum mencoba menjalankan, buka file main.dart pada folder lib. Hapus semua aba-aba didalamnya dan ganti menjadi ibarat 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 aba-aba diatas, class yang pertama kali dipanggil yaitu SplashScreenPage().

Selanjutnya alasannya ialah kita mengubah class pada file main.dart semoga tidak ada error, buka file widget_test.dart pada folder test. Kemudian komentar kode await tester.pumpWidget(MyApp()); dan import main.dart sehingga menjadi ibarat berikut :

//import 'package:flutter_splashscreen/main.dart'; //await tester.pumpWidget(MyApp());

Sekarang kalian sanggup 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

Demikian Tutorial Membuat Splash Screen dengan Flutter, codingtive akan update tutorial flutter bahasa Indonesia. Jika teman-teman ada pertanyaan sanggup melalui kolom komentar. Tunggu tutorial berikutnya ya.