Laporan Praktikum 2: Aplikasi Mobile

Menginisialisasi aplikasi menggunakan fungsi main() dan kelas MyApp (berbasis StatelessWidget). Bagian ini membungkus keseluruhan aplikasi dengan MaterialApp, menyembunyikan banner debug, mengatur tema, dan menetapkan DashboardScreen sebagai halaman utama (home).

DashboardScreen (StatelessWidget) menggunakan Scaffold untuk membangun kerangka dasar halaman. Komponen ini memiliki AppBar dengan judul praktikum dan properti body berupa Column (dibungkus Padding) yang berfungsi menampung GreetingWidget dan BalanceCardWidget secara vertikal dengan jarak antar elemen (SizedBox).

GreetingWidget (StatelessWidget) bertugas menyusun layout sapaan secara horizontal menggunakan Row. Terdiri dari elemen ikon profil (CircleAvatar) dan sekumpulan teks sapaan bertumpuk vertikal (Column) yang menyapa pengguna dengan teks 'Halo, Budi!'.

Inisialisasi logika state pada BalanceCardWidgetState. Variabel boolean _isBalanceVisible dikelola di sini. Terdapat fungsi _toggleVisibility() yang dipanggil melalui setState() untuk membalikkan nilai boolean, sehingga memicu UI untuk melakukan render ulang saat ikon mata ditekan.

Logika ternary operator diterapkan untuk menentukan tampilan ikon (mata terbuka/tertutup) sekaligus menyensor teks nominal saldo (berubah menjadi 'Rp **********' atau angka aslinya) sesuai dengan status _isBalanceVisible.

Melakukan styling atau modifikasi visual pada widget Card saldo. Warna background kartu diubah menjadi hijau kebiruan (Colors.teal) melalui properti color, sekaligus mengatur elevasi bayangan serta tingkat lengkungan pada sudut kartu (borderRadius).

Penambahan data teks statis berupa informasi rekening. Menggunakan widget Text untuk menampilkan 'No. Rekening: 1234-5678' dengan pengaturan ukuran font 16 dan warna putih, ditempatkan tepat di bawah nominal saldo dengan jarak pemisah SizedBox.

Pengaturan awal (Root Aplikasi) pada kelas MyApp yang strukturnya sama dengan modul sebelumnya. Berfungsi untuk mendaftarkan dan memuat DashboardScreen sebagai root antarmuka pengguna.

Pembaruan pada DashboardScreen di mana elemen body kini dibungkus dengan widget SingleChildScrollView. Modifikasi ini sangat krusial untuk membuat layar bisa digulir (scrollable) ke bawah, sehingga mencegah error overflow ketika daftar transaksi bertambah panjang. Kolom ini juga ditambahkan dengan ActionButtonsWidget dan RecentTransactionsWidget.

GreetingWidget yang dipertahankan dari modul pertama, mengatur posisi avatar biru dan dua baris teks sapaan pengguna.

Logika state management untuk kartu saldo, tetap mengandalkan boolean _isBalanceVisible dan fungsi pembaruan state setState() agar kartu dapat merespons interaksi.

Kode pembentuk UI untuk BalanceCardWidget, yang mengkombinasikan Row dan Column untuk merapikan teks 'Saldo Utama', tombol toggle mata, dan teks saldo nominal yang reaktif terhadap perubahan state.

Pembentukan ActionButtonsWidget menggunakan widget Row dengan mainAxisAlignment: MainAxisAlignment.spaceEvenly. Tujuannya adalah mendistribusikan tombol Pemasukan, Pengeluaran, dan Transfer secara horizontal dengan jarak yang rata. Pendekatan ini dilengkapi dengan fungsi pembantu (helper) _buildActionButton untuk menghindari repetisi kode (DRY) dalam merender desain tombol yang konsisten.

RecentTransactionsWidget menyusun bagian riwayat transaksi menggunakan Column. Tiap item transaksi menggunakan widget ListTile yang secara efisien merapikan posisi elemen kiri (leading icon), teks utama (title), teks tanggal (subtitle), dan teks nominal paling kanan (trailing). Digunakan Divider untuk memberikan garis pemisah antar transaksi.

Modifikasi desain dan penambahan item transaksi ke-4 ('Bayar Listrik') menggunakan ListTile. Diterapkan styling khusus pada teks nominal (trailing) dengan memberikan warna merah (Colors.red) dan font tebal (bold) untuk merepresentasikan bahwa transaksi tersebut merupakan sebuah pengeluaran.

Penambahan data transaksi fiktif ke-5 ('Bonus Kinerja'). Pada bagian trailing, font diatur dengan warna hijau (Colors.green) dan ketebalan bold, digunakan untuk memvisualisasikan bahwa transaksi tersebut bernilai positif atau merupakan sebuah pemasukan.