Praktikum Mobile Application 4 — Navigasi & Passing Data Flutter

2. Informasi Praktikum

Mata Kuliah

Mobile Application

Praktikum

4

Project

Expense Tracker - Modul 4

Topik

Navigasi & Passing Data

Repository

Flutter-Mobile-Application

Folder

flutter_04practice

GitHub Project

Flutter Mobile Application 4

View on GitHub

3. Tujuan Praktikum

Praktikum ini bertujuan untuk memahami dan menerapkan navigasi antarhalaman pada Flutter menggunakan Navigator, konsep Stack, constructor, passing data, form transaksi, dan validasi input.

1. Memahami konsep Navigator pada Flutter.

2. Memahami Navigator.push().

3. Memahami Navigator.pop().

4. Memahami konsep Stack dalam navigasi.

5. Memahami constructor pada widget.

6. Memahami passing data antar halaman.

7. Membuat halaman Dashboard.

8. Membuat halaman Catat Transaksi.

9. Membuat halaman Detail Transaksi.

10. Membuat input tanggal menggunakan showDatePicker().

11. Menerapkan validasi form.

4. Dasar Teori

4.1 Navigator

Navigator merupakan widget Flutter yang digunakan untuk mengatur perpindahan antar route atau halaman. Dalam konsep navigasi, halaman baru ditumpuk di atas halaman sebelumnya seperti stack.

Dashboard

↓

Catat Transaksi

↓

Detail Transaksi

Halaman yang terakhir dibuka berada di atas stack.

4.2 Navigator.push()

Push digunakan untuk membuka halaman baru dan menempatkannya di atas halaman yang sedang aktif.

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const AddTransactionScreen(),
  ),
);

Bagian penting dari kode di atas adalah context yang mengacu pada lokasi navigasi saat ini dan MaterialPageRoute yang menentukan halaman tujuan.

4.3 Navigator.pop()

Pop digunakan untuk menutup halaman aktif dan kembali ke halaman sebelumnya.

Navigator.pop(context);

Dalam aplikasi Expense Tracker, setelah form validasi berhasil, halaman Catat Transaksi ditutup dan pengguna kembali ke Dashboard.

4.4 Konsep Stack

Flutter menggunakan struktur stack dalam navigasi. Halaman yang paling baru dibuka berada di posisi paling atas.

Dashboard

↓ push

Catat Transaksi

↓ pop

Dashboard

↓ push

Detail Transaksi

↓ pop

Dashboard

4.5 Constructor & Passing Data

Data transaksi dikirim dari Dashboard ke halaman Detail melalui constructor. Parameter dibuat required agar data wajib diberikan saat widget dibuat.

const TransactionDetailScreen(
  title: 'Makan Siang',
  amount: '- Rp 50.000',
  category: 'Makanan',
  date: '13 September 2026',
);

Data yang dikirim pada halaman detail meliputi title, amount, category, dan date.

5. Struktur Project

lib/
├── main.dart
├── dashboard_screen.dart
├── add_transaction_screen.dart
└── transaction_detail_screen.dart

main.dart

Entry point aplikasi dan menentukan DashboardScreen sebagai halaman awal.

dashboard_screen.dart

Menampilkan Dashboard Keuangan, saldo, transaksi, dan tombol tambah.

add_transaction_screen.dart

Halaman untuk masuk data transaksi dan proses validasi form.

transaction_detail_screen.dart

Halaman detail transaksi yang menerima data melalui constructor.

6. Langkah 1 — Membuat main.dart

import 'package:flutter/material.dart';
import 'dashboard_screen.dart';

void main() {
  runApp(const MyApp());
}

main.dart merupakan entry point aplikasi. Bagian penting adalah home: const DashboardScreen(), yang menentukan Dashboard sebagai halaman pertama yang dibuka.

7. Langkah 2 — Membuat Dashboard Keuangan

Dashboard dibuat dengan beberapa komponen utama: AppBar, sapaan pengguna, saldo utama, daftar transaksi, serta FloatingActionButton.

floatingActionButton: FloatingActionButton(
  backgroundColor: Colors.red,
  foregroundColor: Colors.white,
  child: const Icon(Icons.add),
  onPressed: () {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (context) => const AddTransactionScreen(),
      ),
    );
  },
),

Ketika tombol + ditekan, Navigator.push() digunakan untuk membuka halaman Catat Transaksi. MaterialPageRoute menandai widget tujuan yang akan dibuka.

9. Langkah 3 — Navigasi ke Halaman Catat Transaksi

Saat tombol + pada Dashboard ditekan, aplikasi menggunakan Navigator.push() untuk membuka halaman AddTransactionScreen. Halaman baru diletakkan di atas stack, sehingga halaman sebelumnya masih tersedia di bawahnya.

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const AddTransactionScreen(),
  ),
);

11. Langkah 4 — Form dan Validasi

Halaman Catat Transaksi menggunakan GlobalKey<FormState>, TextEditingController, serta TextFormField untuk mengambil dan memvalidasi input pengguna.

final _formKey = GlobalKey<FormState>();
final _titleController = TextEditingController();
final _amountController = TextEditingController();

Controller digunakan untuk mengambil nilai dari input. Validasi form dilakukan dengan validator untuk memastikan judul dan nominal tidak kosong.

validator: (value) =>
    value!.isEmpty ? "Tidak boleh kosong" : null,

if (_formKey.currentState!.validate()) {
  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(
      content: Text('Transaksi Berhasil Disimpan!'),
      backgroundColor: Colors.green,
    ),
  );

  Navigator.pop(context);
}

Jika validasi berhasil, SnackBar ditampilkan dan Navigator.pop() dipanggil untuk kembali ke Dashboard.

12. Langkah 5 — Detail Transaksi

File transaction_detail_screen.dart didefinisikan sebagai StatelessWidget dengan variabel dan constructor yang menerima data dari halaman sebelumnya.

class TransactionDetailScreen extends StatelessWidget {
  final String title;
  final String amount;
  final String category;
  final String date;

  const TransactionDetailScreen({
    super.key,
    required this.title,
    required this.amount,
    required this.category,
    required this.date,
  });
}

Masing-masing parameter menerima data yang dikirim dari Dashboard, sehingga halaman Detail dapat menampilkan informasi sesuai transaksi yang dipilih.

13. Passing Data

Dashboard

↓

title
amount
category
date

↓

TransactionDetailScreen

TransactionDetailScreen(
  title: 'Makan Siang',
  amount: '- Rp 50.000',
  category: 'Makanan',
  date: '13 September 2026',
)

Data dikirim saat Navigator.push() membuat halaman detail. Dengan demikian, halaman tujuan dapat menampilkan informasi yang sesuai dengan transaksi yang dipilih.

16. Latihan / Tugas — Input Tanggal

Pada latihan, ditambahkan input Tanggal Transaksi sebelum tombol Simpan. Ketentuannya adalah menggunakan TextFormField, format DD/MM/YYYY, tombol + untuk memilih tanggal, dan validasi agar tanggal wajib diisi.

Future _selectDate(BuildContext context) async {
  final DateTime? pickedDate = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2000),
    lastDate: DateTime(2100),
  );

  if (pickedDate != null) {
    final String day = pickedDate.day.toString().padLeft(2, '0');
    final String month = pickedDate.month.toString().padLeft(2, '0');
    final String year = pickedDate.year.toString();

    setState(() {
      _dateController.text = '$day/$month/$year';
    });
  }
}

showDatePicker membuka kalender, pickedDate menyimpan tanggal yang dipilih, lalu date diformat menjadi DD/MM/YYYY dengan setState() memperbarui TextFormField.

TextFormField(
  controller: _dateController,
  readOnly: true,
  decoration: InputDecoration(
    labelText: "Tanggal Transaksi",
    border: const OutlineInputBorder(),
    prefixIcon: const Icon(Icons.calendar_today),
    suffixIcon: IconButton(
      icon: const Icon(Icons.add),
      onPressed: () {
        _selectDate(context);
      },
    ),
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return "Tanggal transaksi wajib diisi";
    }
    return null;
  },
)

Field tanggal menggunakan controller untuk menampilkan hasil pemilihan dari popup kalender. readOnly membuat input tidak bisa diketik manual, sementara validator memastikan tanggal wajib diisi.

21. Alur Aplikasi

Dashboard

↓

tekan +

↓

Catat Transaksi

↓

Simpan

↓

Validasi Form

↓

SnackBar

↓

Navigator.pop()

↓

Dashboard

↓

klik transaksi

↓

Navigator.push()

↓

TransactionDetailScreen

↓

title
amount
category
date

22. Pengujian

No	Pengujian	Input / Aksi	Hasil
1	Membuka aplikasi	Run aplikasi	Dashboard tampil
2	Membuka Catat Transaksi	Klik tombol +	Halaman Catat Transaksi tampil
3	Input transaksi	SPAGGETI, 20000	Data diterima form
4	Simpan transaksi	Klik Simpan	SnackBar berhasil tampil
5	Detail Makan Siang	Klik Makan Siang	Detail tampil
6	Detail Gaji Bulanan	Klik Gaji Bulanan	Detail tampil
7	Input tanggal	Pilih 28/09/2026	Tanggal tampil
8	Validasi tanggal	Kosongkan tanggal	Validasi dijalankan

23. Hasil yang Dicapai

Navigator

Berhasil menerapkan perpindahan halaman menggunakan Navigator.

Stack Navigation

Berhasil memahami mekanisme push dan pop.

Passing Data

Berhasil mengirim title, amount, category, dan date melalui constructor.

Form Validation

Berhasil menerapkan validasi pada input transaksi.

Date Picker

Berhasil menerapkan showDatePicker() dan format DD/MM/YYYY.

15. Dokumentasi Hasil

Dashboard Keuangan Expense Tracker Praktikum Mobile Application 4

Gambar 1. Tampilan Dashboard Keuangan

Halaman Catat Transaksi Expense Tracker Praktikum Mobile Application 4

Gambar 2. Halaman Catat Transaksi

Detail Transaksi Makan Siang Praktikum Mobile Application 4

Gambar 3. Detail Transaksi Makan Siang

Detail Transaksi Gaji Bulanan Praktikum Mobile Application 4

Gambar 4. Detail Transaksi Gaji Bulanan

Input Tanggal Transaksi menggunakan Date Picker Praktikum Mobile Application 4

Gambar 5. Implementasi Input Tanggal Transaksi

Dashboard dengan SnackBar Transaksi Berhasil Disimpan Praktikum Mobile Application 4

Gambar 6. Hasil Submit Transaksi

24. Kesimpulan

Pada Praktikum Mobile Application 4 telah berhasil diterapkan konsep navigasi antarhalaman pada Flutter menggunakan Navigator, Navigator.push(), Navigator.pop(), konsep Stack, constructor, dan passing data. Aplikasi Expense Tracker memiliki halaman Dashboard, Catat Transaksi, dan Detail Transaksi. Data transaksi dapat dikirim dari Dashboard ke halaman Detail melalui constructor.

Pada latihan, berhasil ditambahkan input Tanggal Transaksi menggunakan TextFormField, tombol +, showDatePicker(), format DD/MM/YYYY, serta validasi agar tanggal wajib diisi.

25. Source Code

View on GitHub