Aplikasi Mobile

Laporan Praktikum 2

Pengenalan Widget, Layouting, & Styling

Daftar Isi
A. Pendahuluan B. Tujuan Praktikum C. Alat & Tools D. Langkah Kerja E. Tugas F. Kesimpulan G. Repository Github
A

Pendahuluan

Praktikum ini membahas penggunaan dasar penggunaan Flutter dalam membangun antarmuka aplikasi menggunakan berbagai widget. Materi meliputi penggunaan StatelessWidget dan StatefulWidget, pengelolaan state dengan setState(), serta penerapan Row, Column, Container, dan ListTile untuk mengatur layout dan tampilan aplikasi. Konsep tersebut diterapkan dalam pembuatan dashboard sederhana yang interaktif dan terstruktur.

B

Tujuan

Memahami Widget Flutter

Mampu mengenal penggunaan StatelessWidget, StatefulWidget, dan setState().

Menerapkan Layout & UI

Mampu menggunakan Row, Column, Container, dan ListTile untuk membuat tampilan aplikasi yang terstruktur.

C

Alat dan Tools yang Digunakan

Laptop
Flutter SDK
VS Code
Dart
GIT
Google Chrome
D

Langkah Kerja

1
Modul 1

Buat tampilan dashboard dengan penggabungan GreetingWidget (Stateless) dan BalanceCard (Stateful) ke Scaffold utama. Pada dashboard terdapat widget sapaan statis di bagian atas dan kartu saldo interaktif yang merespon ketukan pada ikon mata.

dashboard_screen.dart

Jika dijalankan maka akan muncul tampilan seperti gambar berikut.

tampilan interaktif
tampilan interaktif
2
Modul 2

Menyusun dashboard yang berisi sapaan pengguna, kartu saldo, tombol aksi (Pemasukan, Pengeluaran, dan Transfer), serta daftar transaksi terakhir menggunakan Row, Column, Container, dan ListTile, kemudian membuat halaman dapat di-scrolll dengan SingleChildScrollView dengan kode berikut.

mockup_dashboard.dart

Jika dijalankan maka akan muncul tampilan seperti gambar berikut.

tampilan interaktif
E

Tugas

Modul 1
1
Styling

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

tampilan interaktif
source code
2
Modifikasi UI

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

tampilan interaktif
source code
Modul 2
1
Tambah Data

Tambahkan 2 transaksi fiktif baru ke dalam daftar "Transaksi Terakhir" di bawah kode yang sudah ada.

tampilan interaktif
source code
F

Kesimpulan

Praktikum ini memberikan pemahaman mengenai penggunaan widget pada Flutter, pengelolaan state menggunakan setState(), serta penerapan layout dan styling menggunakan Row, Column, Container, dan ListTile. Konsep tersebut berhasil diterapkan dalam pembuatan dashboard sederhana yang terdiri dari sapaan pengguna, kartu saldo interaktif, tombol aksi, dan daftar transaksi.

G

Repository Github

Kode project dapat diakses melalui repository Github berikut.

Buka Github
BACK