A. Pendahuluan
Pengembangan aplikasi mobile berbasis Flutter menawarkan kemudahan dalam membangun antarmuka pengguna yang modern dan responsif melalui konsep tata letak berbasis widget. Penyusunan elemen visual yang terstruktur sangat penting untuk memastikan informasi dapat tersaji secara jelas dan nyaman diakses oleh pengguna pada berbagai ukuran layar perangkat mobile.
Praktikum ini berfokus pada penerapan dasar-dasar layouting dan styling menggunakan Flutter dengan studi kasus pembuatan antarmuka aplikasi Expense Tracker. Melalui praktikum ini, dilakukan eksplorasi penggunaan widget Row, Column, Container, dan ListTile, penyusunan layout yang dapat digulirkan dengan SingleChildScrollView, serta penyelesaian tugas modifikasi visual dan penambahan data transaksi.
B. Tujuan
Tujuan dari praktikum ini adalah:
- Memahami konsep dasar layouting dan styling pada Flutter menggunakan widget Row, Column, Container, dan ListTile.
- Menerapkan tata letak horizontal dengan Row dan tata letak vertikal dengan Column dalam menyusun antarmuka aplikasi.
- Mengatasi masalah overflow pada layar aplikasi menggunakan widget SingleChildScrollView.
- Mengimplementasikan kustomisasi warna teks nominal transaksi untuk membedakan kategori pemasukan dan pengeluaran.
- Menambahkan item data transaksi fiktif baru secara terstruktur ke dalam daftar riwayat transaksi.
C. Langkah-Langkah
Menyusun Tombol Aksi (Row)
1. Menyusun Tombol Aksi (Row).
Kode ini berfungsi untuk menyusun tiga tombol aksi ("Masuk", "Keluar", dan "Transfer") secara mendatar atau horizontal menggunakan widget Row. Penggunaan mainAxisAlignment: MainAxisAlignment.spaceEvenly membuat ruang kosong di antara tombol-tombol tersebut terbagi secara otomatis dan seimbang, sedangkan tampilan visual masing-masing tombol dibentuk oleh fungsi pembantu _buildButton.
Menyusun Riwayat (Column + ListTile)
2. Menyusun Riwayat (Column + ListTile).
Kode ini menggunakan widget Column untuk menyusun daftar transaksi secara vertikal dari atas ke bawah dengan posisi rata kiri. Di dalamnya, komponen Text dipakai sebagai judul kelompok, sedangkan setiap item riwayat dibuat menggunakan ListTile yang memuat ikon di sisi kiri, nama transaksi di tengah, dan jumlah nominal saldo di sisi paling bawah secara urutan dan rapi.
Integrasi Dashboard (Scrollable)
3. Integrasi Dashboard (Scrollable).
Kode ini berfungsi untuk menggabungkan seluruh komponen UI dari Modul 1 dan Modul 3 ke dalam satu struktur halaman utama. Penggunaan SingleChildScrollView membantu agar layar dapat di-scroll secara vertikal sehingga mencegah masalah tampilan ketika saat komponen bertambah panjang, sedangkan widget Padding memberikan jarak tepi sebesar 16 piksel di sekeliling Column yang menampung seluruh komponen tersebut.
Hasil Akhir : Mockup Dashboard
4. Hasil Akhir : Mockup Dashboard.
Latihan / Tugas
5. Tugas 1: Styling → Pada widget Daftar Transaksi (ListTile), ubah warna trailing text pengeluaran menjadi merah dan teks pemasukan menjadi hijau.
Output:
Kode ini berfungsi untuk membedakan tampilan visual nominal transaksi pada widget ListTile dengan menerapkan properti color pada TextStyle. Teks nominal untuk transaksi pengeluaran diatur menjadi warna merah, sedangkan teks nominal untuk transaksi pemasukan diatur menjadi warna hijau agar tipe transaksi dapat dikenali secara mudah oleh pengguna.
6. Tugas 2: Tambah Data → Tambahkan 2 transaksi fiktif baru ke dalam daftar "Transaksi Terakhir" di bawah kode yang sudah ada.
Output:
Kode ini menambahkan dua item transaksi fiktif baru pada widget Column daftar transaksi, yaitu pengeluaran "Belanja Bulanan" bertanda ikon belanja dengan nominal berwarna merah serta pemasukan "Bonus Project" bertanda ikon hadiah berwarna hijau dengan nominal berwarna hijau. Kedua elemen ini disusun rapi menggunakan ListTile yang menyertakan informasi tanggal transaksi, serta dipisahkan menggunakan widget Divider agar konsisten dengan struktur data transaksi sebelumnya.
D. Kesimpulan
Berdasarkan praktikum yang telah dilaksanakan, pembuatan antarmuka aplikasi Expense Tracker berhasil dilaksanakan dengan memanfaatkan kombinasi widget layouting Flutter secara efektif. Penerapan Row memudahkan penyusunan tombol aksi secara horizontal, Column membantu menyusun riwayat transaksi secara vertikal, dan SingleChildScrollView memastikan seluruh konten tetap dapat diakses tanpa mengalami masalah overflow saat daftar transaksi bertambah panjang.
Selain itu, penerapan styling pada widget ListTile terbukti memberikan perbedaan visual yang jelas antara jenis transaksi pemasukan dan pengeluaran melalui variasi warna teks nominal. Penambahan data transaksi baru juga mengasah fleksibilitas penggunaan kode yang telah dibangun, sehingga aplikasi memiliki antarmuka yang rapi, informatif, dan mudah dikembangkan lebih lanjut.
Lihat Repository GitHub