Laporan Praktikum 2

Aplikasi Mobile - Flutter

Praktikum 2 membahas Layouting & Styling pada Flutter dengan menggunakan widget Row, Column, Container, dan ListTile. Praktikum ini melanjutkan dashboard dari Praktikum 1 dengan menambahkan tombol aksi dan daftar transaksi. Karena jumlah komponen pada halaman dapat bertambah, dashboard juga menggunakan SingleChildScrollView agar isi aplikasi dapat digulir tanpa mengalami overflow.

Tujuan Praktikum

Layout

Menerapkan Row untuk deretan tombol aksi.
Menerapkan Column untuk daftar transaksi.

Styling

Mengatur padding pada komponen.
Mengatur margin atau jarak antar komponen.
Mengatur warna dan tampilan Container.

Alat dan Bahan

Flutter SDK
Visual Studio Code atau Android Studio
Emulator atau perangkat untuk menjalankan aplikasi

Langkah-Langkah Praktikum

1 Menambahkan Row

Gunakan Row untuk meletakkan tombol Pemasukan, Pengeluaran, dan Transfer sejajar secara horizontal.

Gambar 1. Row

2 Menambahkan column

Daftar transaksi mengurut ke bawah, sehingga wajib menggunakan Column.

Gambar 2. Column

3 Menampilkan BalanceCardWidget

Bungkus semuanya dengan SingleChildScrollView agar layar tidak overflow saat daftar memanjang.

Gambar 3. SingleChildScrollView membungkus seluruh isi dashboard

4 Hasil Akhir Aplikasi

Hasil akhir aplikasi Praktikum 2 menampilkan dashboard yang terdiri dari sapaan pengguna, kartu saldo, tiga tombol aksi, dan daftar transaksi.

Gambar 4. Hasil akhir aplikasi Praktikum 2

Tugas Praktikum

1 Mengubah Warna Trailing Text Pemasukan dan Pengeluaran

warna trailing text pengeluaran menjadi merah dan text pemasukan menjadi hijau.

Gambar 5. Warna trailing text pengeluaran menjadi merah dan text pemasukan menjadi hijau

2 Menambahkan 2 transaksi fiktif baru

Menambahkan 2 transaksi fiktif baru pada daftar transaksi agar terlihat lebih lengkap.

Gambar 6. Menambahkan 2 transaksi fiktif baru

3 Hasil Akhir Aplikasi Setelah Tugas Praktikum

Setelah warna trailing text diubah dan ditambahkan 2 transaksi fiktif baru, hasil akhir aplikasi terlihat lebih informatif.

Gambar 7. Hasil akhir aplikasi setelah tugas praktikum

Hasil Praktikum

Hasil praktikum berupa dashboard aplikasi pengelola keuangan sederhana yang menggabungkan komponen dari Praktikum 1 dengan layout baru pada Praktikum 2. Dashboard memiliki sapaan pengguna, kartu saldo yang interaktif, tombol aksi yang tersusun horizontal, dan daftar transaksi yang tersusun menggunakan ListTile.

Kesimpulan

Praktikum 2 memberikan pemahaman tentang penyusunan layout dan styling pada Flutter. Widget Row digunakan untuk menyusun tombol secara horizontal, Column digunakan untuk menyusun komponen secara vertikal, Container digunakan untuk mengatur tampilan elemen, dan ListTile digunakan untuk membuat daftar transaksi yang rapi. Penggunaan SingleChildScrollView juga membantu menjaga tampilan dashboard ketika isi halaman bertambah.

Repository GitHub

Source code Praktikum dapat dilihat melalui repository berikut.

Lihat Repository GitHub