A. Pendahuluan

Praktikum ini berfokus pada pengenalan konsep dasar Widget pada framework Flutter, khususnya perbedaan antara StatelessWidget dan StatefulWidget serta bagaimana Flutter mengelola perubahan tampilan (UI) melalui manajemen state. Konsep dan komponen utama yang dipelajari pada praktikum ini meliputi:

B. Tujuan

Tujuan dari praktikum ini adalah agar mahasiswa mampu:

• Memahami kerangka dasar aplikasi Flutter (MaterialApp & Scaffold).
• Membedakan penggunaan StatelessWidget dan StatefulWidget.
• Menerapkan fungsi setState() untuk membuat UI yang interaktif.

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

C. Isi & Langkah Kerja

Pengerjaan praktikum dibagi menjadi pembuatan widget sapaan statis, pembuatan kartu saldo interaktif, serta penggabungan keduanya ke dalam satu dashboard. Berikut adalah alur dan dokumentasi langkah kerjanya:

Widget Utama (main.dart & MyApp)

Titik masuk aplikasi dijalankan melalui void main() yang memanggil runApp(const MyApp()). Kelas MyApp merupakan StatelessWidget yang membungkus MaterialApp dan menentukan DashboardScreen sebagai halaman awal aplikasi.

Gambar 1: Kode Program main.dart & MyApp

Halaman Utama (DashboardScreen / Scaffold)

DashboardScreen berupa StatelessWidget yang membangun struktur halaman menggunakan Scaffold, lengkap dengan AppBar dan body berisi Padding serta Column yang memanggil GreetingWidget() dan BalanceCardWidget().

Gambar 2: Kode Program DashboardScreen (Scaffold)

Widget Sapaan (GreetingWidget - Stateless)

Header statis berupa GreetingWidget yang menampilkan nama pengguna dan ikon avatar. Widget disusun menggunakan Row untuk menempatkan elemen kiri ke kanan, dan Column untuk menumpuk teks sapaan secara vertikal.

Gambar 3: Kode Program GreetingWidget

Kartu Saldo (BalanceCardWidget - Stateful)

BalanceCardWidget dibuat sebagai StatefulWidget agar dapat bereaksi saat ikon mata ditekan. Variabel _isBalanceVisible menyimpan status apakah saldo terlihat atau disensor, dan fungsi setState() dipanggil untuk membalik nilai boolean tersebut sehingga UI dirender ulang. Bagian ini juga sudah mencakup hasil Tugas 1 (warna Colors.teal) dan Tugas 2 (teks "No. Rekening: 1234-5678").

Gambar 4: Kode Program BalanceCardWidget

Latihan / Tugas

Tugas 1: Styling

Mengubah warna tema BalanceCard dari biru (Colors.blueAccent) menjadi hijau emerald (Colors.teal).

Tugas 2: Modifikasi UI

Menambahkan teks statis berupa "No. Rekening: 1234-5678" di bagian bawah nominal saldo di dalam kartu.

Implementasi kedua tugas di atas sudah dapat dilihat langsung pada kode program BalanceCardWidget (Gambar 4) di atas.