Praktikum 2 - Pengenalan Widgets & Layouting

Flutter / Mobile App

LAPORAN 1: Pengenalan Widgets (Stateless, Stateful, & Manajemen State Dasar)

1. Pendahuluan

Pengembangan antarmuka pada framework Flutter dibangun berbasis hirarki komponen yang disebut Widget. Untuk mengelola bagaimana komponen antarmuka merespons perubahan data dan interaksi pengguna, Flutter membedakan komponennya menjadi dua jenis utama, yaitu StatelessWidget dan StatefulWidget.

StatelessWidget digunakan untuk elemen antarmuka yang bersifat statis, di mana tampilannya tidak pernah berubah setelah di-render pertama kali di layar. Penggunaan widget ini lebih ringan dan cepat karena tidak menyimpan data internal (State) yang berubah. Di sisi lain, StatefulWidget digunakan untuk elemen antarmuka dinamis yang perlu diperbarui secara kustom sebagai respons terhadap interaksi pengguna (seperti menekan tombol atau toggle tombol visibility). Pembaruan antarmuka pada StatefulWidget dilakukan dengan memicu metode setState(), yang memberi tahu framework untuk merender ulang (rebuild) komponen tersebut dengan nilai data (State) terbaru.

2. Tujuan Praktikum

1. Memahami kerangka dasar dan struktur hierarki aplikasi Flutter menggunakan MaterialApp dan Scaffold.
2. Membedakan penggunaan serta skenario penerapannya antara StatelessWidget dan StatefulWidget.
3. Menerapkan pengelolaan state dasar menggunakan fungsi setState() untuk membangun antarmuka pengguna yang interaktif.

3. Langkah-Langkah Praktikum

3.1 Implementasi Dasar App dengan StatelessWidget dan StatefulWidget

Membangun antarmuka dasar yang menggabungkan GreetingWidget (StatelessWidget) untuk menyapa pengguna dan BalanceCardWidget (StatefulWidget) yang merespons ketukan tombol mata untuk menyembunyikan/menampilkan nominal saldo.

Kode Program main.dart (Praktikum 1):

Hasil Running Praktikum 1 (Langkah Awal):

4. Tugas dan Penugasan Praktikum

Modifikasi komponen BalanceCardWidget sesuai dengan ketentuan berikut:

1. Styling Tema: Mengubah warna latar kartu saldo dari Colors.blueAccent menjadi hijau emerald (Colors.teal).
2. Modifikasi UI: Menambahkan teks statis "No. Rekening: 1234-5678" di bawah informasi nominal saldo.

Kode Program Terintegrasi main.dart (Setelah Penyelesaian Tugas Modul 1):

Hasil Pengujian Tugas Modul 1:

5. Kesimpulan

1. Diferensiasi Stateless dan Stateful Widget: StatelessWidget tepat digunakan untuk elemen UI statis yang tidak berubah. Sebaliknya, StatefulWidget digunakan untuk komponen interaktif yang mempertahankan state.
2. Manajemen State dengan setState(): Pemanggilan setState() memberi instruksi kepada Flutter untuk merender ulang antarmuka saat variabel state (seperti _isBalanceVisible) berubah nilainya.
3. Pemanfaatan Structure Layout Dasar: Penggabungan Row, Column, Card, dan Scaffold memberikan kerangka dasar yang kuat dalam menyusun layout halaman aplikasi mobile secara rapi.

---

LAPORAN 2: Layouting & Styling (Row, Column, Container, dan ListTile)

1. Pendahuluan

Perancangan tata letak (layouting) dan gaya antarmuka (styling) merupakan aspek fundamental dalam menyusun aplikasi mobile yang rapi dan serasi. Pada framework Flutter, pengaturan tata letak secara horizontal dan vertikal dicapai melalui widget Row dan Column.

Untuk menampilkan daftar data secara linier dan terstruktur, Flutter menyediakan komponen ListTile, yaitu widget bawaan Material Design yang mendukung penataan baris daftar secara cepat melalui properti leading, title, subtitle, dan trailing. Selain itu, widget pembungkus Container memungkinkan pengaturan padding, margin, serta decoration latar belakang. Dalam kasus daftar komponen yang memanjang melebihi dimensi viewport layar, penggunaan SingleChildScrollView mutlak diperlukan untuk mencegah timbulnya galat unbounded pixel overflow.

2. Tujuan Praktikum

1. Menerapkan widget Row untuk menyusun deretan tombol aksi secara horizontal.
2. Menerapkan widget Column untuk menyusun daftar riwayat transaksi secara vertikal.
3. Mengatur properti padding, margin, dan dekorasi latar belakang menggunakan Container.
4. Mengimplementasikan widget ListTile untuk menyusun daftar informasi secara rapi dan profesional.
5. Mencegah layout overflow dengan menerapkan widget SingleChildScrollView pada halaman dashboard.

3. Langkah-Langkah Praktikum

3.1 Integrasi Component Dashboard dan Transaksi Terakhir

Mengintegrasikan widget ActionButtonsWidget (Row) untuk tombol aksi serta RecentTransactionsWidget (Column + ListTile) ke dalam layar dashboard berskala vertikal yang dapat di-scroll menggunakan SingleChildScrollView.

Kode Program lib/main.dart (Praktikum 2):

Hasil Running Praktikum 2 (Langkah Awal):

4. Tugas dan Penugasan Praktikum

Latihan perbaikan dan penambahan fitur pada Modul 2 meliputi:

1. Styling Trailing Text: Memastikan warna teks trailing pengeluaran bertanda minus menggunakan warna Merah (Colors.red), sedangkan pemasukan bertanda plus menggunakan warna Hijau (Colors.green).
2. Tambah Data: Menambahkan 2 item transaksi fiktif baru ke dalam widget RecentTransactionsWidget.

Kode Program RecentTransactionsWidget (Setelah Penambahan Tugas Modul 2):

Hasil Pengujian Tugas Modul 2:

5. Kesimpulan

1. Penggunaan Row dan Column: Row efektif digunakan untuk mengatur item secara berjejer menyamping, sedangkan Column digunakan untuk menyusun item secara bertumpuk dari atas ke bawah.
2. Efisiensi Struktur dengan ListTile: Widget ListTile mempermudah pembuatan baris daftar secara instan tanpa perlu menyusun ikon, judul, subjudul, dan teks status dari awal menggunakan Row manual.
3. Pencegahan Error Overflow: Penggunaan SingleChildScrollView sebagai pembungkus utama komponen layar sangat penting untuk menjaga aplikasi tetap nyaman di-scroll vertikal saat konten melebihi ukuran layar device.