A. Pendahuluan

Praktikum ini berfokus pada penguasaan teknik Layouting dan Styling dalam framework Flutter, khususnya penggunaan widget Row, Column, Container, dan ListTile untuk menyusun tampilan dashboard aplikasi. Konsep dan widget utama yang dipelajari pada praktikum ini meliputi:

B. Tujuan

Tujuan dari praktikum ini adalah agar mahasiswa mampu:

• Menerapkan widget Row untuk deretan tombol aksi.
• Menerapkan widget Column untuk daftar transaksi.
• Mengatur padding, margin, dan warna Container.

Alat yang digunakan: Flutter SDK, Code Editor (VS Code / Android Studio), Emulator / Device.

C. Isi & Langkah Kerja

Pengerjaan praktikum dibagi menjadi pembuatan tombol aksi menggunakan Row, pembuatan riwayat transaksi menggunakan Column dan ListTile, serta integrasi seluruh komponen ke dalam satu dashboard yang dapat digulir (scrollable). Berikut adalah alur dan dokumentasi langkah kerjanya:

Widget Utama (main.dart & MyApp)

Titik masuk aplikasi tetap sama seperti Praktikum 1: void main() memanggil runApp(const MyApp()), dan MyApp membungkus MaterialApp dengan DashboardScreen sebagai halaman awal.

Gambar 1: Kode Program main.dart & MyApp

Halaman Utama (DashboardScreen - Diperbarui)

DashboardScreen diperbarui dengan membungkus Padding dan Column menggunakan SingleChildScrollView, sehingga seluruh komponen (GreetingWidget, BalanceCardWidget, ActionButtonsWidget, dan RecentTransactionsWidget) dapat digulir tanpa overflow.

Gambar 2: Kode Program DashboardScreen (Scaffold + SingleChildScrollView)

Widget Sapaan (GreetingWidget - dari Modul 1)

Widget sapaan statis yang sama dari Praktikum 1, dipanggil ulang sebagai komponen pertama di dalam dashboard.

Gambar 3: Kode Program GreetingWidget

Kartu Saldo (BalanceCardWidget - dari Modul 1)

BalanceCardWidget yang sama dari Praktikum 1 (sudah termasuk warna Colors.teal dan teks "No. Rekening") tetap dipertahankan sebagai komponen kedua di dashboard.

Gambar 4: Kode Program BalanceCardWidget

Tombol Aksi (ActionButtonsWidget - Row)

ActionButtonsWidget menggunakan Row dengan mainAxisAlignment: MainAxisAlignment.spaceEvenly untuk menata tombol Pemasukan, Pengeluaran, dan Transfer secara horizontal dengan jarak yang sama rata. Fungsi pembantu _buildActionButton() dibuat terpisah agar kode tidak berulang untuk setiap tombol.

Gambar 5: Kode Program ActionButtonsWidget

Gambar 6: Fungsi Pembantu _buildActionButton

Daftar Transaksi (RecentTransactionsWidget - Column & ListTile)

RecentTransactionsWidget menggunakan Column untuk menumpuk judul "Transaksi Terakhir" dengan sebuah Card berisi tiga ListTile berturut-turut (Makan Siang, Gaji Bulanan, dan Isi Bensin), masing-masing dengan leading, title, subtitle, dan trailing yang diberi warna berbeda sesuai jenis transaksi.

Gambar 7: Kode Program RecentTransactionsWidget

Latihan / Tugas

Tugas 1: Styling

Pada widget Daftar Transaksi (ListTile), mengubah warna trailing text pengeluaran menjadi merah dan text pemasukan menjadi hijau.

Tugas 2: Tambah Data

Menambahkan 2 transaksi fiktif baru ke dalam daftar "Transaksi Terakhir" di bawah kode yang sudah ada.