Laporan Praktikum 4 - Navigasi dan Passing Data

Laporan Praktikum Pemrograman Aplikasi Mobile

Navigasi dan Passing Data: Navigator, Konsep Stack, dan Constructor

Repository GitHub: Praktikum Pertemuan 4

Oleh:

AHMAD RAKA ALKINDI

NIM. 2411533017

Dosen Pengampu:

NURFIAH, S.ST, M.Kom.

Mata Kuliah:

PEMROGRAMAN APLIKASI MOBILE

Program Studi S1 Informatika
Fakultas Teknologi Informasi
Universitas Andalas
Padang

A. Pendahuluan

Praktikum ini membahas perpindahan antar halaman (navigasi) dan pengiriman data antar layar pada framework Flutter. Pada aplikasi mobile, satu aplikasi umumnya terdiri dari banyak layar, sehingga diperlukan mekanisme untuk berpindah dari satu layar ke layar lain serta membawa data yang dibutuhkan. Konsep dan komponen utama yang dipelajari pada praktikum ini meliputi:

a. Navigator dan Konsep Stack

Navigator adalah widget pengelola rute (halaman) yang bekerja seperti tumpukan kartu. Halaman yang tampil adalah halaman yang berada di tumpukan paling atas.

b. Navigator.push

Meletakkan halaman baru di tumpukan teratas sehingga pengguna berpindah ke layar baru. Dipadukan dengan MaterialPageRoute sebagai pembangun halaman tujuan.

c. Navigator.pop

Menghapus atau menutup halaman teratas sehingga pengguna kembali ke halaman sebelumnya.

d. Constructor dan Passing Data

Halaman tujuan menyiapkan variabel final sebagai penampung data dan constructor dengan penanda required agar data wajib diisi saat berpindah layar.

B. Tujuan

Menerapkan Navigator.push untuk berpindah ke layar baru.
Menggunakan Navigator.pop untuk menutup layar setelah aksi selesai.
Mengirim data (String, int) antar layar melalui Constructor.

C. Alat

Flutter SDK
Code Editor: VS Code atau Android Studio
Emulator atau perangkat fisik (device)

D. Isi dan Langkah Kerja

Praktikum dikerjakan pada aplikasi Expense Tracker dengan tema warna merah. Struktur proyek dibagi menjadi empat file di dalam folder lib, yaitu main.dart, dashboard_screen.dart, add_transaction_screen.dart, dan transaction_detail_screen.dart. Berikut alur pengerjaannya:

LANGKAH 1: MEMBUAT HALAMAN DETAIL TRANSAKSI DAN MENGIRIM DATA (PUSH)

Dibuat file baru transaction_detail_screen.dart berupa StatelessWidget yang menyiapkan variabel final untuk menampung data (title, amount, category, dan date) serta constructor dengan penanda required, sehingga data wajib dikirim dari layar sebelumnya. Data tersebut kemudian ditampilkan pada UI menggunakan widget Text.

Selanjutnya pada dashboard_screen.dart, setiap ListTile pada daftar transaksi diberi fungsi onTap yang memanggil Navigator.push dengan MaterialPageRoute. Data judul, nominal, kategori, dan tanggal diisi sesuai baris yang diklik. Tombol panah kembali pada AppBar muncul secara otomatis berkat Navigator.push.

Gambar 1: Halaman Dashboard dengan Daftar Transaksi

Gambar 2: Halaman Detail Transaksi Setelah Item Diklik

Komponen Utama yang Digunakan:
Navigator.push(context, MaterialPageRoute(builder: (context) => TransactionDetailScreen(...)));

LANGKAH 2: MENUTUP LAYAR DAN KEMBALI OTOMATIS (POP)

Pada file add_transaction_screen.dart, tombol Simpan diatur agar setelah validasi form berhasil, aplikasi menampilkan SnackBar sebagai notifikasi sukses, kemudian memanggil Navigator.pop(context) untuk menutup formulir dan kembali ke Dashboard. Halaman Dashboard sendiri membuka form melalui FloatingActionButton yang menggunakan Navigator.push.

Gambar 3: Form Catat Transaksi

Gambar 4: Kembali ke Dashboard Setelah Menekan Simpan, Muncul Notifikasi Transaksi Berhasil Disimpan

Komponen Utama yang Digunakan:
Navigator.pop(context);

LANGKAH 3: LATIHAN, INPUT TANGGAL TRANSAKSI

Pada latihan, ditambahkan satu input baru sebelum tombol Simpan pada form untuk mengisi Tanggal Transaksi. Input berupa TextFormField dengan label Tanggal (DD/MM/YYYY) yang dikontrol oleh _dateController dan diset readOnly: true agar tidak diketik manual. Pada bagian suffixIcon dipasang IconButton berikon kalender yang memanggil showDatePicker, sehingga pengguna memilih tanggal melalui kalender, lalu hasilnya ditulis ke controller. Field ini diberi validasi wajib diisi dengan pesan "Tanggal wajib diisi".

Gambar 5: Input Tanggal dengan showDatePicker

Gambar 6: Form Setelah Tanggal Dipilih dari Kalender

Komponen Utama yang Digunakan:
showDatePicker, TextFormField, dan validator

LANGKAH 4: SOURCE CODE KODE PROGRAM FLUTTER

Berikut adalah dokumentasi kode program dari empat file yang dibuat pada praktikum ini. Kode lengkap dapat dilihat pada repository GitHub.

lib/main.dart

File utama untuk menjalankan aplikasi. Tema warna disesuaikan menjadi merah dan halaman pertama yang dimuat adalah DashboardScreen.

Gambar 7: Kode main.dart

lib/dashboard_screen.dart

Halaman utama yang berisi tombol mengambang (FAB) untuk berpindah ke form dengan Navigator.push, kartu saldo, serta daftar transaksi yang dapat diklik untuk membuka halaman detail dengan mengirim data.

Gambar 8: Import dan AppBar pada Dashboard

Gambar 9: FloatingActionButton dengan Navigator.push ke form

Gambar 10: Body Dashboard

Gambar 11: Widget _buildBalanceCard

Gambar 12: Widget _buildTransactionList dengan Passing Data

lib/add_transaction_screen.dart

Halaman form pencatatan transaksi. Pada praktikum ini ditambahkan _dateController dan input tanggal dengan showDatePicker, serta Navigator.pop pada tombol Simpan.

Gambar 13: Deklarasi controller dan AppBar pada form

Gambar 14: Body form, input tanggal, dan Navigator.pop

lib/transaction_detail_screen.dart

Halaman detail yang menerima data melalui constructor dengan variabel final dan penanda required.

Gambar 15: Constructor dan tampilan halaman detail

Gambar 16: Widget pembantu _buildDetailRow

E. Kesimpulan

Kesimpulan dari praktikum ini adalah saya telah memahami cara kerja navigasi pada Flutter yang menggunakan konsep tumpukan (stack). Navigator.push berfungsi untuk berpindah ke halaman baru, sedangkan Navigator.pop berfungsi untuk menutup halaman dan kembali ke halaman sebelumnya. Selain itu, pengiriman data antar layar dapat dilakukan melalui constructor dengan variabel final dan penanda required, sehingga halaman detail transaksi dapat menampilkan data sesuai item yang diklik pada Dashboard. Pada latihan, penambahan input tanggal dengan showDatePicker dan validasi wajib diisi melengkapi form pencatatan transaksi pada aplikasi Expense Tracker.