Laprak 2 - Widgets, Layouting & Styling

Bbuat GreetingWidget sebagai StatelessWidget karena nama dan kalimat sapaan belum berubah ketika aplikasi dipakai. Row menempatkan avatar di samping teks; Column menyusun dua baris teks. Pemisahan ini memudahkan widget sapaan dipakai lagi di halaman dashboard.

Sapaan dan ikon profil tampil sejajar, dengan teks kedua berada di bawah nama. Karena isi sapaan belum memakai data yang berubah, komponen ini tidak perlu menyimpan state sendiri. Hasilnya juga tetap mudah dibaca pada layar emulator yang sempit.

Bagian saldo dipisahkan menjadi BalanceCardWidget. Widget ini memakai StatefulWidget karena saldo nantinya bisa ditampilkan atau disamarkan. Variabel _isBalanceVisible menyimpan kondisi tersebut.

Kartu memiliki data tampilan yang dapat diubah tanpa membangun ulang seluruh aplikasi. Pemakaian widget terpisah membuat perilaku saldo tidak bercampur dengan kode sapaan. Ini memudahkan saya menambahkan tombol mata tanpa mengubah tata letak bagian lain.

Ketika ikon mata ditekan, fungsi _toggleBalanceVisibility() membalik nilai boolean di dalam setState(). Flutter lalu membangun ulang kartu, sehingga ikon dan teks nominal mengikuti nilai terbaru. Kondisi ternary memilih nominal asli saat true dan tanda sensor saat false. Logika ini berada di kelas _BalanceCardWidgetState.

Menekan ikon mata mengubah tampilan saldo secara langsung, menekannya lagi mengembalikan nominal. Perubahan terjadi pada kartu yang sama, sehingga pengguna tidak berpindah halaman.

Gabungkan MyApp, DashboardScreen, GreetingWidget, dan BalanceCardWidget. MaterialApp menjadi akar aplikasi, sedangkan Scaffold menyediakan App Bar dan area isi. Padding memberi jarak dari tepi layar.

Urutan pada layar adalah App Bar, sapaan, lalu kartu saldo. Jarak antarkomponen dibuat dengan SizedBox agar tampilan tidak terlalu rapat.

Aplikasi dijalankan pada emulator Android Studio melalui terminal VS Code. Setelah layar terbuka, periksa posisi sapaan dan kartu, lalu tekan ikon mata dua kali untuk memastikan saldo dapat disembunyikan dan dimunculkan kembali. Perubahan tampilan inilah bukti bahwa state pada kartu bekerja.

Tampilan Modul 1 berhasil muncul di emulator dan tombol mata merespons ketukan. Pemeriksaan di emulator membantu memastikan ukuran dan jarak komponen sesuai layar ponsel. S

Ganti warna tiga area utama menjadi Colors.teal. Warna App Bar diatur pada properti backgroundColor, warna lingkaran profil pada CircleAvatar.backgroundColor, dan warna kartu pada Card.color.

Bagian atas halaman, avatar, dan kartu saldo memiliki warna teal yang senada.

Tambahkan teks rekening di bawah nominal pada Column di dalam kartu saldo, sesudah SizedBox sebagai jarak. Nomor rekening dibuat sebagai Text biasa karena nilainya tetap. Saat tombol mata ditekan, hanya nominal yang disensor.

Nomor rekening muncul di bagian bawah kartu dengan warna teks yang tetap terbaca. Posisinya sengaja diletakkan setelah nominal agar urutan informasi tetap jelas: nama kartu, saldo, lalu rekening. Teks yang lebih kecil menjaga perhatian utama tetap berada pada jumlah saldo.

Tiga aksi diletakkan dalam satu Row agar berjajar mendatar. mainAxisAlignment.spaceEvenly membagi ruang secara merata. Setiap aksi terdiri dari ikon di dalam Container dan label di bawahnya. Fungsi _buildActionButton menjaga ukuran, jarak, dan bentuk ketiganya tetap konsisten. Pada tahap ini widget dibuat sebagai tampilan mockup, belum ada fungsi transaksi ketika ditekan.

Pemasukan, Pengeluaran, dan Transfer tampil sejajar dengan gaya ikon yang seragam. Ketiga ikon dibuat dari fungsi pembantu yang sama sehingga perbedaan label dan warna tidak mengubah ukuran tampilannya. P

Letakkan judul dan kartu transaksi dalam Column. Setiap ListTile membagi informasi menjadi ikon (leading), nama (title), tanggal (subtitle), serta jumlah (trailing). Divider membantu memisahkan transaksi agar mudah dibaca.

Riwayat awal berisi Makan Siang, Gaji Bulanan, dan Isi Bensin. Setiap transaksi memakai susunan informasi yang sama, jadi pembaca bisa membandingkan nama, tanggal, dan jumlah dengan cepat.

Isi body pada DashboardScreen saya ubah menjadi SingleChildScrollView yang membungkus satu Column. Dengan susunan ini, seluruh widget dari dua modul berada dalam satu halaman. Saat daftar transaksi bertambah dan tinggi konten melebihi layar emulator, halaman bisa discroll sehingga bagian bawah tetap dapat dilihat.

Komponen tampil berurutan tanpa bagian bawah terpotong saat konten memanjang.

Dashboard menampilkan sapaan, kartu saldo, tiga aksi, dan riwayat transaksi dalam satu layar yang dapat discroll.

Beri warna merah pada jumlah yang bertanda minus karena itu pengeluaran, sedangkan jumlah bertanda plus diberi warna hijau karena itu pemasukan. Perubahan dilakukan pada Text di properti trailing tiap ListTile, sehingga nama dan tanggal transaksi tidak ikut berubah warna. Perbedaan ini membantu pembaca mengenali arus uang dengan cepat.

Nominal transaksi keluar dan masuk dapat dibedakan dari tanda serta warnanya. Warna dipakai sebagai petunjuk tambahan, sedangkan tanda plus dan minus tetap dipertahankan agar maknanya jelas. Dengan begitu, jenis transaksi masih dapat dikenali meskipun warna layar tidak terlihat sempurna.

Tambahkan dua ListTile di akhir daftar, setelah tiga data awal, dan menaruh Divider sebelum tiap item baru. Belanja Bulanan dicatat sebagai pengeluaran sehingga nilainya merah dan bertanda minus. Bonus Freelance dicatat sebagai pemasukan sehingga nilainya hijau dan bertanda plus. Karena halaman sudah memakai SingleChildScrollView, kedua item tetap bisa dilihat dengan menggulir ke bawah.

Jumlah transaksi bertambah dari tiga menjadi lima baris. S