Laporan Praktikum App Mobile 2

Praktikum I: Pengenalan Widgets

Konfigurasi Utama Aplikasi

Inisialisasi widget utama MaterialApp dengan pengaturan warna tema biru dan penghapusan pita debug.

Tampilan Awal Aplikasi

Hasil eksekusi awal yang menampilkan AppBar kosong sebagai fondasi aplikasi Expense Tracker.

Struktur Halaman Utama (Scaffold)

Pembuatan kerangka dasar halaman menggunakan Scaffold yang berisi AppBar dan ruang konten dengan efek padding.

Pembuatan Ikon Profil

Penggunaan widget CircleAvatar untuk menampilkan ikon pengguna dengan latar belakang berwarna di pojok layar.

Penyusunan Elemen Vertikal

Penggabungan berbagai komponen ke dalam widget Column agar tersusun rapi dari atas ke bawah.

Penataan Gaya Teks

Penyesuaian ukuran font, ketebalan, dan warna pada widget Text untuk sapaan pengguna.

Penyusunan Elemen Horizontal

Penggunaan widget Row untuk menyejajarkan teks 'saldo utama' dengan tombol interaktif pengubah visibilitas (ikon mata).

Logika Penyensoran Saldo

Penerapan ternary operator pada teks saldo yang akan berubah menjadi karakter bintang jika disembunyikan.

Tampilan Saat Saldo Terbuka

Antarmuka aplikasi yang menunjukkan nominal saldo secara utuh saat ikon mata dalam mode terbuka.

Tampilan Saat Saldo Disensor

Antarmuka aplikasi yang menunjukkan nominal saldo berhasil disembunyikan setelah tombol mata ditekan.

Latihan 1

Desain Kartu Berwarna

Implementasi widget Card dengan warna latar 'teal', efek bayangan (elevation), dan sudut melengkung.

Informasi Nomor Rekening

Penambahan teks statis yang memuat nomor rekening di dalam struktur kartu utama.

Hasil Latihan 1

Kartu saldo kini memiliki desain warna solid yang menarik, lengkap dengan detail nomor rekening pengguna di bagian bawah.

Praktikum II: Layouting Lanjutan

Penerapan Fungsi Scroll

Membungkus keseluruhan konten dengan SingleChildScrollView agar layar tetap responsif dan bisa digulir ketika daftar transaksi bertambah banyak.

Kombinasi Baris dan Kolom (Bagian 1)

Penyusunan avatar profil agar berada sejajar dalam satu baris dengan sapaan nama pengguna.

Kombinasi Baris dan Kolom (Bagian 2)

Penyelesaian blok kode untuk sapaan pengguna lengkap dengan jarak spasi (SizedBox) antar komponen.

Manajemen State Dasar

Fungsi yang memicu pembaruan antarmuka (setState) dengan mengubah nilai boolean setiap kali ikon mata ditekan.

Penyusunan Tombol Aksi

Membuat baris yang mendistribusikan jarak secara merata (spaceEvenly) untuk menampung tombol pemasukan, pengeluaran, dan transfer.

Fungsi Pembangun Tombol

Metode kustom untuk mencetak struktur tombol berulang (berisi ikon dalam kontainer warna dan label) secara efisien tanpa menulis kode berulang kali.

Struktur Daftar Transaksi

Penggunaan ListTile di dalam Card untuk merancang bentuk baris transaksi yang rapi, lengkap dengan bagian depan (leading), judul, dan ekor (trailing).

Hasil Akhir Praktikum 2

Seluruh elemen layout (avatar, kartu saldo, tombol aksi, dan daftar riwayat transaksi) berhasil tersusun dengan proporsional pada layar.

Latihan 2

Penyesuaian Argumen Tombol Aksi

Implementasi pemanggilan parameter kustom pada fungsi pembuat tombol untuk mendefinisikan ikon, teks, dan warna secara spesifik.

Penambahan Daftar Transaksi Baru

Penambahan widget ListTile ekstra untuk memvisualisasikan data pengeluaran (Beli Gacoan) dan pemasukan (Menang Judol).

Hasil Keseluruhan Layout Terintegrasi

Tampilan aplikasi pelacak keuangan yang utuh, menunjukkan semua baris transaksi tambahan dengan format warna yang sesuai untuk pengeluaran dan pemasukan.