Praktikum App Mobile 4
Navigasi Dasar & Passing Data Antar Layar
Bagian 1: Konfigurasi Utama Aplikasi
Inisialisasi Rute Awal (Main.dart)
File utama yang mengonfigurasi aplikasi dengan mengaktifkan tema warna merah secara global dan memanggil layar DashboardScreen sebagai halaman pertama yang dimuat saat aplikasi dibuka[cite: 26].
Bagian 2: Layar Dashboard Keuangan
Penyusunan AppBar & Tombol Navigasi FAB
Pembuatan antarmuka dashboard dengan tombol aksi melayang (Floating Action Button). Tombol ini menggunakan fungsi navigasi Push untuk memindahkan pengguna ke halaman pengisian formulir transaksi secara langsung saat ditekan[cite: 27].
Kerangka Konten Dashboard
Menyusun ruang konten dashboard dalam area yang bisa di-scroll (SingleChildScrollView). Konten tersebut meliputi teks sapaan personal pengguna, area kartu saldo, serta komponen daftar riwayat transaksi[cite: 27].
Desain Visual Kartu Saldo
Potongan kode khusus untuk mencetak elemen visual berbentuk kartu dengan latar belakang merah, yang menampung informasi nominal saldo utama sebesar Rp 5.000.000 secara tebal dan mencolok[cite: 28].
Daftar Transaksi & Logika Pengiriman Data (Bagian 1)
Implementasi item riwayat transaksi pada list. Dilengkapi fitur interaktif di mana sentuhan pada item tersebut akan memicu navigasi, sekaligus membawa (passing) paket data rincian terkait menuju layar detail transaksi[cite: 29].
Daftar Transaksi & Logika Pengiriman Data (Lanjutan)
Lanjutan dari baris kode fungsi navigasi yang mempersiapkan parameter data transaksi secara spesifik untuk diolah oleh rute halaman tujuan[cite: 30].
Penambahan Item Transaksi Pemasukan
Menyisipkan entri tambahan pada daftar transaksi yang mewakili pemasukan gaji. Item ini juga diprogram agar dapat ditekan dan mengirimkan datanya tersendiri ke layar detail[cite: 31].
Bagian 3: Layar Pencatatan Transaksi Baru
Deklarasi Halaman Formulir
Mendeklarasikan layar pencatatan transaksi menggunakan stateful widget yang aktif memonitor input dari pengguna, dilengkapi inisialisasi awal pengontrol teks untuk menangkap masukan[cite: 31].
Kerangka Antarmuka Pengisian Data
Penyusunan tata letak formulir transaksi dengan merangkai kolom-kolom TextFormField ke dalam orientasi vertikal, dipisahkan oleh SizedBox, serta ditutup dengan ElevatedButton untuk memproses simpanan data[cite: 32].
Bagian 4: Layar Rincian Transaksi Terperinci
Konstruktor Penampung Passing Data
Membuat komponen stateless khusus yang struktur datanya diikat dengan modifier 'required', bertujuan memaksa layar ini menerima paketan data eksternal (seperti judul dan jumlah transaksi) setiap kali dipanggil[cite: 32].
Desain Visual Bagian Atas Rincian
Merancang estetika bagian atas antarmuka rincian yang mencolok; menghadirkan ikon kuitansi berukuran besar dipadu dengan tipografi judul serta nominal angka transaksi[cite: 33].
Penempatan Data Informasi Rincian
Menyusun baris detail tambahan di bawah informasi utama, memanggil fungsi pembantu untuk mendistribusikan data kategori dan penanggalan yang diteruskan dari layar sebelumnya secara harmonis[cite: 33].
Fungsi Pembantu Tata Letak Baris
Sebuah potongan blok kode khusus (widget pembantu) yang bertugas menjaga kerapian letak, memisahkan secara proporsional antara teks label statis dan teks nilai dinamis ke tepi berlawanan[cite: 34].
Bagian 5: Hasil Visualisasi Antarmuka
Tampilan Sentral Dashboard
Uji coba visual akhir yang membuktikan seluruh penyusunan layar pusat navigasi berhasil dimuat, menampilkan kartu dompet virtual beserta deretan daftar pemasukan dan pengeluaran[cite: 34].
Tampilan Layar Formulir Pencatatan
Uji coba navigasi dari tombol melayang menghasilkan rute sempurna menuju halaman pencatatan transaksi yang bersih dan siap diisi[cite: 35].
Bagian 6: Latihan Optimasi Formulir Tanggal
Pengamanan Format Input Tanggal
Modifikasi yang memastikan kolom kalender tidak bisa diketik manual (readOnly = true), memaksa pengguna memicu metode pemanggilan Date Picker secara terprogram demi konsistensi pendataan format waktu[cite: 35].
Uji Coba Pengisian Transaksi Baru (Latihan)
Simulasi praktik yang berhasil merekam interaksi pengguna untuk formulir pembelian bensin senilai 17500 lengkap dengan verifikasi penanggalan format terstruktur[cite: 36].
