Cara Membuat Splash Screen di Flutter untuk Pemula

Haii teman Radar! Kamu pasti sering melihat aplikasi-aplikasi modern yang memiliki tampilan awal yang menarik, bukan? Biasanya tampilan awal tersebut berupa sebuah halaman yang muncul ketika kita membuka aplikasi. Halaman tersebut dinamakan Splash Screen. Splash Screen menjadi salah satu faktor penting dalam membuat aplikasi yang menarik. Di artikel ini, kita akan belajar cara membuat Splash Screen di Flutter.

Apa itu Splash Screen?

Sebelum kita membahas cara membuat Splash Screen di Flutter, mari kita pahami terlebih dahulu apa itu Splash Screen. Splash Screen adalah tampilan awal yang muncul ketika kita membuka sebuah aplikasi. Tampilan ini biasanya berisi logo, nama aplikasi, atau animasi yang menarik. Splash Screen memiliki peran penting dalam memberikan kesan pertama bagi pengguna dan meningkatkan pengalaman pengguna dalam menggunakan aplikasi.

Mengapa Splash Screen Penting?

Splash Screen memiliki peran penting dalam aplikasi karena dapat meningkatkan pengalaman pengguna. Dengan adanya Splash Screen, pengguna dapat merasakan pengalaman yang lebih baik dalam menggunakan aplikasi. Splash Screen juga dapat memberikan kesan profesional bagi aplikasi yang kita buat.

Cara Membuat Splash Screen di Flutter

Untuk membuat Splash Screen di Flutter, kita perlu mengikuti beberapa langkah. Berikut adalah langkah-langkahnya:

1. Membuat Gambar Splash Screen

Langkah pertama dalam membuat Splash Screen di Flutter adalah membuat gambar Splash Screen. Gambar Splash Screen ini akan muncul ketika aplikasi kita dibuka. Untuk membuat gambar Splash Screen, kamu bisa menggunakan software desain grafis seperti Adobe Photoshop, Adobe Illustrator, atau software sejenisnya.

2. Menambahkan Gambar Splash Screen ke dalam Proyek Flutter

Setelah kita membuat gambar Splash Screen, langkah selanjutnya adalah menambahkan gambar tersebut ke dalam proyek Flutter. Untuk menambahkan gambar, kita perlu menyimpan gambar tersebut ke dalam folder assets di dalam proyek Flutter. Folder assets dapat ditemukan di dalam folder utama proyek Flutter. Jangan lupa untuk menambahkan baris kode berikut di dalam file pubspec.yaml:

  assets:
    - assets/splash.png

Dalam contoh ini, gambar Splash Screen bernama splash.png dan disimpan di dalam folder assets.

3. Membuat Widget untuk Splash Screen

Setelah kita menambahkan gambar Splash Screen ke dalam proyek, langkah selanjutnya adalah membuat widget untuk Splash Screen. Widget Splash Screen ini akan menampilkan gambar Splash Screen yang telah kita buat sebelumnya. Berikut adalah contoh kode untuk membuat widget Splash Screen:

class SplashScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/splash.png'),
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

Widget ini akan menampilkan gambar Splash Screen yang telah kita buat sebelumnya dengan menggunakan fitur BoxDecoration pada Flutter. Kita menggunakan AssetImage untuk menambahkan gambar Splash Screen dari folder assets. Kita juga menggunakan fit: BoxFit.cover untuk memastikan gambar terlihat penuh pada layar perangkat.

4. Mengatur Durasi Tampilan Splash Screen

Setelah membuat widget Splash Screen, langkah selanjutnya adalah mengatur durasi tampilan Splash Screen. Kita ingin Splash Screen tampil selama beberapa detik sebelum masuk ke halaman utama aplikasi. Berikut adalah contoh kode untuk mengatur durasi tampilan Splash Screen:

class SplashScreen extends StatefulWidget {
  @override
  _SplashScreenState createState() => _SplashScreenState();
}

class _SplashScreenState extends State {
  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 3), () {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        decoration: BoxDecoration(
          image: DecorationImage(
            image: AssetImage('assets/splash.png'),
            fit: BoxFit.cover,
          ),
        ),
      ),
    );
  }
}

Pada kode di atas, kita menggunakan initState untuk memanggil fungsi Future.delayed yang mengatur durasi tampilan Splash Screen selama 3 detik. Setelah 3 detik, aplikasi akan otomatis pindah ke halaman utama yang diwakili oleh HomeScreen(). Kita juga menggunakan pushReplacement agar halaman Splash Screen tidak dapat diakses kembali setelah pindah ke halaman utama.

5. Menambahkan Splash Screen ke dalam Route

Setelah mengatur durasi tampilan Splash Screen, langkah selanjutnya adalah menambahkan Splash Screen ke dalam Route. Kita perlu menambahkan widget Splash Screen ke dalam Route agar Splash Screen dapat tampil ketika aplikasi dibuka. Berikut adalah contoh kode untuk menambahkan Splash Screen ke dalam Route:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Splash Screen Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: SplashScreen(),
    );
  }
}

Pada kode di atas, kita menambahkan widget SplashScreen() ke dalam home di MaterialApp. Dengan begitu, ketika aplikasi dibuka, Splash Screen akan tampil terlebih dahulu sebelum masuk ke halaman utama.

Demikianlah cara membuat Splash Screen di Flutter untuk pemula. Splash Screen memiliki peran penting dalam membuat aplikasi yang menarik. Dengan mengikuti langkah-langkah di atas, kamu dapat membuat Splash Screen dengan mudah dan meningkatkan pengalaman pengguna dalam menggunakan aplikasi. Semoga artikel ini bermanfaat bagi kamu. Sampai jumpa kembali di artikel menarik lainnya!