Membuat Aplikasi Menggunakan Flutter #1 – Membuat Splash Screen

Assalamualaikum, wr. wb.

Pada postingan ini kita akan belajar membuat aplikasi menggunakan framework Flutter dari awal. Ini merupakan bagian pertama dan mungkin kita akan membaginya menjadi beberapa bagian. Sebelum kita lanjut ke bagian pembuatan, mungkin kita akan mempelajari dulu apa sih flutter?

Apa itu Flutter?

Flutter adalah framework opensource yang dikembangkan dan didukung oleh Google. Developer frontend dan full-stack menggunakan Flutter untuk membangun antarmuka pengguna (User Interface) aplikasi untuk beberapa platform dengan codebase tunggal. Pembuatan aplikasi pada Flutter menggunakan bahasa pemrograman Dart.

Saat Flutter diluncurkan pada tahun 2018, Flutter terutama mendukung pengembangan aplikasi seluler. Flutter kini mendukung pengembangan aplikasi di enam platform: iOS, Android, web, Windows, MacOS, dan Linux. Jadi, dengan membuat aplikasi menggunakan Flutter kita bisa menggunakan aplikasinya di enam platform hanya dengan sekali pekerjaan.

Oke, setelah mempelajari sedikit pengertian Flutter, sekarang kita lanjut untuk memulai pembuatan aplikasinya.

Membuat Project pada Flutter

Langsung saja buka Visual Code Studio hingga tampil seperti gambar di bawah ini:

Pada Tab Menu pilih View -> Command Pallete atau bisa juga dengan menekan tombol Ctrl+Shift+P. Kemudian pilih Flutter: New Project dan pilih Aplication.

Pada langkah ini kita perlu memilih direktori penyimpanannya lalu ketik nama Aplikasinya dan klik Enter.

Inilah tampilan awalnya dan sudah terdapat codenya. Sebenarnya kita ini sudah membuat satu aplikasi menggunakan Flutter. Mari kita coba jalankan aplikasinya dengan cara Run and Debug atau bisa juga dengan klik Ctrl+Shift+D.

Inilah tampilan aplikasi pertama kita, hanya terdapat Appbar, Text dan Tombol. Disini teks dengan angka nol dan ketika kita menekan tombol + (Plus), angkanya akan bertambah.

Namun pada postingan ini, kita akan membuat aplikasi dengan keinginan sendiri, dan tahap awal kita akan membuat halaman Splash Screen.

Menambahkan Dependencies

Buka file pubspec.yaml dan akan tampil seperti di bawah ini:

Tambahkan beberapa baris code di bawah ini pada file pubspec.yaml

dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  flutter_native_splash: ^2.3.3

flutter_native_splash:
  android: true
  ios: true
  web: false
  color: "#ffffff"
  image: "assets/icon/logo.png"
  
  android_12:
    color: "#ffffff"

dev_dependencies:
  flutter_test:
    sdk: flutter

Dalam langkah ini kita memasukkan dependencies flutter_native_splash: ^2.3.3. Setelah kita menambahkan beberapa baris kode ke pubspec.yaml lalu tekan Ctrl+S untuk menambahkan dependencies dan tunggu sampai proses selesai. Setelah itu, lalu jalankan di terminal: flutter pub run flutter_native_splash:create.

Catatan: Setiap kali kita melakukan perubahan ini atau menambahkan dependencies lain, jangan lupa untuk menjalankankan perintah pub get atau menyimpannya dengan Ctrl+S.

Lalu kita tambahkan folder assets untuk menyimpan file gambar/logo yang akan ditampilkan di halaman splash screen dan masukkan/ simpan filenya di folder tersebut. Dalam contoh ini kita menyimpan file logo.png di dalam folder assets/icon.

Oke, kita telah berhasil menambahkan dependencies ke dalam project kita. Selanjutnya kita mempelajari inti dari bagian ini, yaitu membuat halaman splash screen.

Membuat Halaman Splash Screen

Dengan dependencies ini splash screen akan dihapus ketika Flutter telah menggambar frame pertama. Tapi kita bisa menggunakan preserve()menggunakan remove()splash screen, jika kita ingin tetap menampilkan splash screen sementara waktu.

Buka file main.dart dan hapus semua codenya lalu ketikkan code di bawah ini:

void main() async {
  WidgetsBinding widgetsBinding = WidgetsFlutterBinding.ensureInitialized();
  FlutterNativeSplash.preserve(widgetsBinding: widgetsBinding);
  initialization();
  runApp(MyApp());
}

void initialization() async {
  await Future.delayed(const Duration(seconds: 4));
  FlutterNativeSplash.remove();
}

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const FittedBox(
          child: Text("Home Page"),
        ),
      ),
    );
  }
}

Jalankan aplikasi dengan Run and Debug .

Oke begitu saja untuk bagian pertama ini. kita akan lanjut ke bagian dua. Sampai Jumpa kembali…..