Ngawiflix

Ngawiflix – Aplikasi Jadwal Bioskop Flutter dengan CRUD & Pencarian

Kalau kamu penggemar film dan ingin mencoba membuat aplikasi sederhana untuk menampilkan daftar film beserta jadwal tayangnya, project Ngawiflix ini cocok banget buat latihan Flutter.
Aplikasi ini punya fitur CRUD (Create, Read, Update, Delete) dan pencarian judul film, plus tampilan yang mirip katalog bioskop.

---

Fitur Utama

1. Tampilan daftar film dengan poster, judul, genre, dan jam tayang.

2. Pencarian film berdasarkan judul (real-time search).

3. Tambah film baru lewat form input.

4. Edit film yang sudah ada.

5. Hapus film dengan konfirmasi dialog.

6. Detail film saat poster diklik (modal dialog berisi info lengkap).

---

Struktur Data Film

Aplikasi ini menyimpan daftar film di dalam list filmList dengan struktur:

List<Map<String, String>> filmList = [
  {
    "judul": "Ambaruwo",
    "genre": "Horror, Sci-Fi",
    "jam": "14:14, 17:17, 00:00",
    "poster": "URL Poster",
    "deskripsi": "Deskripsi singkat film"
  },
  ...
];

Setiap film punya:

• judul → nama film

• genre → tipe film

• jam → jadwal tayang

• poster → URL gambar poster

• deskripsi → ringkasan cerita

---

Penjelasan Alur Kode

1. Main Function

void main() {
  runApp(MaterialApp(
    debugShowCheckedModeBanner: false,
    home: JadwalBioskop(),
  ));
}

Menjalankan aplikasi Flutter dan mengarahkan halaman awal ke widget JadwalBioskop.

---

2. State Management

JadwalBioskop dibuat sebagai StatefulWidget supaya UI bisa diperbarui saat data film berubah (tambah, ubah, hapus).

---

3. Fitur Tambah/Ubah Film

Fungsi showFormDialog() digunakan untuk menampilkan form input (AlertDialog) yang bisa untuk tambah maupun ubah film.

• Jika editIndex == null → mode tambah film.

• Jika editIndex != null → mode ubah film yang dipilih.

---

4. Fitur Hapus Film

Menampilkan dialog konfirmasi sebelum menghapus, lalu menghapus data dari filmList dan refresh tampilan.

---

5. Fitur Detail Film

Saat poster film diklik, akan muncul dialog berisi:

• Poster ukuran besar.

• Judul, genre, jam tayang.

• Deskripsi lengkap.

• Tombol keluar.

---

6. Pencarian Film

List<Map<String, String>> filteredList = filmList
    .where((film) => film["judul"]!
        .toLowerCase()
        .contains(searchQuery.toLowerCase()))
    .toList();

Menyaring daftar film berdasarkan teks pencarian tanpa membedakan huruf besar/kecil.

---

7. Tampilan Grid Film

Menggunakan GridView.builder untuk menampilkan daftar film secara rapi dan responsif:

• Poster di atas.

• Judul, genre, dan jam di bawah.

• Tombol edit dan hapus di setiap kartu film.

---

Cara Menjalankan

1. Pastikan Flutter sudah terinstall (flutter doctor).

2. Buat project baru:

   flutter create ngawiflix
   

3. Ganti isi lib/main.dart dengan kode yang sudah disediakan.

4. Jalankan aplikasi:

   flutter run
   

---

Kesimpulan

Dengan kode ini, kita belajar:

• Menyimpan data dalam List Map.

• Membuat fitur CRUD di Flutter.

• Menggunakan GridView untuk tampilan data.

• Membuat form input dengan AlertDialog.

• Menerapkan real-time search.

Hasilnya adalah aplikasi katalog bioskop yang simpel namun fungsional.
Kalau mau lebih keren, bisa ditambah database SQLite atau Firebase agar data tersimpan permanen.

Link melihat hasil nya langsung:

https://zl6c06fcl6d0.zapp.page/#/

Link untuk melihat source code:

https://zapp.run/edit/flutter-zl6c06fcl6d0?entry=lib/main.dart&file=lib/main.dart

Btw ini bikin with Caca