2. Membuat Splash Screen

1. Atur Pubspec

Hal yang pertama yang akan kita mulai untuk memulai project ini adalah membuat splash screen maka dari itu buatlah sebuah folder baru dengan nama assets & di dalam folder assets buat folder baru kembali dengan nama img. Daftarkan folder yang sudah dibuat pada pubspec.yaml

pubspec.yaml

assets:
    - assets/img/

harap diperhatikan jarak tabnya jika menyalin kode ini

2. Buat File

Pada folder ui buat file baru dengan nama splashscreen.dart dan home.dart lalu buat kodenya seperti ini :

home.dart

import 'package:flutter/material.dart';

class Home extends StatelessWidget {
  const Home({super.key});

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

Lakukan hal yang sama pada splashscreen.dart

3. Atur Main

Untuk membuat splashscreen kuncinya pada file main.dart. Buatlah main menjadi seperti ini :

main.dart

// ignore_for_file: prefer_const_constructors, use_key_in_widget_constructors

import 'package:flutter/material.dart';
import 'package:travel_app/ui/home.dart';
import 'package:travel_app/ui/splashscreen.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FutureBuilder(
        future: Future.delayed(Duration(seconds: 3)),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done) {
            return MaterialApp(
              title: 'Flutter Demo',
              debugShowCheckedModeBanner: false,
              initialRoute: '/',
              routes: {
                '/': (context) => Home(),
                '/splash': (context) => SplashScreen()
              },
            );
          }

          return SplashScreen();
        });
  }
}

Keterangan

• Jika ada error pada widget_test.dart hapus saja constnya
• Disini kita menggunakan builder yakni Future Builder yang merupakan sebuah proses yang akan memproses kejadian yang akan datang / tidak harus dikerjakan sekarang. Kenapa menggunkan future builder ? karena kita membutuhkan aplikasi berhenti(delay) agar splashscreen dapat di lihat oleh pengguna
• Future builder memiliki 2 parameter yang harus kita isi yakni future : prosesnya dan builder : aksinya.
• connectionState : adalah sebuah kondisi future yang kita bisa dapatnya. Kondisi di dalam future ada 4 active, done, none, waiting. jadi untuk kode diatas menyatakan jika future builder telah menyelesaikan prosesnya (delay 3 detik) maka connectionStatenya yang sebelumnya waiting akan berubah menjadi done.

4. Membuat Tampilan Splash Screen

Setelah pengaturan splashscreen sudah selesai kita atur selanjutnya tinggal tampilan dari splashscreen tersebut yang harus kita buat. Maka dari itu masukkan kode dibawah ini :

splashscreen.dart

// ignore_for_file: prefer_const_constructors, avoid_unnecessary_containers, sized_box_for_whitespace

import 'package:flutter/material.dart';

class SplashScreen extends StatelessWidget {
  const SplashScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Column(
          children: [
            Container(
                height: MediaQuery.of(context).size.height * 0.9,
                child: Center(child: Image.asset("assets/img/traver.png"))),
            Center(
              child: Text("Version 1.1.0"),
            )
          ],
        ),
      ),
    );
  }
}