Report 4 AppMobile — Navigasi & Passing Data

Aplikasi Mobile Semester 5 Putri Balqis Afradinata

I. Tujuan Praktikum

Menerapkan Navigator.push untuk berpindah dari satu layar ke layar lainnya.
Menggunakan Navigator.pop untuk menutup layar dan kembali ke halaman sebelumnya.
Mengirim data berupa String dan int antar layar melalui Constructor.

II. Dasar Teori

Praktikum IV membahas Navigasi & Passing Data pada Flutter. Materi berfokus pada penggunaan Navigator untuk berpindah halaman, konsep Stack, serta pengiriman data antar halaman menggunakan Constructor.

Navigator merupakan widget yang digunakan untuk mengelola perpindahan antar halaman atau route. Mekanismenya bekerja seperti tumpukan kartu. Push digunakan untuk meletakkan halaman baru di bagian paling atas tumpukan, sedangkan Pop digunakan untuk menghapus halaman teratas sehingga aplikasi kembali ke halaman sebelumnya.

Pada proses passing data, halaman tujuan harus menyediakan variabel untuk menampung data yang dikirim dan sebuah Constructor. Variabel biasanya dibuat menggunakan final, sedangkan parameter required digunakan untuk memastikan data wajib diberikan ketika halaman tujuan dibuat.

Dalam praktikum ini, data transaksi seperti title, amount, category, dan date dikirim dari Dashboard menuju halaman Detail Transaksi melalui Constructor. Konsep tersebut membuat halaman detail dapat menampilkan informasi sesuai transaksi yang dipilih.

III. Langkah-Langkah Praktikum

Membuat Struktur File Praktikum
Struktur aplikasi dibagi menjadi beberapa file di dalam folder lib agar setiap halaman memiliki fungsi yang jelas. File yang digunakan yaitu main.dart, dashboard_screen.dart, add_transaction_screen.dart, dan transaction_detail_screen.dart.
```
lib/
├── main.dart
├── dashboard_screen.dart
├── add_transaction_screen.dart
└── transaction_detail_screen.dart
```

Membuat File main.dart
File main.dart merupakan file utama untuk menjalankan aplikasi. Aplikasi diarahkan ke DashboardScreen sebagai halaman pertama.

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

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Expense Tracker - Modul 4',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: const DashboardScreen(),
    );
  }
}

Dengan pengaturan tersebut, ketika aplikasi dijalankan, halaman yang pertama ditampilkan adalah Dashboard.

Membuat Dashboard
Dashboard menjadi halaman utama aplikasi yang menampilkan saldo dan daftar transaksi. Tombol tambah transaksi menggunakan Navigator.push untuk membuka halaman form.
```
Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => const AddTransactionScreen(),
  ),
);
```
Ketika tombol tambah ditekan, halaman AddTransactionScreen diletakkan di atas halaman Dashboard pada stack Navigator.
Membuat Halaman Detail Transaksi
File transaction_detail_screen.dart dibuat untuk menerima data transaksi dari Dashboard. Variabel yang digunakan adalah title, amount, category, dan date.
```
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,
  });
}
```
Variabel dibuat menggunakan final karena data diterima melalui Constructor dan halaman detail menggunakan StatelessWidget.
Menerapkan Passing Data dengan Constructor
Setiap transaksi pada Dashboard dibuat dapat ditekan menggunakan onTap. Saat transaksi dipilih, aplikasi menggunakan Navigator.push sekaligus mengirim data melalui Constructor TransactionDetailScreen.
```
onTap: () {
  Navigator.push(
    context,
    MaterialPageRoute(
      builder: (context) => const TransactionDetailScreen(
        title: 'Makan Siang',
        amount: '- Rp 50.000',
        category: 'Makanan',
        date: '13 September 2026',
      ),
    ),
  );
}
```
Data pada Constructor akan diterima oleh halaman Detail Transaksi dan ditampilkan sesuai dengan transaksi yang dipilih.
Menerapkan Navigator.pop
Pada halaman form transaksi, setelah proses penyimpanan berhasil, halaman ditutup menggunakan Navigator.pop(context).
```
if (_formKey.currentState!.validate()) {
  ScaffoldMessenger.of(context).showSnackBar(
    const SnackBar(
      content: Text('Transaksi Berhasil Disimpan!'),
      backgroundColor: Colors.green,
    ),
  );

  Navigator.pop(context);
}
```
Navigator.pop menghapus halaman form yang berada di posisi teratas stack sehingga aplikasi kembali ke Dashboard.
Membuat Halaman Form Transaksi
Halaman add_transaction_screen.dart digunakan untuk memasukkan judul dan nominal transaksi. Form menggunakan TextFormField, GlobalKey<FormState>, dan TextEditingController.
```
final _formKey = GlobalKey<FormState>();
final _titleController = TextEditingController();
final _amountController = TextEditingController();
```
Sebelum data disimpan, form melakukan validasi untuk memastikan input yang dibutuhkan tidak kosong.

IV. Tugas Praktikum

Pada tugas Praktikum IV, ditambahkan satu input baru sebelum tombol Simpan untuk mengisi Tanggal Transaksi. Modul menyediakan dua alternatif implementasi, yaitu menggunakan TextFormField dengan format DD/MM/YYYY atau menggunakan tombol tambahan yang memanggil fungsi showDatePicker. Input tanggal wajib diberikan validasi agar tidak boleh kosong. fileciteturn0file0L323-L329

Menambahkan Input Tanggal Transaksi
Field tanggal ditambahkan pada form sebelum tombol Simpan. Jika menggunakan TextFormField, sebuah controller dapat digunakan untuk menampung nilai tanggal.

final _dateController = TextEditingController();

TextFormField(
  controller: _dateController,
  decoration: const InputDecoration(
    labelText: "Tanggal Transaksi",
    hintText: "DD/MM/YYYY",
    border: OutlineInputBorder(),
    prefixIcon: Icon(Icons.calendar_today),
  ),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return "Tanggal transaksi wajib diisi";
    }
    return null;
  },
)

Menggunakan showDatePicker
Alternatif lainnya adalah menggunakan showDatePicker sehingga pengguna dapat memilih tanggal melalui kalender.

Future<void> _pickDate() async {
  final DateTime? picked = await showDatePicker(
    context: context,
    initialDate: DateTime.now(),
    firstDate: DateTime(2000),
    lastDate: DateTime(2100),
  );

  if (picked != null) {
    setState(() {
      _dateController.text =
          "${picked.day.toString().padLeft(2, '0')}/"
          "${picked.month.toString().padLeft(2, '0')}/"
          "${picked.year}";
    });
  }
}

Setelah tanggal dipilih, nilai tanggal dimasukkan ke dalam field dengan format DD/MM/YYYY.

Memberikan Validasi Tanggal
Field tanggal harus diperiksa bersama field lainnya ketika tombol Simpan ditekan. Validasi dilakukan menggunakan _formKey.currentState!.validate().
```
onPressed: () {
  if (_formKey.currentState!.validate()) {
    ScaffoldMessenger.of(context).showSnackBar(
      const SnackBar(
        content: Text("Data transaksi berhasil divalidasi"),
      ),
    );
  }
}
```
Dengan validasi tersebut, tanggal yang kosong tidak dapat dianggap sebagai input yang valid.
Hasil Tugas Praktikum
Setelah tugas selesai, form transaksi memiliki tambahan input tanggal transaksi yang wajib diisi. Form kemudian dapat melakukan validasi sebelum proses penyimpanan dilakukan.

V. Hasil dan Pembahasan

Berdasarkan praktikum yang telah dilakukan, aplikasi berhasil menerapkan navigasi antar halaman menggunakan Navigator. Pada Dashboard, Navigator.push ini digunakan untuk membuka halaman form transaksi maupun halaman Detail Transaksi. Mekanisme ini membuat halaman baru ditempatkan pada bagian teratas stack Navigator.

Proses passing data berhasil diterapkan pada saat pengguna memilih transaksi di Dashboard. Data berupa judul, nominal, kategori, dan tanggal dikirim ke TransactionDetailScreen melalui Constructor. Halaman detail kemudian menampilkan data sesuai transaksi yang dipilih.

Selain itu, Navigator.pop digunakan pada halaman input transaksi untuk menutup halaman tersebut dan kembali ke Dashboard setelah aksi selesai. Penggunaan push dan pop menunjukkan penerapan konsep Stack dalam navigasi Flutter, yaitu halaman yang terakhir dibuka akan menjadi halaman pertama yang ditutup ketika proses pop dilakukan.

Pada bagian tugas, form dikembangkan dengan menambahkan input Tanggal Transaksi. Modul menyediakan penggunaan TextFormField dengan format DD/MM/YYYY maupun pemilihan tanggal menggunakan showDatePicker. Input tanggal juga diberikan validasi wajib diisi sehingga data tidak dapat diproses apabila tanggal belum diberikan.

VI. Kesimpulan

Dari praktikum yang telah dilakukan dapat disimpulkan bahwa Flutter menyediakan Navigator untuk mengatur perpindahan antar halaman menggunakan konsep stack. Navigator.push digunakan untuk membuka halaman baru, sedangkan Navigator.pop digunakan untuk kembali ke halaman sebelumnya.

Passing data antar halaman dapat kita lakukan melalui Constructor dengan menyediakan variabel final dan parameter required. Dengan cara tersebut, data transaksi dapat dikirim dari Dashboard menuju halaman Detail Transaksi dan ditampilkan sesuai dengan data yang dipilih pengguna.

Pada tugas praktikum, form juga dikembangkan dengan menambahkan input tanggal transaksi yang wajib diisi. Dengan demikian, aplikasi tidak hanya mampu melakukan navigasi antar halaman, tetapi juga dapat mengirimkan dan menampilkan data transaksi secara lebih lengkap.