Laporan Praktikum Aplikasi Mobile 2

```

Bagian 1

Pendahuluan

1.1. Tujuan Praktikum

Praktikum ini bertujuan untuk memahami penggunaan widget dasar pada Flutter serta membedakan penggunaan StatelessWidget dan StatefulWidget. Selain itu, praktikum bertujuan untuk memahami penggunaan setState() sebagai dasar manajemen state pada aplikasi Flutter.

Praktikum juga bertujuan untuk memahami penggunaan Row, Column, Container, dan ListTile dalam membangun tampilan aplikasi mobile. Widget-widget tersebut kemudian digabungkan untuk membuat sebuah dashboard aplikasi sederhana.

1.2. Dasar Teori

1.2.1. Flutter

Flutter merupakan framework yang digunakan untuk membangun aplikasi dengan menggunakan bahasa pemrograman Dart. Flutter menggunakan konsep widget sebagai komponen utama dalam membangun antarmuka aplikasi.

1.2.2. StatelessWidget

StatelessWidget merupakan widget yang digunakan untuk membuat tampilan yang bersifat statis. Widget ini tidak memiliki state yang berubah selama aplikasi berjalan. Pada praktikum ini StatelessWidget digunakan pada GreetingWidget.

1.2.3. StatefulWidget

StatefulWidget digunakan ketika sebuah widget memiliki data atau kondisi yang dapat berubah selama aplikasi berjalan. StatefulWidget memiliki State yang digunakan untuk menyimpan kondisi tersebut.

1.2.4. setState()

setState() digunakan untuk memberitahu Flutter bahwa terdapat perubahan pada state. Setelah setState() dijalankan, tampilan widget akan diperbarui sehingga perubahan dapat ditampilkan kepada pengguna.

1.2.5. Row

Row digunakan untuk menyusun beberapa widget secara horizontal. Dalam praktikum ini Row digunakan untuk menyusun tombol Pemasukan, Pengeluaran, dan Transfer.

1.2.6. Column

Column digunakan untuk menyusun beberapa widget secara vertikal. Widget ini digunakan untuk menyusun beberapa bagian pada dashboard aplikasi.

1.2.7. Container

Container digunakan untuk membungkus widget dan mengatur tampilan seperti padding, margin, warna, ukuran, dan dekorasi.

1.2.8. ListTile

ListTile merupakan widget yang digunakan untuk membuat item dalam bentuk baris. ListTile dapat memiliki bagian leading, title, subtitle, dan trailing. Pada praktikum ini ListTile digunakan untuk menampilkan daftar transaksi.

```

Bagian 2

Alat dan Bahan

2.1. Alat

Laptop atau komputer.
Flutter SDK.
Android Studio atau Visual Studio Code.
Android Emulator atau perangkat Android.
Bahasa pemrograman Dart.
Carbon untuk membuat screenshot source code.

2.2. Bahan

Modul Praktikum Aplikasi Mobile Flutter.
Source code Flutter pada file main.dart.

```

Bagian 3

Langkah Kerja

3.1. Membuat Fungsi Main dan MaterialApp

Program Flutter dimulai dari fungsi main(). Fungsi tersebut menjalankan widget utama MyApp. Selanjutnya, MaterialApp digunakan sebagai widget utama aplikasi dan DashboardScreen ditentukan sebagai halaman awal.

Gambar 1. Source code main() dan MaterialApp

3.2. Membuat DashboardScreen

DashboardScreen digunakan sebagai halaman utama aplikasi. Scaffold digunakan sebagai struktur dasar halaman yang terdiri dari AppBar dan body. SingleChildScrollView digunakan agar isi halaman dapat digulir ketika kontennya melebihi ukuran layar.

Gambar 2. Source code DashboardScreen

3.3. Membuat GreetingWidget

GreetingWidget dibuat menggunakan StatelessWidget karena tampilan yang diberikan tidak membutuhkan perubahan state. Widget ini berisi avatar, nama pengguna, dan pesan selamat datang.

Gambar 3. Source code GreetingWidget

3.4. Membuat BalanceCardWidget

BalanceCardWidget dibuat menggunakan StatefulWidget karena terdapat kondisi yang dapat berubah, yaitu kondisi saldo ditampilkan atau disembunyikan.

Gambar 4. Source code BalanceCardWidget

3.5. Menggunakan setState()

Pada BalanceCardWidget digunakan variabel _isBalanceVisible untuk menentukan apakah saldo ditampilkan atau disembunyikan. Perubahan nilai tersebut dilakukan menggunakan setState().

Gambar 5. Implementasi setState()

3.6. Membuat ActionButtonsWidget

ActionButtonsWidget digunakan untuk menampilkan beberapa tombol aksi. Row digunakan untuk menyusun tombol Pemasukan, Pengeluaran, dan Transfer secara horizontal.

Gambar 5. Source code ActionButtonsWidget

3.7. Membuat Daftar Transaksi

Daftar transaksi dibuat menggunakan Column dan beberapa ListTile. Setiap transaksi memiliki icon, nama transaksi, tanggal, serta nominal transaksi.

Gambar 6. Source code RecentTransactionsWidget

```

Bagian 4

Hasil dan Pembahasan

4.1. Hasil Implementasi StatelessWidget

StatelessWidget berhasil diterapkan pada GreetingWidget. Widget tersebut digunakan untuk menampilkan informasi pengguna berupa avatar, nama, dan pesan selamat datang. Karena informasi tersebut tidak membutuhkan perubahan state, StatelessWidget sesuai digunakan pada bagian ini.

4.2. Hasil Implementasi StatefulWidget

StatefulWidget berhasil diterapkan pada BalanceCardWidget. Widget tersebut memiliki state yang dapat berubah berdasarkan interaksi pengguna terhadap tombol visibility.

4.3. Hasil Implementasi setState()

Penggunaan setState() memungkinkan tampilan saldo berubah ketika tombol visibility ditekan. Ketika kondisi saldo berubah, Flutter melakukan pembaruan tampilan pada widget.

4.4. Hasil Implementasi Row dan Column

Row digunakan untuk menyusun tombol aksi secara horizontal, sedangkan Column digunakan untuk menyusun komponen secara vertikal. Penggunaan kedua widget tersebut membuat susunan dashboard menjadi lebih terstruktur.

4.5. Hasil Implementasi Container

Container digunakan untuk membantu mengatur tampilan komponen seperti warna, padding, margin, ukuran, dan dekorasi. Penggunaan Container membuat tampilan setiap bagian dashboard lebih teratur.

4.6. Hasil Implementasi ListTile

ListTile digunakan untuk membuat daftar transaksi. Komponen leading digunakan untuk icon, title dan subtitle digunakan untuk informasi transaksi, sedangkan trailing digunakan untuk menampilkan nominal transaksi.

4.7. Hasil Akhir

Setelah seluruh widget digabungkan, dihasilkan sebuah dashboard sederhana yang terdiri dari informasi pengguna, kartu saldo, tombol aksi, dan daftar transaksi.

Catatan:

Screenshot hasil aplikasi pada Android Studio dimasukkan secara manual setelah aplikasi selesai dijalankan.

Gambar 7. Hasil akhir dashboard aplikasi Flutter

```

Bagian 5

Latihan

5.1. Latihan Modul I

Pada latihan Modul I dilakukan perubahan pada tampilan BalanceCardWidget. Warna kartu saldo diubah menjadi teal dan ditambahkan informasi nomor rekening 1234-5678.

Gambar 8. Source code latihan Modul I

5.2. Latihan Modul II

Pada latihan Modul II dilakukan perubahan warna pada nominal transaksi berdasarkan jenis transaksi. Nominal pengeluaran ditampilkan dengan warna merah, sedangkan nominal pemasukan ditampilkan dengan warna hijau.

Selain itu, ditambahkan dua transaksi contoh baru pada daftar transaksi, yaitu Belanja Bulanan dan Bonus Proyek.

Gambar 9. Source code latihan Modul II

```

Bagian 6

Kesimpulan

Berdasarkan praktikum yang telah dilakukan, dapat disimpulkan bahwa Flutter menyediakan berbagai widget yang dapat digunakan untuk membangun antarmuka aplikasi mobile. StatelessWidget digunakan untuk tampilan yang tidak membutuhkan perubahan state, sedangkan StatefulWidget digunakan ketika terdapat kondisi yang dapat berubah.

Penggunaan setState() dapat digunakan untuk memperbarui tampilan ketika terjadi perubahan state. Selain itu, Row, Column, Container, dan ListTile dapat digunakan untuk menyusun dan mengatur berbagai komponen pada antarmuka aplikasi.

Melalui praktikum ini berhasil dibuat sebuah dashboard aplikasi Flutter sederhana yang memiliki informasi pengguna, kartu saldo, tombol aksi, dan daftar transaksi. Praktikum ini juga memberikan pemahaman mengenai cara menggabungkan berbagai widget menjadi sebuah tampilan aplikasi yang lebih terstruktur dan interaktif.

```

Bagian 7

Link Github

Link ke Repository Github

```