Praktikum Fluter-Aplikasi Kas Kelas

 

Halo semuanya! 👋 Selamat datang di blog pembelajaran Pemrograman Mobile.

Pada kesempatan kali ini saya akan membahas praktikum Flutter dengan membuat Aplikasi Kas Kelas . Aplikasi ini digunakan untuk mencatat pemasukan dan pengeluaran uang kas kelas, menghitung saldo secara otomatis, serta mengelola data transaksi dengan lebih mudah.

---

📋 1. Identitas Praktikum

• Nama:  Rizkya Amelia 
• Kelas: XI PPLG 2
• Mata Pelajaran: Pemrograman Mobile (Flutter)
• Judul Praktikum: Aplikasi Kas Kelas
• Materi: Bentuk, Validasi, dan Tata Letak

🎯 2. Tujuan Praktikum

Tujuan dari praktikum ini adalah:

1. Memahami penggunaan widget pada Flutter.
2. Membuat aplikasi pencatatan kas kelas.
3. Formulir penerapan input dan validasi data.
4. Menghitung pemasukan, pengeluaran, dan saldo secara otomatis.
5. Membuat fitur pencarian dan filter transaksi.
6. Mempelajari cara menambah, mengedit, menghapus, dan melihat detail transaksi.

💻 5. Langkah-Langkah Pembuatan

Berikut langkah-langkah membuat aplikasi Kas Kelas:

1. Buka situs DartPad melalui https://dartpad.dev/.
2. Pilih editor Flutter.
3. Hapus kode bawaan yang tersedia.
4. Salin dan tempel kode program Aplikasi Kas Kelas.
5. Klik tombol Run untuk menjalankan program.
6. Tunggu hingga aplikasi tampil.
7. Uji setiap fitur dengan memasukkan beberapa data transaksi.

✨ 6. Fitur-Fitur Aplikasi Kas Kelas

💵 A. Ringkasan Kas

Aplikasi menampilkan tiga informasi utama, yaitu total pemasukan, total pengeluaran, dan saldo. Saldo dihitung dengan rumus:

Saldo = Jumlah Pemasukan − Jumlah Pengeluaran

📝 B.Formulir Tambah Transaksi

Pengguna dapat memasukkan keterangan transaksi, jumlah uang, nama penyetor atau penerima, jenis transaksi, tanggal, dan catatan tambahan.

✅ C. Validasi Input

Validasi digunakan untuk memastikan data yang dimasukkan sesuai ketentuan. Keterangan harus terdiri dari minimal tiga karakter, jumlah uang harus berupa angka lebih dari nol, dan nama wajib diisi.

📅 D. Pemilihan Tanggal

Fitur kalender memungkinkan pengguna memilih tanggal transaksi menggunakan showDatePicker.

🔍 E. Pencarian Transaksi

Pengguna dapat mencari transaksi berdasarkan keterangan agar data lebih mudah ditemukan.

🗂️ F. Filter Transaksi

Terdapat tiga pilihan filter, yaitu Semua, Pemasukan, dan Pengeluaran.

✏️ G. Edit dan Hapus Transaksi

Pengguna dapat memperbarui data transaksi yang sudah dimasukkan atau menghapus transaksi melalui menu yang tersedia. Sebelum transaksi dihapus, aplikasi menampilkan konfirmasi terlebih dahulu.

📄 H. Detail Transaksi

Pengguna dapat menekan transaksi untuk melihat informasi lengkap, termasuk keterangan, jenis transaksi, jumlah uang, nama, tanggal, dan catatan.

🧩 7. Penjelasan Bagian Kode Program

1. Impor Perpustakaan

import 'package:flutter/material.dart';

Kode tersebut digunakan untuk mengakses widget Material Design yang tersedia pada Flutter.

2. Fungsi Utama

void main() {
  runApp(const KasKelasApp());
}

Fungsinya main()merupakan titik awal program. Fungsi runApp()menjalankan widget utama aplikasi, yaitu KasKelasApp.

3. MaterialApp

return MaterialApp(
  debugShowCheckedModeBanner: false,
  title: 'Kas Kelas',
  home: const HalamanKas(),
);

MaterialAppdigunakan untuk mengatur aplikasi, termasuk judul dan halaman utama. Properti debugShowCheckedModeBannerdigunakan untuk menyembunyikan label debug.

4. StatefulWidget

HalamanKasdan FormKasmenggunakan StatefulWidgetkarena tampilan dan datanya dapat berubah ketika pengguna berinteraksi dengan aplikasi.

5. Perhitungan Saldo

int get saldo => pemasukan - pengeluaran;

Kode tersebut menghitung saldo dengan mengurangi total pengeluaran dari total pemasukan.

6. Formulir dan Validasi

final _formKey = GlobalKey<FormState>();

GlobalKey<FormState>digunakan untuk mengakses formulir status. Sebelum data disimpan, program memeriksa apakah input sudah valid menggunakan validate().

7. TextFormField

TextFormFielddigunakan sebagai kolom input untuk keterangan, jumlah uang, dan nama penyetor atau penerima. Setiap kolom wajib memiliki aturan validasi yang sesuai.

8. ListView.builder

ListView.builderdigunakan untuk menampilkan daftar transaksi secara dinamis berdasarkan data yang tersedia.

9. setState

setState()digunakan untuk memperbarui tampilan ketika data transaksi ditambahkan, diedit, dihapus, atau ketika pencarian dan filter berubah.

10. Navigator

Navigator.push()digunakan untuk membuka halaman form transaksi. Sementara itu, Navigator.pop()digunakan untuk kembali ke halaman sebelumnya sambil mengirimkan hasil transaksi.

11. AlertDialog

AlertDialogdigunakan untuk menampilkan konfirmasi sebelum menghapus transaksi dan untuk menampilkan detail transaksi.

12. Fungsi Rupiah

Fungsi rupiah()digunakan untuk mengubah angka menjadi format mata uang rupiah dengan pemisah ribuan berupa titik, sehingga nilai uang lebih mudah dibaca.

🧪 8. Pengujian Aplikasi

Pengujian dilakukan untuk memastikan fitur aplikasi bekerja sesuai fungsinya.

TIDAK.	Pengujian	Hasil yang Diharapkan
1	pemasukan	Transaksi masuk ke daftar dan saldo bertambah
2	Pengeluaran	Transaksi masuk ke daftar dan saldo berkurang
3	Mengosongkan nama	Pesan validasi muncul
4	Mengisi jumlah dengan angka nol	Pesan validasi muncul
5	Mencari transaksi	Daftar menampilkan hasil yang sesuai
6	Menggunakan filter	Transaksi yang ditampilkan sesuai jenis
7	Mengedit transaksi	Data transaksi diperbarui
8	transaksi	Server terhapus setelah dikonfirmasi
9	Menekan transaksi	Rincian transaksi ditampilkan

📸 9. Dokumentasi Hasil Praktikum

🌟 10. Pengembangan Selanjutnya

Aplikasi Kas Kelas ini masih dapat dikembangkan dengan menambahkan beberapa fitur, seperti:

• Penyimpanan data menggunakan database lokal.
• Laporan kas berdasarkan tanggal atau bulan.
• Ekspor laporan transaksi.
• Fitur pemasukan kas rutin setiap siswa.
• Tampilan grafik pemasukan dan pengeluaran.

Dengan pengembangan tersebut, aplikasi dapat menjadi lebih lengkap dan bermanfaat untuk pengelolaan keuangan kelas.

📝 11. Kesimpulan

Melalui praktikum ini, saya mempelajari cara membuat Aplikasi Kas Kelas menggunakan Flutter dan Dart. Saya memahami penerapan form input, validasi data, pemilihan tanggal, pengelolaan transaksi, serta perhitungan saldo secara otomatis.

Praktikum ini membantu meningkatkan pemahaman tentang penggunaan widget Flutter dan pengelolaan data pada aplikasi sederhana. Aplikasi ini juga dapat menjadi dasar untuk membuat sistem pencatatan keuangan kelas yang lebih lengkap pada masa mendatang.

---